WebSocket Fundamentals

HTTP (request-response):
  Client ──▶ Server  "GET /messages"
  Client ◀── Server  "here are messages"
  (connection closed)
  Client ──▶ Server  "any new messages?"   ← polling, wasteful
  Client ◀── Server  "nope"

WebSocket (persistent, bidirectional):
  Client ──▶ Server  "HTTP Upgrade to WebSocket"
  Client ◀── Server  "101 Switching Protocols"
  (connection stays open)
  Client ──▶ Server  "hello"          ← either side can send
  Client ◀── Server  "new message!"   ← at any time
  Client ◀── Server  "user joined"
  Client ──▶ Server  "goodbye"
  (connection closed when either side wants)

Client request:
  GET / HTTP/1.1
  Host: localhost:8080
  Upgrade: websocket
  Connection: Upgrade
  Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
  Sec-WebSocket-Version: 13

Server response:
  HTTP/1.1 101 Switching Protocols
  Upgrade: websocket
  Connection: Upgrade
  Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

npm install ws
npm install --save-dev @types/ws

import { WebSocketServer, WebSocket } from "ws";

const wss = new WebSocketServer({ port: 8080 });

wss.on("connection", (ws: WebSocket) => {
  console.log("Client connected");

  ws.send("Welcome to the chat!");

  ws.on("message", (data: Buffer) => {
    const message = data.toString();
    console.log(`Received: ${message}`);
    ws.send(`Echo: ${message}`);
  });

  ws.on("close", () => {
    console.log("Client disconnected");
  });
});

console.log("WebSocket server on ws://127.0.0.1:8080");

// Broadcast a message to every connected client
function broadcast(wss: WebSocketServer, message: string, exclude?: WebSocket): void {
  for (const client of wss.clients) {
    if (client !== exclude && client.readyState === WebSocket.OPEN) {
      client.send(message);
    }
  }
}

wss.on("connection", (ws) => {
  broadcast(wss, "A new user joined!", ws);

  ws.on("message", (data) => {
    const text = data.toString();
    broadcast(wss, text);  // send to everyone including sender
  });
});

# Install wscat - a CLI WebSocket client
npm install -g wscat

# Connect to your server
wscat -c ws://127.0.0.1:8080

# Type messages and press Enter
# Open multiple terminals with wscat to test broadcasting

// Or from a browser console:
const ws = new WebSocket("ws://127.0.0.1:8080");
ws.onmessage = (event) => console.log("Server:", event.data);
ws.onopen = () => ws.send("Hello from browser!");

// noServer: ws opens no port and listens for nothing. It only ever receives
// sockets we have already accepted, parsed, and decided to upgrade.
const wss = new WebSocketServer({ noServer: true });

// ...once our own parser has seen `Upgrade: websocket` on a request:
wss.handleUpgrade(request, socket, head, (ws) => {
  wss.emit("connection", ws, request);
});

// noServer: `ws` opens no port and does no listening. It only ever receives
// sockets we have already accepted, parsed, and decided to upgrade.
const wss = new WebSocketServer({ noServer: true });

wss.on("connection", (ws: WebSocket, request: IncomingMessage) => {
  const client = new WsClient(ws, ++sequence, request.socket.remoteAddress ?? "unknown");
  welcome(client);

        case "upgrade": {
          // The socket stops being ours. Detach every listener before handing
          // it over, or we would keep trying to read WebSocket frames as text.
          socket.off("data", onData);
          socket.off("close", onClose);
          socket.off("error", onError);
          clearTimeout(greeting);

          // A genuine IncomingMessage, built from the request we parsed by
          // hand in Chapter 6. No cast, no lie: `ws` gets what it expects.
          const request = new IncomingMessage(socket);
          request.method = outcome.request.method;
          request.url = outcome.request.path;
          request.httpVersion = "1.1";
          request.headers = Object.fromEntries(outcome.request.headers);

          emit({
            type: "system",
            text: `${conn.id} upgrading to WebSocket → 101 ${statusLine(101)}`,
            at: Date.now(),
          });

          // ws computes Sec-WebSocket-Accept, writes the 101, and owns the
          // socket from here on.
          wss.handleUpgrade(request, socket, outcome.head, (ws) => {
            wss.emit("connection", ws, request);
          });
          return;
        }