WebSockets & Realtime Systems Programming · 강의

게시/구독 메시징 구현

WebSockets를 기반으로 주제별 메시지 배포를 위한 게시/구독 시스템을 설계하고 구축합니다.

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

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

Intro to Pub/Sub Messaging

Welcome to advanced WebSocket patterns! Today, we'll explore Publish/Subscribe (Pub/Sub) messaging, a powerful way to distribute real-time data efficiently.

Imagine a digital newspaper where you only get articles on topics you care about. That's Pub/Sub in action!

It's ideal for features like live chat rooms, social media feeds, stock tickers, or any application needing dynamic, topic-based updates.

Pub/Sub's Key Players

A Pub/Sub system involves a few core components:

Publishers: These are entities that send messages. They don't know who will receive the messages.
Subscribers: These are entities that receive messages. They express interest in specific topics.
Topics: These are categories or channels for messages. Subscribers 'tune into' topics they want to follow.
Broker: This is the central component (our WebSocket server) that receives messages from publishers and forwards them to relevant subscribers.

WebSocket Server as Broker

In our WebSocket Pub/Sub system, the WebSocket server acts as the Broker.

It will be responsible for:

Accepting client connections.
Managing a list of which clients are subscribed to which topics.
Receiving messages from 'publisher' clients.
Distributing those messages to all 'subscriber' clients for the given topic.

We'll use a Map data structure on the server to store subscriptions, mapping each topic name to a Set of connected WebSocket client objects.

Designing Message Formats

To make our Pub/Sub system work, clients and the server need a clear way to communicate. We'll use simple JSON messages.

1. Subscribe Message (Client to Server):

{ "action": "subscribe", "topic": "chat:general" }

2. Publish Message (Client to Server):

{ "action": "publish", "topic": "news", "payload": "Breaking: New feature released!" }

3. Delivered Message (Server to Client):

{ "type": "message", "topic": "chat:general", "payload": "Hello everyone!" }

Server: Basic Pub/Sub Logic

Here's a complete Node.js WebSocket server implementing basic Pub/Sub. It handles both subscribe and publish messages.

Run this code (node server.js after npm install ws) and then connect clients in your browser to test it!

const { WebSocketServer } = require('ws');
const wss = new WebSocketServer({ port: 8080 });

// Stores active subscriptions: Map<topic, Set<WebSocket>>
const subscriptions = new Map();

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

  ws.on('message', message => {
    try {
      const data = JSON.parse(message.toString());
      const { action, topic, payload } = data;

      if (action === 'subscribe' && topic) {
        if (!subscriptions.has(topic)) {
          subscriptions.set(topic, new Set());
        }
        subscriptions.get(topic).add(ws);
        ws.send(JSON.stringify({ status: 'subscribed', topic }));
        console.log(`Client subscribed to '${topic}'.`);
      } else if (action === 'publish' && topic && payload) {
        const topicSubscribers = subscriptions.get(topic);
        if (topicSubscribers) {
          topicSubscribers.forEach(subscriber => {
            if (subscriber.readyState === ws.OPEN) {
              subscriber.send(JSON.stringify({ type: 'message', topic, payload }));
            }
          });
          console.log(`Published to '${topic}': ${payload}.`);
        } else {
          ws.send(JSON.stringify({ error: `No subscribers for '${topic}'.` }));
        }
      } else {
        ws.send(JSON.stringify({ error: 'Invalid message.' }));
      }
    } catch (e) {
      console.error('Message error:', e.message);
      ws.send(JSON.stringify({ error: 'JSON parse error.' }));
    }
  });

  // Connection close and error handling in the next scene
});

console.log('Pub/Sub server running on ws://localhost:8080');

Server: Connection Lifecycle

Managing the connection lifecycle is crucial for a robust Pub/Sub server. The server must handle client disconnections gracefully.

The ws.on('close') event fires when a client disconnects.
Inside this handler, we iterate through all topics and remove the disconnected client from any subscription lists it was part of.
We also clean up any topics that become empty after a client leaves.
The ws.on('error') handler catches any communication errors.

