Add Chat to Your App in 5 Minutes

Last updated 2026-07-12

The fastest way to add real-time chat to any application. Ten lines of JavaScript, no framework required. Works in React, Vue, vanilla JS, or any app that can open a WebSocket.

Prerequisites

• An app where you can run JavaScript (React, Vue, vanilla, anything)
• 5 minutes

Step 1: Connect (3 lines)

Open a WebSocket to the openbnet chat endpoint. The URL contains your chatroom ID, user ID, and username.

const ws = new WebSocket(
  'wss://openbnet.cloud/sv/ws/chat/my-room/user1/Alice'
);

Step 2: Receive messages (4 lines)

Handle incoming messages. The server sends the last 50 messages on connect (type: "history"), then each new message as it arrives.

ws.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.type === 'history') data.messages.forEach(render);
  else render(data);
};

Step 3: Send a message (3 lines)

Send a message by writing JSON to the WebSocket. The server fans it out to everyone in the room.

ws.send(JSON.stringify({
  message: "Hello, world!",
  datatype: "text"
}));

That is it

You now have real-time chat in your app. The same pattern works in React (useEffect + useRef), Vue (mounted hook), or any framework. For production, add reconnection logic and a UI framework. openbnet Chat handles the WebSocket server, message persistence, cross-server sync, and scaling — you just send and receive JSON.

From here, explore the full Chat API: file uploads, typing indicators, AI moderation, and SDKs for Flutter and React Native. The Free tier (1,000 MAU, no credit card) is enough to build and ship.

Related

• <a href="https://openbnet.com/products/chat">Chat Messaging product</a>
• <a href="https://openbnet.com/tutorials/build-a-chat-app">Full chat app tutorial</a>
• <a href="https://openbnet.com/developers">Developer hub</a>
• <a href="https://openbnet.com/pricing">Pricing</a>

openbnet developer hub → · Pricing →