Gestión de reconexiones y limpieza de suscripciones
Prepare las suscripciones de tRPC para producción gestionando las conexiones interrumpidas, la reconexión automática y la limpieza adecuada.
Gestión de reconexiones y limpieza de suscripciones es una lección gratuita de tRPC End-to-End Type Safe APIs en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de tRPC End-to-End Type Safe APIs, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de tRPC End-to-End Type Safe APIs incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Preguntas frecuentes
¿La lección «Gestión de reconexiones y limpieza de suscripciones» es gratis?
Sí — el texto completo de «Gestión de reconexiones y limpieza de suscripciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de tRPC End-to-End Type Safe APIs, actualiza a CoddyKit PRO. El curso de tRPC End-to-End Type Safe APIs incluye 4 lecciones en total.
¿Qué aprenderé en «Gestión de reconexiones y limpieza de suscripciones»?
Prepare las suscripciones de tRPC para producción gestionando las conexiones interrumpidas, la reconexión automática y la limpieza adecuada. Practicas tRPC End-to-End Type Safe APIs con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar tRPC End-to-End Type Safe APIs?
No se requiere experiencia previa. tRPC End-to-End Type Safe APIs en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Gestión de reconexiones y limpieza de suscripciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de tRPC End-to-End Type Safe APIs?
Sí. Cada lección de tRPC End-to-End Type Safe APIs incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción al tiempo real con tRPC
- Configuración de WebSockets para suscripciones
- Implementación de suscripciones de datos en directo
- Gestión de reconexiones y limpieza de suscripciones