WebSockets — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— WebSockets
📋Connection
⚙️Subscribe
🔄Publish
✅Disconnect
🎯 Next: Test →
Step 1 / 4
Speed
Connection
WebSocketServer upgrades HTTP connections to persistent WS💡 Analogy
Like a phone call vs text messages — once connected, both sides can talk freely without redialing.
connection fires when a client connects. wss.clients.size shows active connections. WebSockets maintain a persistent bidirectional connection over a single TCP connection.
Console Output
> Client connected. Total: 1
> ws.readyState: OPEN
> Protocol: ws://localhost:3001
●ws-server.ts
ConnectionL13–16
1import { WebSocketServer, WebSocket } from 'ws';
2import { createServer } from 'http';
3 
4const http = createServer();
5const wss = new WebSocketServer({ server: http });
6 
7// Typed message protocol
8type ClientMessage =
9  | { type: 'subscribe'; channel: string }
10  | { type: 'publish'; channel: string; data: unknown }
11  | { type: 'ping' };
12 
13// Track connected clients and their subscriptions
14const channels = new Map<string, Set<WebSocket>>();
15 
16wss.on('connection', (ws) => {
17  console.log('Client connected. Total:', wss.clients.size);
18 
19  ws.on('message', (raw) => {
20    const msg: ClientMessage = JSON.parse(raw.toString());
21 
22    if (msg.type === 'subscribe') {
23      if (!channels.has(msg.channel)) channels.set(msg.channel, new Set());
24      channels.get(msg.channel)!.add(ws);
25      ws.send(JSON.stringify({ type: 'subscribed', channel: msg.channel }));
26    }
27 
28    if (msg.type === 'publish') {
29      const subs = channels.get(msg.channel);
30      subs?.forEach(client => {
31        if (client.readyState === WebSocket.OPEN) {
32          client.send(JSON.stringify({ type: 'message', channel: msg.channel, data: msg.data }));
33        }
34      });
35    }
36 
37    if (msg.type === 'ping') ws.send(JSON.stringify({ type: 'pong' }));
38  });
39 
40  ws.on('close', () => {
41    channels.forEach(subs => subs.delete(ws)); // cleanup
42  });
43});
44 
45http.listen(3001);
45 lines
Timeline — 4 Steps
Connection
WebSocketServer upgrades HTTP connections to persistent WS💡 Analogy
Like a phone call vs text messages — once connected, both sides can talk freely without redialing.
connection fires when a client connects. wss.clients.size shows active connections. WebSockets maintain a persistent bidirectional connection over a single TCP connection.
Console Output
> Client connected. Total: 1
> ws.readyState: OPEN
> Protocol: ws://localhost:3001

Was this page helpful?

Discussion

WebSocketServer upgrades HTTP connections to persistent WS

💡 Analogy

Like a phone call vs text messages — once connected, both sides can talk freely without redialing.

connection fires when a client connects. wss.clients.size shows active connections. WebSockets maintain a persistent bidirectional connection over a single TCP connection.

Console Output

> Client connected. Total: 1
> ws.readyState: OPEN
> Protocol: ws://localhost:3001

WebSocketServer upgrades HTTP connections to persistent WS

💡 Analogy

Like a phone call vs text messages — once connected, both sides can talk freely without redialing.

connection fires when a client connects. wss.clients.size shows active connections. WebSockets maintain a persistent bidirectional connection over a single TCP connection.

Console Output

> Client connected. Total: 1
> ws.readyState: OPEN
> Protocol: ws://localhost:3001