Stop 22 · Build Portfolio ProjectsProjects · 7/15

Chat Application (WebSocket)

In short

Messages that appear the moment someone hits send feel like magic. This project shows you can handle real-time data, dropped connections and UI that updates without a refresh.

A real-time chat app using WebSockets — rooms/channels, typing indicators, and message history — a strong demonstration of real-time frontend skills.

The jaadu and a friend chat on their phones with empty speech bubbles between them.

Think of it like this

A phone call vs sending letters

Normal HTTP is like posting letters: you write, wait for a reply, write again. A WebSocket is a phone call: once connected, both sides can talk any time until someone hangs up.

Watch it happen

Two people, one open connection each

Riya

WS server

Aman

WebSocket open

1/6Riya's browser opens one connection to the server and keeps it open.

The big ideas

What you need to know

One open connection

A WebSocket stays open, so the server can push messages without the browser asking.

Rooms and history

Separate channels and older messages loaded from a database. Shows full-stack thinking.

Typing and online status

Small real-time events like 'Riya is typing...' prove you can design event types.

Reconnects on its own

Wi-Fi drops happen. Auto-reconnect with a growing delay shows production thinking.

How it works

Build plan

1
Tiny server
A Node server with the ws package or Socket.IO that echoes messages.
2
Chat UI
Message list, input and auto-scroll to the latest message.
3
Broadcast
Send each message to everyone in the same room.
4
Store history
Save messages in a database and load the last 50 on join.
5
Reconnect and status
Retry with backoff, show 'connecting...' in the UI.

See it in code

Walk through the code

1function connect(url, onMessage, attempt = 0) {2  const ws = new WebSocket(url);3 4  ws.onopen = () => { attempt = 0; };5  ws.onmessage = (e) => onMessage(JSON.parse(e.data));6  ws.onclose = () => {7    const delay = Math.min(1000 * 2 ** attempt, 30000);8    setTimeout(() => connect(url, onMessage, attempt + 1), delay);9  };10  return ws;11}12 13const ws = connect("wss://your-server.example/chat", addMessage);14ws.send(JSON.stringify({ type: "message", room: "general", text: "Hi!" }));