Realtime UI Example

Written by Backbone Tutorials Team

Last updated: June 2026 · 9 min read

A realtime interface updates the moment the server has new data, without the browser repeatedly asking. This example builds a small live feed using a WebSocket: it connects, renders each incoming message as it arrives, sends a message back, and handles reconnection. The framing here is pure engineering, a live activity feed or dashboard, the same protocol that powers collaborative tools.

For the protocol details, see WebSocket fundamentals and realtime data synchronization.

What this example builds

The example connects to a WebSocket server, appends each message it receives to a live feed, and sends a message when the user submits one.

The behaviour you will see

Once connected, new messages from the server appear in the feed instantly, pushed rather than polled. Submitting the form sends data back over the same open connection. If the connection drops, the example attempts to reconnect, so the feed recovers on its own. This is the core loop of every realtime feature.

Opening the connection

A WebSocket is opened with a single constructor call to a ws or wss URL.

Connecting and confirming

var socket = new WebSocket("wss://example.com/feed");

socket.addEventListener("open", function () {
  console.log("connected");
});

Receiving live messages

The message event fires every time the server sends data, and the handler updates the interface.

Rendering each message

socket.addEventListener("message", function (event) {
  var data = JSON.parse(event.data);
  var li = document.createElement("li");
  li.textContent = data.text;
  document.getElementById("feed").appendChild(li);
});

No timer and no repeated requests are involved, which is what separates a push model from polling, as discussed in server-sent events.

Sending messages

The same open connection carries data in both directions.

Sending from the client

function sendMessage(text) {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ text: text }));
  }
}

Handling disconnects

Real networks drop connections, so a realtime client must expect it and recover.

Reconnecting on close

socket.addEventListener("close", function () {
  console.log("disconnected, retrying");
  setTimeout(connect, 1000); // call the connect function again
});

Retrying after a short delay, ideally increasing the delay on repeated failures, lets the interface survive a flaky network without the user reloading. Reconnection and ordering are part of latency and reconciliation.

Common pitfalls

Realtime clients fail in recognisable ways.

What usually goes wrong

The most common is calling send before the socket is open, which throws; check readyState first. The second is never handling close, so a dropped connection silently stops all updates. The third is trusting message order and delivery on a bad network, when realtime systems need reconnection and reconciliation to stay correct. The engineering behind this is in WebSocket fundamentals.

Read next: back to the Examples hub, or explore the Interactive Web cluster.