Connecting your app running in the browser to your desktop app

Your desktop app can start a local WebSocket server, allowing applications running in the browser to communicate directly with it. By opening a server on a specific port, your web application can establish a real-time connection to the desktop app running on the user's machine.

Once connected, the browser and desktop app can exchange messages and trigger actions.

This makes it possible for a web-based application to interact with desktop features such as local files, system information, or other capabilities that are not normally available in a standard browser environment.

<figure><img src="https://909455594-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC8kwY8yODXmNxAtaN0Ej%2Fuploads%2Fsemn153cPTFLlPiNUrdr%2FstartWebSocketServer.gif?alt=media&token=d877f72a-3b9c-4dd8-af9c-e0e18aee3f05" alt=""><figcaption></figcaption></figure>

How To:

Step 1.

The first step, is to start running our server in our desktop app. This opens up a local server that will manage incoming local connections. To do this, we must specify a port to listen on.

You can specify multiple ports that will be attempted to start on. The first available will be used.

Additionally, we must specify a token to use that will be used to authenticate clients before connecting.

<figure><img src="https://909455594-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC8kwY8yODXmNxAtaN0Ej%2Fuploads%2FX0tY1JuC303fIaf55Imz%2Fimage.png?alt=media&token=9477b9d7-b972-462d-9a1f-215852c712c7" alt=""><figcaption></figcaption></figure>

Step 2.

Once our server is running (use the Server Failed To Start event to catch errors while starting), we can then connect to it using the WebSocket Client Element.

In our browser, we'll run the Connect To Server action.

<figure><img src="https://909455594-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC8kwY8yODXmNxAtaN0Ej%2Fuploads%2FWEF0eIAELB1nh1HerLFa%2Fimage.png?alt=media&token=73c1b034-93fd-4031-a6fb-6b01c9b2ffd0" alt=""><figcaption></figcaption></figure>

Step 3.

Once our client is connected, the Client Connected event will fire, and the Connected Client IDs state will be updated.

We can then send a message to our new client with the Send Message action.

<figure><img src="https://909455594-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC8kwY8yODXmNxAtaN0Ej%2Fuploads%2F3udA8ZZpTZ5VD34ljZ8o%2Fimage.png?alt=media&token=4ade6f4a-4954-4a69-a847-d826255b72ee" alt=""><figcaption></figcaption></figure>