WebSockets & Realtime Systems Programming · 강의

하트비트와 연결 유지

연결이 활성 상태로 유지되도록 핑/퐁 프레임과 애플리케이션 수준의 하트비트를 사용하고, 응답하지 않는 피어를 감지하는 방법을 배웁니다.

레슨 3/411개 단계

하트비트와 연결 유지은(는) CoddyKit의 무료 WebSockets & Realtime Systems Programming 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 WebSockets & Realtime Systems Programming 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. WebSockets & Realtime Systems Programming 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

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:

인터랙티브 레슨에서 답해보세요

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.

무료로 시작

AI 튜터와 함께 WebSockets & Realtime Systems Programming을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 12
레슨: 47

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“하트비트와 연결 유지” 강의는 무료인가요?

네 — “하트비트와 연결 유지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 WebSockets & Realtime Systems Programming 강의 전체를 잠금 해제할 수 있습니다. WebSockets & Realtime Systems Programming 강의에는 총 4개의 강의가 포함되어 있습니다.

“하트비트와 연결 유지”에서 뭘 배우나요?

연결이 활성 상태로 유지되도록 핑/퐁 프레임과 애플리케이션 수준의 하트비트를 사용하고, 응답하지 않는 피어를 감지하는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 WebSockets & Realtime Systems Programming을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

WebSockets & Realtime Systems Programming을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 WebSockets & Realtime Systems Programming은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“하트비트와 연결 유지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 WebSockets & Realtime Systems Programming 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 WebSockets & Realtime Systems Programming 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← WebSockets & Realtime Systems Programming(으)로 돌아가기