Menangani Penyambungan Kembali dan Pembersihan Subscription
Jadikan subscription tRPC siap untuk produksi dengan menangani koneksi yang terputus, penyambungan kembali otomatis, dan pembersihan yang tepat.
Menangani Penyambungan Kembali dan Pembersihan Subscription adalah pelajaran tRPC End-to-End Type Safe APIs gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar tRPC End-to-End Type Safe APIs, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus tRPC End-to-End Type Safe APIs mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menangani Penyambungan Kembali dan Pembersihan Subscription” gratis?
Ya — teks lengkap “Menangani Penyambungan Kembali dan Pembersihan Subscription” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus tRPC End-to-End Type Safe APIs, upgrade ke CoddyKit PRO. Kursus tRPC End-to-End Type Safe APIs mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menangani Penyambungan Kembali dan Pembersihan Subscription”?
Jadikan subscription tRPC siap untuk produksi dengan menangani koneksi yang terputus, penyambungan kembali otomatis, dan pembersihan yang tepat. Kamu berlatih tRPC End-to-End Type Safe APIs dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai tRPC End-to-End Type Safe APIs?
Tidak diperlukan pengalaman sebelumnya. tRPC End-to-End Type Safe APIs di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menangani Penyambungan Kembali dan Pembersihan Subscription” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran tRPC End-to-End Type Safe APIs ini?
Ya. Setiap pelajaran tRPC End-to-End Type Safe APIs menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pengantar Waktu Nyata dengan tRPC
- Menyiapkan WebSockets untuk Langganan
- Mengimplementasikan Langganan Data Langsung
- Menangani Penyambungan Kembali dan Pembersihan Subscription