Energy GUI应用JS和Go交互

吼咔咔的个人博客 / 67 / 0 / 创建于 3个月前

使用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>