Client: Connecting & Subscribing

Now let's look at the client side, typically running in a web browser. We'll use the native WebSocket API.

This code snippet connects to our server and sends a subscribe message for a specific topic.

Remember to open this HTML file in a browser, and have your Node.js server running!

<!-- index.html -->
<!DOCTYPE html>
<html>
<head><title>Pub/Sub Client</title></head>
<body>
  <h1>Pub/Sub Client</h1>
  <p>Status: <span id="status">Disconnected</span></p>
  <ul id="messages"></ul>

  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const statusElem = document.getElementById('status');
    const messagesElem = document.getElementById('messages');

    ws.onopen = () => {
      statusElem.textContent = 'Connected';
      console.log('Connected to server');
      // Subscribe to a topic
      ws.send(JSON.stringify({ action: 'subscribe', topic: 'chat:general' }));
      ws.send(JSON.stringify({ action: 'subscribe', topic: 'news' }));
    };

    ws.onclose = () => {
      statusElem.textContent = 'Disconnected';
      console.log('Disconnected from server');
    };

    ws.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };

    // Message handling in the next scene
  </script>
</body>
</html>

Client: Receiving & Displaying

Once subscribed, the client needs to listen for incoming messages from the server. The ws.onmessage event is where this happens.

When a message arrives, we parse its JSON content and can display it to the user, perhaps filtering or formatting based on the message's topic.

Try opening multiple browser tabs, subscribing to the same topic, and then publishing a message from one tab (e.g., via the console) to see it appear in others!

<!-- index.html (continued script part) -->
    // ... (ws.onopen, ws.onclose, ws.onerror from previous scene)

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

      if (data.type === 'message') {
        const listItem = document.createElement('li');
        listItem.textContent = `[${data.topic}] ${data.payload}`;
        messagesElem.appendChild(listItem);
      } else if (data.status === 'subscribed') {
        const listItem = document.createElement('li');
        listItem.textContent = `Successfully subscribed to '${data.topic}'.`;
        messagesElem.appendChild(listItem);
      } else if (data.error) {
        console.error('Server error:', data.error);
        const listItem = document.createElement('li');
        listItem.style.color = 'red';
        listItem.textContent = `Error: ${data.error}`; 
        messagesElem.appendChild(listItem);
      }
    };

    // Example of how a client could publish a message (e.g., via a button click)
    // ws.send(JSON.stringify({ action: 'publish', topic: 'chat:general', payload: 'Hello from client!' }));
  </script>
</body>
</html>

Advanced Pub/Sub Patterns

While our basic Pub/Sub system is functional, real-world applications often need more:

Unsubscribe: A client should be able to stop receiving messages for a topic. This would involve a new message action (e.g., { "action": "unsubscribe", "topic": "news" }) and server-side logic to remove the client from the topic's subscription set.
Topic Hierarchies: Allowing subscriptions to patterns like news.* to receive all news sub-topics.
Message Persistence: Storing messages so new subscribers can receive past messages (e.g., chat history).

Quick Check

Consider the Pub/Sub system we just built. Which component is primarily responsible for deciding which subscribers receive a message published to a specific topic?

Recap & Beyond

Congratulations! You've learned how to design and implement a fundamental Publish/Subscribe messaging system using WebSockets.

We covered the core components (Publisher, Subscriber, Topic, Broker), defined message formats, and built both the server-side broker logic and client-side subscription/reception.

Pub/Sub is a foundational pattern for many real-time applications. Experiment with adding unsubscribe functionality, more complex topic management, or integrating with external message queues for larger scale.

자주 묻는 질문

“게시/구독 메시징 구현” 강의는 무료인가요?

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

“게시/구독 메시징 구현”에서 뭘 배우나요?

WebSockets를 기반으로 주제별 메시지 배포를 위한 게시/구독 시스템을 설계하고 구축합니다. 브라우저에서 직접 실행하는 실습 코드로 WebSockets & Realtime Systems Programming을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“게시/구독 메시징 구현” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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