Tyler Stiene

Low-code tools are great for building internal tools, but they can be limiting when it comes to more complex features like Websockets. Retool is a low-code tool that allows you to build internal tools quickly and easily, but it doesn’t have built-in support for Websockets. However, you can still use Websockets in Retool in a way that is both simple and effective.

In this post we’ll show you how to use Websockets in Retool to build real-time features.

The Challenge

Retool’s data model evolves around queries and resources. You can query a database, an API, or any other data source, and then use that data in your app. However, Retool doesn’t have built-in support for Websockets, which makes it challenging to build real-time features like live chat, notifications, or real-time data visualization. Without a native Websockets feature, you might think that building real-time features in Retool is impossible. But that’s not the case. Retool supports importing external libraries, which means you can use any JavaScript library in your Retool app, including Websockets libraries. The difficulty lies in integrating Websockets with Retool’s and reactivity model. To bridge the gap we must integrate a websocket listener with Retool’s reactivity model. Once we have a listener inside the context of reactivity, we can update data, queries, and resources in real-time.

graph TD
  subgraph JS Context
    A[Create WebSocket]
    subgraph Retool Context
      B[Websocket Listener]
      C[Retool Data]
      D[Retool Queries]
    end
  end
  A --> B
  B --> C
  B --> D
  

Step 1 - Importing the Websockets Library

To use Websockets in Retool, you need to import a Websockets library. There are many Websockets libraries available, while the base websocket library is a good choice, I recommend using reconnecting-websocket for its reconnection capabilities. To import the library, you need to navigate to the setting for your Retool app and add the library to the external libraries section. Using a CDN is the easiest way to import the library.

Step 2 - Connecting to the Websocket Server

Once you have imported the Websockets library, you can connect to a Websocket server. Navigate to the Preloaded JS setting for the specific application you want to use Websockets in and create a new Websocket connection. You can use the following code snippet to connect to a Websocket server:

const websocket = new ReconnectingWebSocket("http://localhost:5000/barcode");

window.websocket = websocket;

We attach the websocket to the window object to make it accessible from the Retool context. It would be possible to establish multiple websocket connections and manage them from the Retool context.

Step 3 - Registering a Listener

To listen for messages from the Websocket server, you need to register a listener inside the retool context. To do this we create new a state variable and a query. The state acts a simple boolean guard to prevent multiple listeners from being registered. The query is used to then register the listeners.

Now we create a query that is responsible for registering the listener. The query is a simple JavaScript query that checks if the listener is already registered. If it is not registered, it registers the listener. Using the advanced settings for the query we can set the query to run on page load.

if (!wsListenerRegisterGuard.value) {
  wsListenerRegisterGuard.setValue(true);
  window.websocket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    // handle the event, e.g., update state variables or trigger other actions
    // eg - realtimeMsg.setValue(data.msg);
  };
  console.log("ws listener registered");
  return true;
}
console.log("ws listener already registered");
return true;

A simple example would consist of parsing the incoming message and updating a state variable.

Conclusion

Using Websockets in Retool is possible, but it requires a bit of work. By importing a Websockets library, connecting to a Websocket server, and registering a listener, you can build real-time features in Retool. Using a Websockets library like reconnecting-websocket makes it easier to handle reconnections and other edge cases. With Websockets, you can build real-time features like live chat, notifications, and real-time data visualization in Retool.

Good luck building real-time features in Retool!