Best way to communicate with REST service on localhost

Support
#1

I have REST service started on http://localhost:xxxx for communication from web application with local PC hardware.
For example I can get list of printers and post file to print on specific printer without preview and print dialog.
We use own javascript file to do it as documented here
But there is only one way to send data from server side to frontend: by setting javascript component state.
And it is the problem: I can’t immediately send state to frontend but only change state and mark it dirty.
If I change state frequently (every second) serverside loose some states and don’t pass them to frontend at all.
There is RPC calls from server-side to the client-side functionality but Vaadin documentation says:
Calls made from the server-side to the client-side are communicated in the response of the server request during which the call was made.

May be I must use Page.getCurrent().getJavaScript().execute(…) for communicate with localhost service ?
But I don’t understand how can I get response from localhost service on serverside.

Please, point me in the right direction.

#3

Hi,

RPC calls from the server-side to the client-side usually are used for communicating stateless events, such as button clicks or other user interactions.

If you need to call a REST API from your JavaScript code, you can use a standard approach, e.g., fetch.

If you describe your task in more detail, I’ll try to provide you with a more specific solution.

Regards,
Gleb

#5

Tnahks for your reply.
As i wrote we use own javascript file and yes: we use fetch to call localhost service REST API.
Something like this:

com_company_cms_web_toolkit_ui_printproxy_PrintProxyServerComponent = function() {
    var connector = this;

    connector.onStateChange = function() {
        const url = 'http://localhost:8080/print'
        const state = connector.getState()

        data.append('filename', state.filename)
        data.append('file', state.file)   // byte[]
        data.append('printer', state.printer)

        fetch(url, {
                method: 'POST',
                body: data
        }).then(success => {
		connector.printedSuccessfully();
        }).catch(error => {
		connector.printingOrConnectionError();
        })
    }
}

My question is next: how can I manually call connector.onStateChange function or any other function from javacript file from serverside.

#6

The onStateChange function can’t be called manually (and shouldn’t be). If you need to call a function defined in the JavaScript connector file from the server-side, you need to do the following:

  1. Add a new function to the connector object.
// Define a function that can be called from the server side
connector.fooFunction = function () {
        ...
};
  1. Invoke the callFunction method with the JS function name as the first param. This method is available in the descendants of AbstractJavaScriptComponent.
callFunction("fooFunction");

The example can be found in the live demo (note that this demo shows usage of Generic JavaScriptComponent which is a simple UI component that can work with any JavaScript wrapper without Vaadin component implementation.)

Gleb