设计模式#4 - 发布者/订阅者模式

在本系列的上一篇文章中，我介绍了观察者模式。今天，我想与大家分享发布者和订阅者模式，或者更贴切地说是 PubSub。在继续本文之前，我强烈建议您先阅读并理解观察者模式。

酒吧/餐厅图案设计

发布/订阅模式是一种促进松耦合和可扩展性的消息传递模式。该模式的核心是将消息从发布者分发给不确定数量的订阅者或监听者，从而促进对象之间的多对多依赖关系。

真实案例

让我们考虑一个聊天群组应用程序。发布/订阅系统可以高效地处理消息的发送和接收：

订阅事件

当打开聊天窗口时，它会订阅一个事件，例如newMessage。

这是使用 完成的 pubsub.subscribe("newMessage", callback)。回调函数会在新消息发布到newMessage事件时执行。在本例中，回调会记录新消息并更新聊天界面。

pubsub.subscribe("newMessage", function(data) {
    console.log("New message received:", data);
    // Here you would update the chat UI with the new message
});

发布到事件

当用户发送消息时，该消息会通过 pubsub.publish("newMessage", messageData) 发布到 newMessage 事件。所有订阅了 newMessage 主题的聊天窗口都会以新消息为参数执行其回调函数。

当用户发送消息时，该消息会newMessage通过 发布到 事件 中pubsub.publish("newMessage", messageData)。所有订阅该newMessage主题的聊天窗口都会以新消息作为参数执行回调函数。

const messageData = { user: "User A", text: "This is what the user had typed" };

pubsub.publish("newMessage", messageData);

通过这种方式，发布/订阅系统实现了聊天窗口（订阅者）和消息发送者（发布者）的解耦。聊天窗口不需要知道消息的发送者（就像我们在之前关于观察者模式的文章中提到的那样），它们只需要知道收到消息后该做什么。

同样，消息发送者不需要知道谁会收到消息；他们只需要将消息发送到正确的主题。

如何创建 pub sub

要构建一个 PubSub 系统，我们需要维护事件或“主题”及其相应订阅者的记录。这可以通过一个简单的 JavaScript 对象来完成。当新消息发布时，我们会查找关联的订阅者并执行它们的回调函数。这使得系统能够动态灵活地在运行时添加或删除发布者和订阅者。

class PubSub {
        static events = {}; // It has the an empty list of events

    // The subscribe method takes an event name and a callback function
    subscribe(eventName, callback) {
        if (!this.events[eventName]) {
                // If the event doesn't exist yet, initialize it as an empty array
            this.events[eventName] = [];
        }

        // Push the callback function into the array of callbacks for the given event
        this.events[eventName].push(callback);
    }

    // The publish method takes an event name and data
    publish(event, data) {
        // If the event doesn't exist, or there's no subscribers for this event, return
        if (!this.events[event]) {
            return;
        }

        // For each subscriber of this event, call the callback function with the provided data
        this.events[event].forEach((callback) => {
            callback(data);
        });
    }
}

让我稍微分解一下这段代码：

该类PubSub具有一个静态events属性，它是一个将存储所有事件（或主题）及其相应订阅者（回调函数）的对象。

该subscribe方法用于为给定事件注册新的订阅者。它接受事件名称和回调函数作为参数。如果事件尚不存在，则将其初始化为events对象中的空数组。然后，它将回调函数添加到给定事件的回调数组中。

该publish方法用于向事件发布新数据。它接受事件名称和要发布的数据作为参数。如果事件不存在或没有订阅者，则直接返回，不执行任何操作。如果有订阅者，则调用每个订阅者的回调函数，并将已发布的数据作为参数传递。

在聊天应用程序的上下文中，该subscribe方法将用于注册一个应该接收新消息的新聊天窗口，并且该publish方法将用于向所有已订阅接收新消息的聊天窗口发送新消息。

您可以通过文章“理解和实现前端开发中的事件驱动通信”了解有关如何跨设备使用发布和订阅方法的更多信息。

实时数据引擎

这是软件开发架构的重要组成部分，但在大多数情况下，它并非您所构建业务的核心。创建一个可靠且可扩展的 PubSub 系统，用于在应用程序的不同实例之间同步数据，可能颇具挑战性。

现在已经是 2024 年了，这意味着已经有了解决方案：实时数据引擎工具，特别是SuperViz SDK。它提供了实时协作和通信 SDK 和 API，专为构建实时 Web 应用程序的开发人员而设计。

使用 SuperViz，您可以创建一个包含多位参与者的房间，发布活动时，该活动将广播给房间内所有通过不同设备和网络访问的参与者。这意味着一位参与者的任何更新都将实时反映在所有设备上，从而提供无缝的协作体验。

SuperViz提供了构建实时协作应用程序所需的基础架构。其中包括使用 webhook 在后端捕获事件，以及使用简单的 HTTP 请求发布事件等功能。

请在评论中告诉我您还想了解哪些其他设计模式，并且不要忘记分享您的知识！