实现发布/订阅消息
设计并构建基于 WebSockets 的发布/订阅系统，按主题分发消息。
实现发布/订阅消息 是 CoddyKit 上的免费 WebSockets & Realtime Systems Programming 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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.
用 AI 导师学习 WebSockets & Realtime Systems Programming — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 12
- 课程
- 47
常见问题解答
「实现发布/订阅消息」课时是免费的吗？
是的 — 「实现发布/订阅消息」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 WebSockets & Realtime Systems Programming 课程的其余内容，请升级到 CoddyKit PRO。 WebSockets & Realtime Systems Programming 课程共包含 4 节课。
「实现发布/订阅消息」这节课中我会学到什么？
设计并构建基于 WebSockets 的发布/订阅系统，按主题分发消息。 你通过在浏览器中直接运行的动手代码来练习 WebSockets & Realtime Systems Programming，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 WebSockets & Realtime Systems Programming 需要有经验吗？
无需任何先前经验。CoddyKit 上的 WebSockets & Realtime Systems Programming 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「实现发布/订阅消息」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 WebSockets & Realtime Systems Programming 课中编写并运行代码吗？
能。每节 WebSockets & Realtime Systems Programming 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。