Realtime & WebSocket 2. Mai 2026 11 min Lesezeit

Claude Code WebSocket & Realtime Apps: Socket.io und SSE 2026

Realtime-Funktionalität ist eines der schwierigsten Themen in der Web-Entwicklung: Verbindungsmanagement, Reconnection-Logic, State-Synchronisation, Skalierung auf mehrere Server. Claude Code kennt die bewährten Patterns und generiert produktionsreifen Code.

WebSocket vs. Server-Sent Events vs. Long Polling

Technologie	Richtung	Use Case	Wann nutzen
WebSocket	Bidirektional	Chat, Spiele, Kollaboration	Client sendet UND empfängt
Server-Sent Events	Server → Client	Live-Feeds, Notifications, Dashboards	Nur Server sendet Updates
Long Polling	Client fragt	Legacy-Systeme	Nur wenn WebSocket/SSE nicht geht

Faustregel: Chat, Multiplayer, Collaborative Editing → WebSocket. Notifications, Live-Daten, KI-Streaming → Server-Sent Events. SSE ist einfacher, braucht keinen Upgrade-Handshake und funktioniert durch alle HTTP/2-Proxies.

WebSocket-Server mit Socket.io

WebSocketChat-App Basis

# Claude Code Prompt:
# "Erstelle einen Socket.io Chat-Server mit:
# - Rooms (Kanäle), User-Presence (online/offline)
# - Typing-Indicators, Read-Receipts
# - Message-Persistierung in Redis (letzte 100 Messages pro Room)
# - Auth via JWT beim Connect"

const { Server } = require('socket.io');
const jwt = require('jsonwebtoken');
const redis = require('ioredis');

const io = new Server(httpServer, {
  cors: { origin: process.env.FRONTEND_URL, credentials: true }
});

// Auth Middleware
io.use(async (socket, next) => {
  try {
    const token = socket.handshake.auth.token;
    socket.user = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    next(new Error('Unauthorized'));
  }
});

io.on('connection', (socket) => {
  const { userId, name } = socket.user;
  console.log(`${name} connected`);

  // User Presence
  await redis.sadd('online_users', userId);
  socket.broadcast.emit('user:online', { userId, name });

  socket.on('room:join', async (roomId) => {
    socket.join(roomId);
    // Letzte 100 Messages aus Redis laden
    const history = await redis.lrange(`room:${roomId}:messages`, -100, -1);
    socket.emit('room:history', history.map(JSON.parse));
  });

  socket.on('message:send', async ({ roomId, content }) => {
    const message = {
      id: crypto.randomUUID(),
      userId, name, content,
      timestamp: Date.now()
    };
    // In Redis persistieren + an Room broadcasten
    await redis.rpush(`room:${roomId}:messages`, JSON.stringify(message));
    await redis.ltrim(`room:${roomId}:messages`, -100, -1);
    io.to(roomId).emit('message:new', message);
  });

  socket.on('typing:start', ({ roomId }) => {
    socket.to(roomId).emit('typing:start', { userId, name });
  });

  socket.on('disconnect', async () => {
    await redis.srem('online_users', userId);
    socket.broadcast.emit('user:offline', { userId });
  });
});

Server-Sent Events für KI-Streaming

SSEClaude API Streaming-Antworten

SSE ist perfekt für KI-Streaming: der Server sendet Token für Token, der Client zeigt sie live an.

# Server-Side (Express)
app.get('/api/ai/stream', async (req, res) => {
  const { prompt } = req.query;

  // SSE Headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const stream = claude.messages.stream({
    model: 'claude-haiku-4-5',
    max_tokens: 1024,
    messages: [{ role: 'user', content: prompt }]
  });

  for await (const event of stream) {
    if (event.type === 'content_block_delta') {
      res.write(`data: ${JSON.stringify({ text: event.delta.text })}\n\n`);
    }
  }

  res.write('data: [DONE]\n\n');
  res.end();
});

# Client-Side (Browser)
const eventSource = new EventSource(`/api/ai/stream?prompt=${encodeURIComponent(prompt)}`);
let fullText = '';

eventSource.onmessage = (e) => {
  if (e.data === '[DONE]') { eventSource.close(); return; }
  fullText += JSON.parse(e.data).text;
  document.getElementById('output').textContent = fullText;
};

Reconnection Logic

# Robuste Reconnection-Logic (Socket.io Client)
const socket = io('https://api.example.com', {
  auth: { token: localStorage.getItem('jwt') },
  reconnection: true,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,  // Max 30s zwischen Versuchen
  reconnectionAttempts: 10
});

socket.on('connect', () => {
  console.log('Connected');
  // Verpasste Events seit Reconnect nachladen
  if (lastEventId) {
    socket.emit('sync:missed', { since: lastEventId });
  }
});

socket.on('reconnect_attempt', (attempt) => {
  // Token erneuern falls abgelaufen
  socket.auth.token = localStorage.getItem('jwt');
  console.log(`Reconnect attempt ${attempt}`);
});

socket.on('connect_error', (error) => {
  if (error.message === 'Unauthorized') {
    // Token ungültig → User ausloggen
    handleLogout();
  }
});

Skalierung: Socket.io mit Redis Adapter

# Mehrere Server: Redis Adapter synchronisiert Rooms
const { createAdapter } = require('@socket.io/redis-adapter');

const pubClient = new Redis(process.env.REDIS_URL);
const subClient = pubClient.duplicate();

io.adapter(createAdapter(pubClient, subClient));

# Jetzt können 3 App-Server denselben Room bedienen
# io.to('room-123').emit() geht automatisch an alle Server

Realtime-Modul im Kurs

Im Claude Code Mastery Kurs gibt es ein Realtime-Modul: vollständige Chat-App mit Socket.io, KI-Streaming mit SSE, Presence-System und horizontale Skalierung mit Redis Adapter — komplett mit Code.

14 Tage kostenlos testen →