Skip to main content

Websockets for real-time updates

WebSocket is a communication protocol that provides full-duplex communication channels over a single, long-lived connection.

This page shows you how to set up Websockets in Appsmith, enabling you to leverage real-time communication capabilities. Additionally, an example to display live locations on a Map widget through WebSocket communication.

Display live location on the Map widget
Display live location on the Map widget


A Websocket endpoint - It can be any endpoint, whether public or your own.


To configure and set up WebSocket connections, follow the steps:

  1. Create a new JSObject and add your Websocket URL. Define socket for the WebSocket instance, and markersData to store received data. Like:
export default {
// WebSocket URL
socketURL: 'wss://',

// WebSocket instance
socket: null,

//To store received data
markersData: [],
  1. Create a function to establish a Websocket connection.
// Function to initialize the WebSocket connection
initWebSocket() {
// Create a new WebSocket instance
this.socket = new WebSocket(this.socketURL);

// Event handler for successful connection
this.socket.onopen = () => {
console.log('WebSocket connection established successfully');


This function creates a new WebSocket connection using the specified URL.

  1. Implement code within the same function to send a message to the server based on your endpoint requirements.
// Send a message to the API when successfully connected
const message = JSON.stringify({ action: 'onmessage' });
// Customize the message payload based on your endpoint requirements


The above code sends a JSON-formatted message, allowing you to customize the payload based on your specific endpoint requirements.

  1. Implement a message handler for incoming Websocket data.

Example: If you want to implement live order tracking based on real-time location information, add the following code to handle the incoming data.

// Event handler for incoming messages
this.socket.onmessage = (event) => {
// Parse the incoming data
const responseData = JSON.parse(;

// Log the raw data for reference
console.log('Received data:',;

// Extract and convert relevant data
var originalData =;
var dataObject = JSON.parse(originalData);
var lat = parseFloat(;
var long = parseFloat(dataObject.long);

// Format the data into a new array
var newFormatData = [{ "lat": lat, "long": long }];

// Log the formatted result
console.log('Formatted data:', newFormatData);

// Update markersData array
this.markersData = newFormatData;

This code captures latitude and longitude data from Websocket endpoints. It then transforms this data into a format compatible with the Map widget.

  1. Implement error handling and connection closure events.
// Event handler for WebSocket errors
this.socket.onerror = (error) => {
console.error('WebSocket error:', error);

// Event handler for closing the WebSocket connection
this.socket.onclose = () => {
console.log('WebSocket connection closed');

This code sets up event handlers to log WebSocket errors and report the closure of the WebSocket connection.

  1. Bind response data with widgets as needed.

Example: To display live location, drop a Map widget and add the following code into the Default markers property:

  1. Drop a Button widget and set its onClick event to initiate the WebSocket function, like: