HTTP Long-Polling vs SSE vs WebSocket: Bài toán Real-time nên chọn gì? | Shanverse

HTTP Long-Polling vs SSE vs WebSocket: Bài toán Real-time nên chọn gì? | Shanverse

Codeplain text

1Long-Polling → tương thích cao, event thưa, fallback2SSE          → server → client, text stream, reconnect đơn giản3WebSocket    → full-duplex, binary, tương tác tần suất cao

Codejavascript

1let cursor = null;2let stopped = false;34async function poll() {5  while (!stopped) {6    try {7      const url = new URL('/api/events', location.origin);8      if (cursor) url.searchParams.set('cursor', cursor);910      const response = await fetch(url, {11        credentials: 'include',12        signal: AbortSignal.timeout(30_000),13      });1415      if (!response.ok) throw new Error(`HTTP ${response.status}`);1617      const payload = await response.json();18      cursor = payload.nextCursor;19      renderEvents(payload.events);20    } catch (error) {21      await new Promise(resolve => setTimeout(resolve, 1_000));22    }23  }24}2526poll();

Codejavascript

1app.get('/events', authenticate, async (req, res) => {2  res.status(200);3  res.set({4    'Content-Type': 'text/event-stream',5    'Cache-Control': 'no-cache, no-transform',6    Connection: 'keep-alive',7    'X-Accel-Buffering': 'no',8  });9  res.flushHeaders();1011  const lastEventId = req.get('Last-Event-ID');12  const unsubscribe = await eventBus.subscribe(req.user.id, event => {13    res.write(`id: ${event.id}\n`);14    res.write(`event: ${event.type}\n`);15    res.write(`data: ${JSON.stringify(event.data)}\n\n`);16  }, { after: lastEventId });1718  const heartbeat = setInterval(() => {19    res.write(': heartbeat\n\n');20  }, 15_000);2122  req.on('close', () => {23    clearInterval(heartbeat);24    unsubscribe();25  });26});

Codejavascript

1const source = new EventSource('/events', { withCredentials: true });23source.addEventListener('order.updated', event => {4  const payload = JSON.parse(event.data);5  updateOrder(payload);6});78source.onerror = () => {9  // EventSource tự reconnect trừ khi client gọi source.close().10};

Codejavascript

1location /events {2    proxy_pass http://api;3    proxy_http_version 1.1;4    proxy_set_header Host $host;5    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;6    proxy_buffering off;7    proxy_cache off;8    proxy_read_timeout 1h;9}

Codejavascript

1import { WebSocketServer } from 'ws';23const wss = new WebSocketServer({ noServer: true });45server.on('upgrade', async (request, socket, head) => {6  try {7    const user = await authenticateUpgrade(request);8    validateOrigin(request.headers.origin);910    wss.handleUpgrade(request, socket, head, ws => {11      ws.user = user;12      wss.emit('connection', ws, request);13    });14  } catch {15    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');16    socket.destroy();17  }18});1920wss.on('connection', ws => {21  ws.isAlive = true;22  ws.on('pong', () => { ws.isAlive = true; });2324  ws.on('message', raw => {25    if (raw.length > 64 * 1024) return ws.close(1009, 'Message too large');2627    const message = JSON.parse(raw.toString());28    authorizeMessage(ws.user, message);29    routeMessage(ws, message);30  });31});3233setInterval(() => {34  for (const ws of wss.clients) {35    if (!ws.isAlive) {36      ws.terminate();37      continue;38    }39    ws.isAlive = false;40    ws.ping();41  }42}, 30_000);

Codejavascript

1const socket = new WebSocket('wss://api.example.com/realtime');23socket.addEventListener('open', () => {4  socket.send(JSON.stringify({ type: 'room.join', roomId: 'room-1' }));5});67socket.addEventListener('message', event => {8  const message = JSON.parse(event.data);9  handleMessage(message);10});