# 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="/files/0RhN2XYaAAuzVG8mpu0t" alt=""><figcaption></figcaption></figure>

***

#### How To:&#x20;

{% hint style="success" %}
View this example in the Bubble editor:\
\
<https://bubble.io/page?id=deskifier-plugin-test&tab=Workflow&name=sandbox&type=page&wf_item=bTNwL>
{% endhint %}

#### 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="/files/uyZ7KYhPW01MUG56Tcx8" alt=""><figcaption></figcaption></figure>

#### Step 2.

Once our server is running (use the [Server Failed To Start](/deskifier/deskifier-bubble.io-docs/websocket-server-element/events.md#server-failed-to-start) event to catch errors while starting), we can then connect to it using the [WebSocket Client Element](/deskifier/deskifier-bubble.io-docs/websocket-client-element.md). \
\
In our browser, we'll run the [Connect To Server](/deskifier/deskifier-bubble.io-docs/websocket-client-element/actions.md#connect-to-server) action.

<figure><img src="/files/rJ8SN0g4Z7l97MkRSC9S" alt=""><figcaption></figcaption></figure>

#### Step 3.

Once our client is connected, the [Client Connected](/deskifier/deskifier-bubble.io-docs/websocket-server-element/events.md#client-connected) event will fire, and the [Connected Client IDs](/deskifier/deskifier-bubble.io-docs/websocket-server-element/states.md#connected-client-ids) state will be updated.\
\
We can then send a message to our new client with the [Send Message](/deskifier/deskifier-bubble.io-docs/websocket-server-element/actions.md#send-message) action.

<figure><img src="/files/xhPozdn34WV6HDQFqswe" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deskifier.gitbook.io/deskifier/deskifier-bubble.io-docs/guides-and-examples/connecting-your-app-running-in-the-browser-to-your-desktop-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.