Category: JS Objects
Updated

This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

How to create an Appsmith App which integrates with Websockets

Issue

I want to integrate websockets with my Appsmith app, but Appsmith doesn't support native integration. An alternative is to use the setInterval function to do polling of the API/Query I want to refresh. However, I want to use websockets and can do so by taking advantage of the IFrame widget provided. I can write HTML/JS code within the widget to create and handle the websocket connection. I can communicate between the Appsmith app and Iframe connected to websockets by posting messages between them. I can host the page elsewhere if needed and verify the websocket connection in the network tab. I found an example Cryptocurrency app integrating websockets on Appsmith's app link.

Resolution

Appsmith does not natively integrate with websockets, so an alternative option is to use polling with the setInterval function. However, websockets can be integrated using the IFrame widget provided by Appsmith. Within the widget, HTML/JS code can be written to create and handle the websocket connection using the new WebSocket() function and configuring websocket events.

To communicate between the Appsmith App and the IFrame connected to websockets, the IFrame can postMessage responses to the Appsmith parent and access data using Iframe1.message. Additionally, the IFrame can listen for messages from the Appsmith App and perform different functionalities based on the message or data received. The successful connection can be verified in the WS section of the network tab.

An example Cryptocurrency App integrating websockets using the IFrame widget can be found at https://app.appsmith.com/app/websocket-poc-with-crypto/websocket-with-iframe-63da1136b8b46679d1911d98.