WebSockets & Realtime Systems Programming · Pelajaran

Sinyal Detak dan Penjaga Koneksi

Pelajari cara menggunakan bingkai ping/pong dan sinyal detak tingkat aplikasi untuk mempertahankan keaktifan koneksi serta mendeteksi rekan yang tidak aktif.

Pelajaran 3 dari 411 langkah

Sinyal Detak dan Penjaga Koneksi adalah pelajaran WebSockets & Realtime Systems Programming gratis di CoddyKit. Ini adalah pelajaran 3 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 WebSockets & Realtime Systems Programming, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus WebSockets & Realtime Systems Programming mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Why Heartbeats Matter

In realtime applications, maintaining an active and healthy connection is crucial. But what happens if a connection silently drops?

Heartbeats are small, periodic messages exchanged between connected parties.
They act as a 'pulse check' to confirm that both the client and server are still alive and responsive.
This helps detect 'dead' connections that haven't properly closed, preventing resources from being tied up indefinitely.

The Silent Dead Peer

Imagine a client suddenly losing network connectivity (e.g., Wi-Fi drops, device sleeps) without gracefully closing its WebSocket connection.

The server might still think the client is connected.
Messages sent to this 'dead' client will never arrive.
This wastes server resources and leads to inconsistent application states.
Heartbeats provide a way to proactively identify and terminate these unresponsive connections.

Native WebSocket Pings

The WebSocket protocol includes built-in mechanisms for heartbeats: Ping and Pong frames.

A server (or client) can send a special Ping frame to its peer.
Upon receiving a Ping, the peer is expected to automatically respond with a Pong frame.
These frames are lightweight control messages, not application data.
They confirm the underlying TCP connection is still active and can transmit data.

Server Sends Ping (Node.js)

Here's how a Node.js WebSocket server can send periodic ping frames to its connected clients. The ws library handles the low-level details.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');

  // Send a ping every 5 seconds
  const pingInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.ping();
      console.log('Server sent ping.');
    }
  }, 5000);

  ws.on('pong', () => {
    console.log('Client responded with pong!');
  });

  ws.on('close', () => {
    console.log('Client disconnected');
    clearInterval(pingInterval);
  });

  ws.on('error', error => {
    console.error('WS error:', error);
    clearInterval(pingInterval);
  });
});

console.log('Server running on ws://localhost:8080');

Client Pongs Automatically

When a WebSocket client (like a browser or Node.js client using ws) receives a native Ping frame:

It automatically sends back a Pong frame without any explicit code from you.
This makes native pings very efficient for basic connection liveness checks.
If a Ping is sent and no Pong is received within a timeout, the server can infer the connection is dead and close it.

Beyond Native Pings

While native Ping/Pong frames are great for TCP connection liveness, they have limitations:

They don't check if the application layer is still responsive.
Proxies or load balancers might sometimes interfere with or not forward these control frames correctly.
They don't provide a way to carry custom data, like a timestamp or a user ID.

This is where application-level heartbeats come in.

App Heartbeat Scenarios

Application-level heartbeats are custom messages sent over the WebSocket connection, designed to be handled by your application logic. They are useful for:

Detecting liveness through WebSocket-unaware proxies.
Ensuring the application itself (not just the TCP connection) is responsive.
Implementing more sophisticated timeouts based on user activity, not just network activity.
Allowing custom data payloads (e.g., client status, last active time).

Client App Heartbeat (Node.js)

A client can send custom 'heartbeat' messages at regular intervals. This example uses a Node.js client, but browser clients would follow a similar pattern.

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');
let appHeartbeatInterval;

ws.onopen = () => {
  console.log('Connected to server.');
  // Send a custom heartbeat every 3 seconds
  appHeartbeatInterval = setInterval(() => {
    const message = JSON.stringify({
      type: 'APP_HEARTBEAT',
      timestamp: Date.now()
    });
    ws.send(message);
    console.log('Client sent APP_HEARTBEAT.');
  }, 3000);
};

ws.onmessage = event => {
  console.log('Received:', event.data);
};

ws.onclose = () => {
  console.log('Disconnected.');
  clearInterval(appHeartbeatInterval);
};

ws.onerror = error => {
  console.error('WS error:', error);
  clearInterval(appHeartbeatInterval);
};

Server Tracks App Heartbeats

The server receives these custom messages and updates a 'last seen' timestamp for each client. If a client's timestamp isn't updated for too long, the server can close the connection.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  console.log('Client connected');
  ws.lastAppHeartbeat = Date.now(); // Initialize timestamp

  const checkInterval = setInterval(() => {
    // If no app heartbeat in 6 seconds, assume dead
    if (Date.now() - ws.lastAppHeartbeat > 6000) {
      console.log('Client unresponsive (app heartbeat). Terminating.');
      ws.terminate(); // Force close the connection
      clearInterval(checkInterval);
    }
  }, 2000); // Check every 2 seconds

  ws.on('message', message => {
    const parsed = JSON.parse(message);
    if (parsed.type === 'APP_HEARTBEAT') {
      ws.lastAppHeartbeat = Date.now(); // Update timestamp
      // console.log('Received custom APP_HEARTBEAT from client');
    }
    // Handle other messages...
  });

  ws.on('close', () => {
    console.log('Client disconnected');
    clearInterval(checkInterval);
  });

  ws.on('error', error => {
    console.error('WS error:', error);
    clearInterval(checkInterval);
  });
});
console.log('Server running on ws://localhost:8080');

Check Your Understanding

Select all statements that accurately describe WebSocket heartbeats and keep-alives:

Jawab di pelajaran interaktif

Lesson Summary

We've explored the critical role of heartbeats in maintaining robust WebSocket connections:

Native Ping/Pong frames check TCP connection liveness, with clients responding automatically.
Application-level heartbeats provide a more robust and customizable way to ensure the application itself is responsive, especially useful with proxies.
Both methods prevent 'dead' connections from consuming resources and improve overall system resilience.

Mastering heartbeats is essential for building stable and scalable realtime applications.

Gratis untuk memulai

Belajar WebSockets & Realtime Systems Programming dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 12
Pelajaran: 47

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Sinyal Detak dan Penjaga Koneksi” gratis?

Ya — teks lengkap “Sinyal Detak dan Penjaga Koneksi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus WebSockets & Realtime Systems Programming, upgrade ke CoddyKit PRO. Kursus WebSockets & Realtime Systems Programming mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Sinyal Detak dan Penjaga Koneksi”?

Pelajari cara menggunakan bingkai ping/pong dan sinyal detak tingkat aplikasi untuk mempertahankan keaktifan koneksi serta mendeteksi rekan yang tidak aktif. Kamu berlatih WebSockets & Realtime Systems Programming 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 WebSockets & Realtime Systems Programming?

Tidak diperlukan pengalaman sebelumnya. WebSockets & Realtime Systems Programming 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 3 dari 4.

Berapa lama pelajaran “Sinyal Detak dan Penjaga Koneksi” 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 WebSockets & Realtime Systems Programming ini?

Ya. Setiap pelajaran WebSockets & Realtime Systems Programming 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

Menangani Pemutusan dan Penyambungan Kembali
Propagasi dan Pemulihan Kesalahan yang Tangguh
Sinyal Detak dan Penjaga Koneksi
Konfirmasi Pesan dan Jaminan Pengiriman

← Kembali ke WebSockets & Realtime Systems Programming