tRPC End-to-End Type Safe APIs · Урок

Обработка повторных подключений и очистка подписок

Сделайте подписки tRPC готовыми к работе в production: обрабатывайте разорванные подключения, автоматическое переподключение и корректную очистку ресурсов.

«Обработка повторных подключений и очистка подписок» — бесплатный урок tRPC End-to-End Type Safe APIs на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения tRPC End-to-End Type Safe APIs, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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.

Часто задаваемые вопросы

Урок «Обработка повторных подключений и очистка подписок» бесплатный?

Да — полный текст урока «Обработка повторных подключений и очистка подписок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс tRPC End-to-End Type Safe APIs, подпишись на CoddyKit PRO. Курс tRPC End-to-End Type Safe APIs содержит 4 уроков всего.

Чему я научусь в уроке «Обработка повторных подключений и очистка подписок»?

Сделайте подписки tRPC готовыми к работе в production: обрабатывайте разорванные подключения, автоматическое переподключение и корректную очистку ресурсов. Ты практикуешь tRPC End-to-End Type Safe APIs с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать tRPC End-to-End Type Safe APIs?

Предыдущий опыт не требуется. tRPC End-to-End Type Safe APIs на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Обработка повторных подключений и очистка подписок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке tRPC End-to-End Type Safe APIs?

Да. Каждый урок tRPC End-to-End Type Safe APIs включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Введение в работу в реальном времени с tRPC
Настройка WebSockets для подписок
Реализация подписок на оперативные данные
Обработка повторных подключений и очистка подписок

← Назад к tRPC End-to-End Type Safe APIs