Wiederverbindung und Bereinigung von Subscriptions
Machen Sie tRPC-Subscriptions produktionsbereit, indem Sie abgebrochene Verbindungen, automatische Wiederverbindungen und eine ordnungsgemäße Bereinigung behandeln.
Wiederverbindung und Bereinigung von Subscriptions ist eine kostenlose tRPC End-to-End Type Safe APIs-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des tRPC End-to-End Type Safe APIs-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der tRPC End-to-End Type Safe APIs-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Real-time Is Unreliable
You can set up subscriptions, but networks drop, servers restart, and tabs sleep. Production real-time code must handle disconnects and cleanup gracefully.
The wsLink and Reconnection
tRPC clients use a WebSocket client that can automatically reconnect when a connection is lost.
import { createWSClient, wsLink } from "@trpc/client";
const wsClient = createWSClient({
url: "ws://localhost:3000",
retryDelayMs: (attempt) => Math.min(1000 * attempt, 5000),
});Backoff Strategy
Reconnect attempts should use exponential backoff so a downed server is not hammered by every client at once.
Subscription Lifecycle
A subscription exposes lifecycle callbacks: data, error, started, and stopped.
trpc.onMessage.subscribe(undefined, {
onData: (msg) => add(msg),
onError: (err) => console.error(err),
onStarted: () => console.log("live"),
});Cleaning Up on Unmount
Every subscription returns an unsubscribe handle. Call it when the component unmounts to free resources.
const sub = trpc.onMessage.subscribe(undefined, { onData });
// later
sub.unsubscribe();React Cleanup Pattern
In React, return the cleanup from useEffect so it runs on unmount.
useEffect(() => {
const sub = trpc.onMessage.subscribe(undefined, { onData });
return () => sub.unsubscribe();
}, []);Server-Side Cleanup
On the server, the subscription generator must release resources when the client disconnects.
onMessage: publicProcedure.subscription(async function* (opts) {
const queue = subscribe();
try {
for await (const msg of queue) yield msg;
} finally {
queue.close(); // cleanup on disconnect
}
})Detecting Missed Events
After a reconnect, the client may have missed events. Track a last-seen id and refetch the gap on reconnect.
onStarted: () => {
fetchMissedSince(lastSeenId);
}Heartbeats and Timeouts
Heartbeat pings detect a silently dead connection so the client can trigger a reconnect instead of waiting forever.
Avoiding Memory Leaks
Forgetting to unsubscribe leaks listeners and slowly degrades both client and server. Always pair every subscribe with an unsubscribe.
Showing Connection Status
Surface the connection state in the UI so users know when data is live versus reconnecting, improving trust in real-time views.
wsClient.connectionState; // "connecting" | "open" | "closed"Quick Check
Test your subscription reliability knowledge.
Recap
You made subscriptions production-ready:
- Use the WS client with exponential backoff reconnection
- Always unsubscribe on unmount to avoid leaks
- Clean up server-side generators and refetch missed events
Robust reconnection and cleanup keep real-time apps reliable in the real world.
Lerne tRPC End-to-End Type Safe APIs mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 10
- Lektionen
- 40
Häufig gestellte Fragen
Ist die Lektion „Wiederverbindung und Bereinigung von Subscriptions“ kostenlos?
Ja — der vollständige Text von „Wiederverbindung und Bereinigung von Subscriptions“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des tRPC End-to-End Type Safe APIs-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der tRPC End-to-End Type Safe APIs-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Wiederverbindung und Bereinigung von Subscriptions“?
Machen Sie tRPC-Subscriptions produktionsbereit, indem Sie abgebrochene Verbindungen, automatische Wiederverbindungen und eine ordnungsgemäße Bereinigung behandeln. Du übst tRPC End-to-End Type Safe APIs mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um tRPC End-to-End Type Safe APIs zu starten?
Keine Vorkenntnisse erforderlich. tRPC End-to-End Type Safe APIs auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Wiederverbindung und Bereinigung von Subscriptions“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser tRPC End-to-End Type Safe APIs-Lektion Code schreiben und ausführen?
Ja. Jede tRPC End-to-End Type Safe APIs-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in Echtzeitkommunikation mit tRPC
- WebSockets für Subscriptions einrichten
- Live-Daten-Subscriptions implementieren
- Wiederverbindung und Bereinigung von Subscriptions