How to Build a Real-Time Chat App

Last updated 2026-07-12

This guide walks through building a real-time chat application with WebSocket — the same protocol openbnet uses. You will connect to a chat room, send messages, receive messages in real time, and load message history. No frameworks required.

What you will build

A real-time chat room where multiple users can send and receive messages instantly. We use vanilla JavaScript and a WebSocket connection — the same foundation openbnet Chat is built on. By the end you will understand exactly how real-time chat works under the hood.

Prerequisites

• A browser with DevTools (Chrome, Firefox, Safari)
• Basic JavaScript knowledge (functions, events, DOM)
• 10 minutes

Step 1: Connect to the chat server

The WebSocket API is built into every modern browser. You create a WebSocket connection to the chat server endpoint. The openbnet chat endpoint takes the chatroom ID, user ID, and username as URL path segments.

const chatroom = "room-101";
const userId = "user-" + Math.random().toString(36).slice(2, 8);
const username = "Alice";

const ws = new WebSocket(
  `wss://openbnet.cloud/sv/ws/chat/${chatroom}/${userId}/${username}`
);

ws.onopen = () => console.log("Connected to chat room:", chatroom);
ws.onclose = () => console.log("Disconnected");

Step 2: Receive messages

When you connect, the server sends the last 50 messages as a history payload. After that, each new message arrives as a separate event. You handle both in the onmessage callback.

const messages = document.getElementById('messages');

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);

  if (data.type === 'history') {
    // Server sends last 50 messages on connect
    data.messages.forEach(renderMessage);
  } else {
    // New real-time message
    renderMessage(data);
  }
};

function renderMessage(msg) {
  const el = document.createElement('div');
  el.innerHTML = `<strong>${msg.username}:</strong> ${msg.message}`;
  messages.appendChild(el);
}

Step 3: Send messages

To send a message, serialize it as JSON and send it over the WebSocket. The server fans it out to every connected client in the same chatroom — including the sender.

const input = document.getElementById('input');
const form = document.getElementById('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text || ws.readyState !== WebSocket.OPEN) return;

  ws.send(JSON.stringify({
    message: text,
    datatype: "text"
  }));
  input.value = '';
});

Step 4: Send files and images

openbnet chat supports multi-datatype messages: text, image, video, audio, and document. To send a file, you upload it first, then send a message with the file URL and datatype set accordingly.

// After uploading a file and getting a URL
ws.send(JSON.stringify({
  message: fileUrl,
  datatype: "image"  // or "video", "audio", "document"
}));

Step 5: Handle reconnection

WebSocket connections drop — network blips, sleep/wake, server restarts. A production chat app should auto-reconnect with exponential backoff and rejoin the room. On reconnect, the server sends the last 50 messages again, so the user sees what they missed.

let retryDelay = 1000;

ws.onclose = () => {
  console.log(`Reconnecting in ${retryDelay}ms...`);
  setTimeout(connect, retryDelay);
  retryDelay = Math.min(retryDelay * 2, 30000); // cap at 30s
};

ws.onopen = () => {
  retryDelay = 1000; // reset on success
};

Next steps

You now have the core of a real-time chat app: connect, receive, send, files, reconnect. From here you can add typing indicators, read receipts, presence, reactions, and AI content moderation. openbnet Chat includes all of these — explore the product page and developer hub.

Related

• <a href="https://openbnet.com/products/chat">Chat Messaging product</a>
• <a href="https://openbnet.com/developers">Developer hub</a>
• <a href="https://openbnet.com/learn/what-is-chat-api">What is a Chat API</a>
• <a href="https://openbnet.com/learn/scaling-websocket-connections">Scaling WebSocket connections</a>

openbnet developer hub → · Pricing →