在本系列的前一篇文章中，我介紹了觀察者模式。今天，我想與大家分享發布者和訂閱者模式，或是最親密的朋友的 PubSub 模式。我強烈建議您在繼續此任務之前閱讀並理解觀察者模式。
酒吧子圖案設計
PubSub 模式是一種促進鬆散耦合和可擴展性的訊息傳遞模式。此模式圍繞著將訊息從發布者分派到未指定數量的訂閱者或偵聽器，從而促進物件之間的多對多依賴關係。
真實案例場景
讓我們考慮一個聊天群組應用程式。 Pub/Sub系統可以有效率地處理訊息的發送和接收：
訂閱活動
當聊天視窗開啟時，它會訂閱一個事件，例如newMessage 。
這是使用pubsub.subscribe("newMessage", callback)完成的。回呼函數是當新訊息發佈到newMessage事件時將執行的函數。在這種情況下，回呼會記錄新訊息並更新聊天 UI。
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 主題的聊天視窗都將使用新訊息作為參數來執行其回呼函數。
當使用者傳送訊息時，它會使用pubsub.publish("newMessage", messageData)發佈到newMessage事件。所有訂閱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提供建立即時協作應用程式所需的基礎架構。這包括使用 Webhooks 在後端捕獲此事件的能力，以及使用簡單 HTTP 請求發布事件的能力，僅舉幾個功能。
請在評論中告訴我您還想了解哪些其他設計模式，並且不要忘記分享您的知識！
原文出處：https://dev.to/superviz/design-pattern-4-publishersubscriber-pattern-4jg9
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式