Long Polling vs WebSocket in TypeScript: Was für Echtzeitanwendungen wählen?

Wenn eine „lebendige“ Website lebendigen Code erfordert

Stellen Sie sich vor: Sie schreiben einen Messenger in TypeScript. Ein Benutzer sendet eine Nachricht – und der Gesprächspartner soll sie sofort sehen, ohne die Seite neu zu laden. Oder ein Börsen-Dashboard, bei dem sich der Aktienkurs jede Sekunde ändert. Oder einfach eine Benachrichtigungsleiste, die sich selbst aktualisiert. Wie setzt man das um? Zwei Hauptkandidaten sind Long Polling und WebSocket. Aber welchen wählen, um die Leistung nicht zu beeinträchtigen und die Benutzererfahrung nicht zu ruinieren?

In diesem Artikel analysieren wir anhand realer Beispiele in TypeScript, wie jede Technologie funktioniert, wo sie glänzt und wo sie versagt. Sie erhalten nicht nur Theorie, sondern auch fertige Code-Ausschnitte für Node.js und den Browser. Los geht's!

Was ist Long Polling in TypeScript und wie funktioniert es?

Long Polling ist eine Weiterentwicklung der normalen HTTP-Anfrage. Der Client sendet eine Anfrage an den Server, aber der Server antwortet nicht sofort, wenn keine Daten vorliegen. Er hält die Verbindung offen, bis ein neues Ereignis eintritt. Sobald die Daten bereit sind, sendet der Server die Antwort, der Client verarbeitet sie und erstellt sofort eine neue Anfrage. Der Zyklus wiederholt sich.

Klingt das nach einem Workaround? Teilweise ja. Aber es funktioniert sogar durch die strengsten Unternehmens-Proxys, die WebSocket blockieren.

Implementierung von Long Polling in TypeScript (Serverseite)

Wir schreiben einen einfachen Server mit Express in TypeScript. Er simuliert eine Nachrichtenwarteschlange.

import express, { Request, Response } from 'express';\nimport cors from 'cors';\n\nconst app = express();\napp.use(cors());\napp.use(express.json());\n\n// Nachrichtenspeicher (Simulation einer Warteschlange)\nconst messages: string[] = [];\n\n// Endpunkt für Long Polling\napp.get('/poll', (req: Request, res: Response) => {\n  // Warte bis zu 30 Sekunden auf eine neue Nachricht\n  const checkForMessage = () => {\n    if (messages.length > 0) {\n      // Sende die erste Nachricht und entferne sie aus der Warteschlange\n      const message = messages.shift();\n      res.json({ data: message, timestamp: Date.now() });\n    } else {\n      // Wenn keine Nachrichten vorhanden sind, warte weiter\n      setTimeout(checkForMessage, 1000); // Überprüfe jede Sekunde\n    }\n  };\n\n  // Timeout für den Fall, dass lange keine Nachrichten kommen\n  const timeout = setTimeout(() => {\n    res.json({ data: null, timeout: true });\n  }, 30000);\n\n  // Wenn der Client die Verbindung trennt, räume die Timer auf\n  req.on('close', () => {\n    clearTimeout(timeout);\n  });\n\n  checkForMessage();\n});\n\n// Endpunkt zum Senden einer Nachricht\napp.post('/send', (req: Request, res: Response) => {\n  const { message } = req.body;\n  if (message) {\n    messages.push(message);\n    res.status(200).json({ status: 'ok' });\n  } else {\n    res.status(400).json({ error: 'message is required' });\n  }\n});\n\napp.listen(3000, () => console.log('Long poll server on port 3000'));

Clientseite in TypeScript (Browser)

async function startLongPolling() {\n  try {\n    const response = await fetch('http://localhost:3000/poll');\n    const data = await response.json();\n\n    if (data.data) {\n      console.log('Neue Nachricht:', data.data);\n      // Aktualisiere die Benutzeroberfläche\n      updateUI(data.data);\n    }\n\n    // Starte sofort einen neuen Poll\n    startLongPolling();\n  } catch (error) {\n    console.error('Long Polling Fehler:', error);\n    // Warte 2 Sekunden und versuche es erneut\n    setTimeout(startLongPolling, 2000);\n  }\n}\n\nfunction updateUI(message: string) {\n  // Ihr Code zum Aktualisieren des DOM\n  const container = document.getElementById('messages');\n  if (container) {\n    const item = document.createElement('li');\n    item.textContent = message;\n    container.appendChild(item);\n  }\n}\n\n// Starte beim Laden der Seite\ndocument.addEventListener('DOMContentLoaded', startLongPolling);

Fazit: Long Polling ist einfach zu implementieren und erfordert keine speziellen Protokolle. Aber jede Anfrage bedeutet HTTP-Header, Cookies, Overhead. Bei 1000 gleichzeitigen Clients