Real-time JSON — WebSockets, SSE & Socket.IO

1const ws = new WebSocket('wss://api.example.com/ws');
2
3ws.addEventListener('open', () => {
4  console.log('Connected');
5  ws.send(JSON.stringify({
6    type: 'auth',
7    payload: { token: 'jwt_token_here' },
8    timestamp: new Date().toISOString(),
9  }));
10});
11
12ws.addEventListener('message', (event) => {
13  try {
14    const message = JSON.parse(event.data);
15
16    switch (message.type) {
17      case 'chat.message':
18        addMessage(message.payload);
19        break;
20      case 'user.typing':
21        showTypingIndicator(message.payload.userId);
22        break;
23      case 'error':
24        handleError(message.payload);
25        break;
26      default:
27        console.warn('Unknown message type:', message.type);
28    }
29  } catch {
30    console.error('Invalid JSON from server:', event.data);
31  }
32});
33
34ws.addEventListener('close', (event) => {
35  console.log(`Disconnected: ${event.code} ${event.reason}`);
36  scheduleReconnect();
37});

1import { WebSocketServer, WebSocket } from 'ws';
2
3const wss = new WebSocketServer({ port: 8080 });
4
5wss.on('connection', (ws) => {
6  ws.on('message', (raw) => {
7    let message;
8    try {
9      message = JSON.parse(raw.toString());
10    } catch {
11      ws.send(JSON.stringify({
12        type: 'error',
13        payload: { code: 'INVALID_JSON', message: 'Message must be valid JSON' },
14        timestamp: new Date().toISOString(),
15      }));
16      return;
17    }
18
19    if (message.type === 'chat.message') {
20      // Broadcast to all connected clients
21      const broadcast = JSON.stringify({
22        type: 'chat.message',
23        payload: message.payload,
24        id: crypto.randomUUID(),
25        timestamp: new Date().toISOString(),
26      });
27
28      wss.clients.forEach((client) => {
29        if (client.readyState === WebSocket.OPEN) {
30          client.send(broadcast);
31        }
32      });
33    }
34  });
35});

1import express from 'express';
2const app = express();
3
4app.get('/events', (req, res) => {
5  res.writeHead(200, {
6    'Content-Type': 'text/event-stream',
7    'Cache-Control': 'no-cache',
8    'Connection': 'keep-alive',
9  });
10
11  const sendEvent = (type: string, data: unknown) => {
12    const json = JSON.stringify({ type, payload: data, timestamp: new Date().toISOString() });
13    res.write(`event: ${type}\ndata: ${json}\n\n`);
14  };
15
16  // Send initial data
17  sendEvent('connected', { message: 'Stream started' });
18
19  // Send periodic updates
20  const interval = setInterval(() => {
21    sendEvent('stock.update', {
22      symbol: 'AAPL',
23      price: 150 + Math.random() * 10,
24      change: (Math.random() - 0.5) * 2,
25    });
26  }, 2000);
27
28  req.on('close', () => clearInterval(interval));
29});

1const source = new EventSource('/events');
2
3source.addEventListener('stock.update', (event) => {
4  const data = JSON.parse(event.data);
5  updateStockTicker(data.payload);
6});
7
8source.addEventListener('error', () => {
9  console.log('SSE connection lost — will auto-reconnect');
10});
11
12// To close manually
13// source.close();