How does the frontend and backend communicate (in prod build)?

[snluu]

Hello!

I'm trying to understand some details of how Wails works internally, particularly communication between FE & BE.

From my experiments on v2, my understanding is that the Go process starts a web server, serving both the frontend assets and the backend IPC. FE & BE communicate via websocket messages. Though, I cannot confirm the same for the production build, since I did not see the process ID listening on any TCP port.

Does the production build communicate differently between FE & BE? Or does it just stop listening on a port once the websocket connection has been established?

Feel free to give me a code pointer and I can follow the rabbit hole.

Thanks in advance!

[leaanthony]

Good question! It uses an internal IPC mechanism built into the webviews. All the bound methods in JS are wrappers to this function: https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/runtime/desktop/calls.js#L57
WailsInvoke is the build agnostic method to pass a message to the host application. For prod builds that's this: https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/runtime/desktop/ipc.js
For Dev mode, it's sent over a websocket as defined here: https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/runtime/dev/main.js#L21
So that's the JS side.
For Go, there's a listener setup to receive these messages. For prod builds, a platform specific hook is created which takes the message from the webview and passes it along a channel to the message processor via an exported Go function. For Mac, this is here: https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/desktop/darwin/WailsContext.m#L482 and here:
https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/desktop/darwin/frontend.go#L433
The message is processed and with a couple of exceptions, eventually gets sent to the dispatcher: https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/desktop/darwin/frontend.go#L284
For Dev mode, a websocket server is created and the message sent by https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/runtime/dev/main.js#L21 is processed and eventually sent to the dispatcher: https://github.com/wailsapp/wails/blob/master/v2/internal/frontend/devserver/devserver.go#L338

I'm typing this on a phone so hopefully that all makes sense 😝

[snluu]

Wow @leaanthony thank you so much! And it's impressive that you typed and linked all this from the phone. Thanks for helping me understand the internals of the framework. It really helps as I'm evaluating different solutions for our project, and hopefully contribute back to the framework some day.

Cheers!

[Robert-M-Muench]

Can something like https://github.com/fzipp/canvas be used in parallel? It uses an own go/websocket/js combo. That would allow to access the canvas directly from Go. Or, forking it to make it Wails compatible might be worth doing.