⚡Echtzeit

WebSocket Echtzeit-Features

Bidirektionale Kommunikation in Echtzeit

Wenn SSE nicht reicht, brauchst du WebSockets. Chat-Apps, Multiplayer-Spiele, kollaboratives Editing, alles wo Client UND Server gleichzeitig senden muessen. Mit Socket.io oder Partykit ist das Setup in Minuten erledigt.

Pro-Tip — Der schnelle Weg
Next.js selbst unterstuetzt keine WebSockets im App Router. Nutze einen externen Service wie Partykit, Ably oder Pusher fuer Production. Fuer lokale Entwicklung funktioniert Socket.io mit einem Custom Server.
Seite 1
1

Partykit einrichten

Partykit ist der einfachste Weg fuer WebSockets mit Next.js. Ein Serveless WebSocket-Server der automatisch skaliert.

npm install partysocket
npx partykit init
2

Server-Logik definieren

Erstelle die Server-Datei die Verbindungen und Nachrichten verarbeitet. Jeder Room hat seinen eigenen Zustand.

// party/main.ts
import type { Party, Connection } from 'partykit/server';


export default class ChatRoom implements Party.Server {
 constructor(readonly room: Party.Room) {}


 onConnect(conn: Connection) {
 conn.send(JSON.stringify({ type: 'welcome', id: conn.id }));
 }


 onMessage(message: string, sender: Connection) {
 this.room.broadcast(message, [sender.id]);
 }
}
3

Client verbinden

Nutze partysocket im Client um dich mit dem WebSocket-Server zu verbinden. Es hat automatische Reconnection eingebaut.

'use client';
import PartySocket from 'partysocket';
import { useEffect, useState } from 'react';


export function Chat({ room }: { room: string }) {
 const [messages, setMessages] = useState<string[]>([]);


 useEffect(() => {
 const ws = new PartySocket({ host: 'localhost:1999', room });
 ws.onmessage = (e) => {
 const data = JSON.parse(e.data);
 setMessages(prev => [...prev, data]);
 };
 return () => ws.close();
 }, [room]);
}
4

Nachrichten senden

Der Client kann jederzeit Nachrichten an den Server schicken. Der Server broadcastet sie an alle anderen Verbindungen im Room.

function sendMessage(ws: PartySocket, text: string) {
 ws.send(JSON.stringify({
 type: 'message',
 text,
 timestamp: Date.now(),
 }));
}
Seite 2
Warum das funktioniert
  • Bidirektional bedeutet Client und Server koennen jederzeit senden
  • Echtzeit-Latenz unter 50ms fuer responsive User Experiences
  • Rooms isolieren Traffic und machen Skalierung einfach
  • Partykit abstrahiert die komplexe WebSocket-Infrastruktur weg
Tipps
  • Partykit ist kostenlos fuer Hobby-Projekte mit bis zu 20 gleichzeitigen Verbindungen
  • Nutze Rooms um Nachrichten zu isolieren, zum Beispiel ein Room pro Chat-Kanal
  • Sende nur minimale Daten ueber WebSockets, grosse Payloads gehoeren in die REST API
  • Implementiere Heartbeats damit du tote Verbindungen erkennst und aufraeumst
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen