What Are WebSockets and How Do Real-Time Apps Work?

The Phone Call vs. the Walkie-Talkie

Every time you load a normal webpage, your browser sends a message to a server asking for information. The server responds, and that's it — the conversation is over. If you want new information, your browser has to ask again. This is like sending a letter, waiting for a reply, then sending another letter.

WebSockets work differently. They open one connection and keep it open. Think of it like a phone call: once you dial and the other person picks up, you can talk back and forth as long as you want, without hanging up and redialing each time.

With a WebSocket connection, your browser and the server stay connected. Either side can send a message at any time. When something changes on the server — like a new chat message arriving — it can push that message to your browser immediately, without you having to ask for it.

The Apps You Use Every Day Depend on This

Real-time apps feel completely different from regular websites. When you use Google Docs and someone else's cursor appears on the same page, that's a WebSocket at work. When your stock trading app updates prices every second without you refreshing, that's a WebSocket too. Live sports scores, multiplayer games, video chat, notification alerts — all of these need data to travel fast, and WebSockets make that possible.

Before WebSockets, developers used tricks to fake real-time updates — constantly asking the server "any new news? any new news?" over and over. This was slow and wasteful. WebSockets gave developers a proper, fast way to send data both directions.

Opening the Door and Keeping It Open

Here's the step-by-step of how a WebSocket connection is made:

The whole thing starts with a regular HTTP request — your browser says "I'd like to switch to a WebSocket, please." The server agrees, and the connection transforms into a fast, persistent tunnel. From that point on, data flows both directions like a phone call.

When either side is done, they send a close message and the connection ends cleanly.

A Simple Chat Message

Here's what a WebSocket exchange looks like in code. This is a simple Node.js server and the browser client that connects to it.

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 3000 });

server.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log('Received:', message);
    // Send a reply back to the client
    ws.send('Got your message: ' + message);
  });

  ws.send('Welcome! You are connected.');
});

// Open a connection to the WebSocket server
const ws = new WebSocket('ws://localhost:3000');

ws.onopen = () => {
  // Send a message when connected
  ws.send('Hello server!');
};

ws.onmessage = (event) => {
  console.log('From server:', event.data);
};

That's the whole pattern: open a connection, send messages, receive replies. No reloading, no polling — just a live pipe between browser and server.

Knowledge Check

Test what you learned with this quick quiz.