Websockets in Retool app

💬 App Building
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

4 Likes