Energy GUI应用JS和Go交互
1 / 0 / 创建于 9个月前
吼咔咔 的个人博客
使用energy开发桌面应用，我们想快速的实现JS代码和Go代码互通，在开发原始web应用时一搬使用http或websocket达到数据交互。
在energy中提供了一套事件驱动机制，很容易使JS和Go交互，且不需要额外开启接口服务。
ipc, 基于CEF实现的事件绑定机制
在Go中使用 ipc.On 监听一个事件，ipc.Emit 触发一个事件。
在JS中使用 ipc.on 监听一个事件，ipc.emit 触发一个事件。
Go监听事件
ipc.On("goOnEventName", func() {
// ....
})JS监听事件
ipc.on("jsONEventName", func() {
// ....
})Go触发JS事件
ipc.Emit("jsONEventName") // 只触发或传递参数
ipc.EmitAndCallback("jsONEventName" []any[..], func(){})// 只触发，传递参数，带有返回值JS触发Go事件
ipc.emit("goOnEventName")当然，上面的事件监听和触发是可以传递参数和接收返回值
带有参数和返回值, 我们只需要按定义规则即可传递和接收返回值
Go监听事件
ipc.On("goOnEventName", func(inArgs1 int, inArgs2 string) string {
// ....
return inArgs2
})JS监听事件
ipc.on("jsONEventName", function(inargs1, inArgs2) {
// ....
return inArgs2
})Go触发JS事件
ipc.EmitAndCallback("jsONEventName", []any{100, "张三"}, func(result string){
//...
})JS触发Go事件
ipc.emit("goOnEventName", [100, '李四'], function(result){
//...
})完整代码示例
Go部分
package main
import (
"embed"
"fmt"
"github.com/energye/energy/v2/cef"
"github.com/energye/energy/v2/cef/ipc"
"github.com/energye/energy/v2/examples/common"
_ "github.com/energye/energy/v2/examples/syso"
"github.com/energye/energy/v2/pkgs/assetserve"
"github.com/energye/golcl/lcl"
)
//go:embed resources
var resources embed.FS
func main() {
cef.GlobalInit(nil, resources)
cefApp := cef.NewApplication()
port := common.Port()
cef.BrowserWindow.Config.Url = fmt.Sprintf("http://localhost:%d/ipc.html", port)
cef.BrowserWindow.Config.Title = "Energy IPC"
// 监听一个事件 goOnEventName
ipc.On("goOnEventName", func(inArgs1 int, inArgs2 string) string {
fmt.Println("JS传递的参数:", inArgs1, inArgs2)
return inArgs2
})
// 主窗口初始化回调
cef.BrowserWindow.SetBrowserInit(func(event *cef.BrowserEvent, window cef.IBrowserWindow) {
lclWindow := window.AsLCLBrowserWindow().BrowserWindow()
lclWindow.SetWidth(350)
lclWindow.SetHeight(300)
// 创建一个系统原生按钮button, 来模拟事件触发
button := lcl.NewButton(lclWindow)
button.SetParent(lclWindow)
button.BringToFront()
button.SetCaption("触发JS监听的事件")
button.SetLeft(100)
button.SetTop(100)
button.SetWidth(150)
button.SetHeight(50)
button.SetOnClick(func(sender lcl.IObject) {
// 触发JS监听的事件 jsONEventName
ipc.EmitAndCallback("jsONEventName", []any{100, "张三"}, func(result string) {
fmt.Println("JS的返回值:", result)
})
})
})
// 主进程启动后回调
cef.SetBrowserProcessStartAfterCallback(func(b bool) {
//通过内置http服务加html载资源
server := assetserve.NewAssetsHttpServer()
server.PORT = port
server.AssetsFSName = "resources" //必须设置目录名
server.Assets = resources
go server.StartHttpServer()
})
//运行应用
cef.Run(cefApp)
}
=HTML + JavaScript部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="application/javascript">
// 监听一个事件 jsONEventName
ipc.on("jsONEventName", function(inargs1, inArgs2) {
// ....
console.log('Go传递的参数:', inargs1, inArgs2)
return inArgs2
})
function jsEmitGoEvent() {
// 触发Go中监听的事件 goOnEventName
ipc.emit("goOnEventName", [100, '李四'], function(result){
//...
console.log('Go的返回值:', result)
})
}
</script>
</head>
<body style="margin: 0px;padding: 0px;">
<button onclick="jsEmitGoEvent()" style="margin-left: 100px;height: 50px;">触发Go监听的事件</button>
</body>
</html>运行演示结果
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号