Energy GUI桌面应用开发之js和go之间交互示例

Go  /  管理员 发布于 1年前   626

在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("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>
<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>


运行演示结果

MTsvnBvzGk.gif


  • 上一条：
    在go语言中gin + gorm多表关联实现一个店铺商品搜索功能示例
    下一条：
    在PHP中使用array_pop + yield实现读取超大型目录功能示例

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客