Is it possible to receive async results from the backend?

[benjamin-thomas]

Is your feature request related to a problem? Please describe.

I would like to call a function from the frontend, but without knowing its total execution time. That function could take a few seconds to complete, but I could also have some data available after a few milliseconds.

I would like the UI to react as soon as some data is available for a nicer user experience.

So I've been thinking how to implement a pub/sub pattern, or some kind of emitter from the backend.

Have you thought about this problem at all?

Describe the solution you'd like

From the backend perspective, I would like to write something like:

func (a *App) ProduceAsync(messages chan<- string) {
	for _, m := range []string{"A", "B", "C"} {
		messages <- m
		time.Sleep(1 * time.Second)
	}
	close(messages)
}

But I don't see how the frontend would be able to call such a method at the moment?

From the frontend perpective, I would like to write something like:

document.getElementById('my-btn').addEventListener('click', () => {
            window.go.main.App.ProduceOnce().then(val => {
                console.log("Got one value from the server")
            });

            window.go.main.App.ProduceAsync().subscribe(val => {
                console.log("Got one value from the server, but I may get more...")
                // then somebody has to deal with releasing some memory somewhere...
            });
        });

But I failed to find some code constructs that would allow the 2 to communicate in an async fashion.

Calling runtime.EventsOn from the backend and frontend works though but it'd be nice if we could isolate emitted events/messages close to the method call to prevent jQuery style event soup :)

Describe alternatives you've considered

I tried to play with the idea of returning a custom type, but its public functions are not available to the frontend so I'm pretty limited.

type Emitter struct {
	Name string // available to the frontend OK
}

func (e Emitter) String() string { // this method is not available to the frontend
	return "MyEmitter"
}

Additional context

Not a request, but just a vague idea. Unless I'm mistaken, reactive extensions are available in many languages and could provide the common ground for the backend/frontend async operations.

So maybe integrating parts of those libraries could be a nice addition to wails?

• https://rxjs.dev/
• https://github.com/ReactiveX/RxGo

[leaanthony]

Thanks for opening this. You can bind any instance of a struct to the frontend using the standard bind method. You should probably run your emitter in a goroutine. Listening to the event using EventsOn should then tie it together.

[giovapanasiti]

@leaanthony can you give us an example? So far I'm trying to use websocket to achieve the result but it implies to have an http server so if you have another solution that would be great!

[benjamin-thomas]

@giovapanasiti I intend to implement and point to a little demo in the next few days to talk about a solution or a recommendation to some kind of pattern because all is not clear in my head at the moment :)

[benjamin-thomas]

Hello,

Could you have a look at this repo ? https://github.com/benjamin-thomas/wails-async-demo2

I tried to play around with the idea of implementing an emitter, but got lost on the way :)

Ideally I think I would want to consume the output of a channel, or something similar to it. But that's not doable.

Is this the only way to have async communication with the backend?

• Step 1: push data with runtime.EventsEmit and a custom event from the backend
• Step 2: subscribe to this custom event form JS, and trigger the backend call from the client as usual
• Step 3: update the UI

Thanks

[leaanthony]

Yes, that's the standard way of doing it. All the comms between frontend and backend is async anyway, as I'm sure you're aware. I did think a JS equivalent of a channel would be cool but I'm not sure what the use case really is right now.

[benjamin-thomas]

Got you thanks :)

[sudo-sand]

Is it possible to use something like https://github.com/nanostores/nanostores? Like a go function that can update that store?

[omar2205]

In Svelte you can update a store

// store.ts
import { writable } from 'svelte/store'
export const msg = writable('nothing')
runtime.EventsOn('rcv:msg', m => msg.set(m))

[onattech]

You can probably do something similar in React with HookState's global state.

import React from 'react';
import { hookstate, useHookstate } from '@hookstate/core';

const globalState = hookstate('hi');
runtime.EventsOn('rcv:msg', m => globalState.set(m))

export const ExampleComponent = () => {
    const state = useHookstate(globalState);
    return <>
        <p>Message: {state.get()}</p>
    </>
}