tRPC End-to-End Type Safe APIs · Leçon

Gestion de la reconnexion et nettoyage des abonnements

Rendez les abonnements tRPC prêts pour la production en gérant les connexions interrompues, la reconnexion automatique et le nettoyage approprié.

Gestion de la reconnexion et nettoyage des abonnements est une leçon tRPC End-to-End Type Safe APIs gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage tRPC End-to-End Type Safe APIs, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Gestion de la reconnexion et nettoyage des abonnements » est-elle gratuite ?

Oui — le texte complet de « Gestion de la reconnexion et nettoyage des abonnements » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours tRPC End-to-End Type Safe APIs, passe à CoddyKit PRO. Le cours tRPC End-to-End Type Safe APIs comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Gestion de la reconnexion et nettoyage des abonnements » ?

Rendez les abonnements tRPC prêts pour la production en gérant les connexions interrompues, la reconnexion automatique et le nettoyage approprié. Tu pratiques tRPC End-to-End Type Safe APIs avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer tRPC End-to-End Type Safe APIs ?

Aucune expérience préalable n'est requise. tRPC End-to-End Type Safe APIs sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Gestion de la reconnexion et nettoyage des abonnements » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon tRPC End-to-End Type Safe APIs ?

Oui. Chaque leçon tRPC End-to-End Type Safe APIs inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Introduction au temps réel avec tRPC
Configurer WebSockets pour les abonnements
Implémentation d’abonnements aux données en direct
Gestion de la reconnexion et nettoyage des abonnements

← Retour à tRPC End-to-End Type Safe APIs