Websockets in Retool app

App Building
1

I have an API that uses websockets to display progress to a client (Retool app in this case). I found and followed this, but I haven't been able to get it to work in Retool:

Does Retool support websockets? If so, does anyone have a more up-to-date article? I searched the docs, but no mention of websockets.

Thanks!

2

Hi @remco,

Retool does not currently officially support WebSockets.

To use WebSockets in Retool, you will need to:

  1. Create a custom JavaScript component that handles the WebSocket connection and communication.
  2. Add the custom JavaScript component to your Retool form.
  3. Use the custom JavaScript component to send and receive messages from the WebSocket server.

Here is a basic example of a custom JavaScript component that handles the WebSocket connection and communication:

const WebSocket = require('ws');

class WebSocketComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      websocket: null,
      messages: []
    };

    this.websocket = new WebSocket(this.props.url);

    this.websocket.onopen = () => {
      console.log('WebSocket connection opened');
    };

    this.websocket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.setState({
        messages: [...this.state.messages, message]
      });
    };

    this.websocket.onerror = (error) => {
      console.log('WebSocket connection error:', error);
    };

    this.websocket.onclose = () => {
      console.log('WebSocket connection closed');
    };
  }

  render() {
    return (
      <div>
        <h1>WebSocket Messages</h1>
        <ul>
          {this.state.messages.map((message, index) => (
            <li key={index}>{message}</li>
          ))}
        </ul>
      </div>
    );
  }
}

To use this custom JavaScript component in your Retool form, you would add it to the canvas and then configure it with the URL of your WebSocket server.

Once you have added the custom JavaScript component to your form, you can use it to send and receive messages from the WebSocket server. For example, you could send a message to the server to request the current progress of a task. The server would then respond with a message containing the progress data. You could then use the progress data to update the Retool form.

Here is an example of how to use the custom JavaScript component to send and receive messages from the WebSocket server:

const webSocketComponent = new WebSocketComponent({
  url: 'ws://localhost:8080'
});

webSocketComponent.onMessage = (message) => {
  // Update the Retool form with the progress data
};

webSocketComponent.sendMessage({
  type: 'get-progress'
});

By following these steps, you can implement WebSockets in your Retool app to display progress to the client in real time.

Hope this helps

:grinning:

Patrick

3 Likes
3

Thanks @PatrickMast
I've read through this:

I've put a custom component in my app using the example at "Minimum custom component with React" (which has two > missing in the code btw) and this works.

Do you have a working example of an app using your code? It is quite ancient (it's using a React class component), and I don't see a way of implementing it in one block of code inside this custom component that I created.

Thanks again

4

Ps Or should I forget about websockets.

The idea is that a user clicks a button that does two things:

  • send data to my API for processing
  • open a browser window to my Retool app, where the result of the API process should be shown when it is done.

I've done this in a React app with websockets, but maybe there is a different way in Retool?

5

The idea is that a user clicks a button that does two things:

  • send data to my API for processing
  • open a browser window to my Retool app, where the result of the API process should be shown when it is done.

Would you have this button pushed from a Retool app? Do you have an API query in your app to hit your API endpoint? If not pushed from a Retool app, where would you push from?

And to show data in your app, this should be simple! You can just run a query (either periodically or just on page load) to retrieve the data.

https://docs.retool.com/queries

https://docs.retool.com/apps/web/guides/components/table#load-data-in-a-table