分享方式:


從伺服器推送訊息

熟悉的 HTTP 要求/回應模型設計成容易使用並可調整。 然而,現今終端使用者對網路的要求比最初設計的要來得多。 HTTP 通訊協定要求使用者起始要求,才能接收回應。 但開發人員需要一種方式,將資料從伺服器傳送到用戶端,而不需要要求;換句話說,他們需要將資料「推送」至用戶端,像是推送拍賣網站上產品的最新競標價格或金融應用程式中快速移動的股價。

GIF of application server pushing data to connected client.

本快速入門指南示範如何:

  • 訂閱來自應用程式伺服器的訊息
  • 將資料從應用程式伺服器推送所有連線的用戶端

必要條件

  • Web PubSub 資源。 如果尚未建立,您可遵循下列指引:建立 Web PubSub 資源
  • 程式碼編輯器,例如 Visual Studio Code
  • 安裝您規劃使用之語言的相依性

建立訂閱者用戶端

若要訂閱從應用程式伺服器推送的訊息,用戶端 (無論是瀏覽器、行動應用程式或 IoT 裝置) 必須先連線到 Web PubSub 資源,並接聽適當的訊息事件。

建立名為 subscriber 的專案目錄並安裝必要的相依性

mkdir subscriber
cd subscriber
npm init -y
    
# The client SDK is available as a module on NPM
npm install @azure/web-pubsub-client

連線到您的 Web PubSub 資源並註冊 server-message 事件的接聽程式

用戶端會使用用戶端存取 URL 來連線及驗證您的資源。 此 URL 遵循 wss://<service_name>.webpubsub.azure.com/client/hubs/<hub_name>?access_token=<token> 模式。 用戶端可有幾種方式來取得用戶端存取 URL。 在本快速入門中,您可以複製並貼上來自下圖所示 Azure 入口網站的一個 URL。 最佳做法是不要在程式碼中硬式編碼用戶端存取 URL。 在生產環境中,我們通常會設定應用程式伺服器,視需要傳回此 URL。 產生用戶端存取 URL 詳細說明做法。

The diagram shows how to get client access url.

如上圖所示,用戶端會聯結名為 myHub1 的中樞。

subscriber 專案資料夾中,使用下列程式碼來建立名為 subscribe.js 的檔案

const { WebPubSubClient } = require("@azure/web-pubsub-client");

// Instantiates the client object
// <client-access-url> is copied from Azure portal mentioned above
const client = new WebPubSubClient("<client-access-url>")

// Registers a handler for the "server-message" event
client.on("server-message", (e) => {
    console.log(`Received message ${e.message.data}`)
});

// Before a client can receive a message, 
// you must invoke start() on the client object.
client.start();

執行程式

node subscribe.js

現在,此用戶端會與 Web PubSub 資源建立連線,並準備好接收從應用程式伺服器推送的訊息。

從應用程式伺服器推送訊息

既然您已將 Web PubSub 資源連線到用戶端,您隨時都可以使用 Web PubSub 所提供的伺服器 SDK,從應用程式伺服器推送訊息。

建立名為 publisher專案目錄並安裝必要的相依性

mkdir publisher
cd publisher

npm init

# This command installs the server SDK from NPM, 
# which is different from the client SDK you used in subscribe.js
npm install --save @azure/web-pubsub

建立包含下列程式碼的 publish.js 檔案

const { WebPubSubServiceClient } = require('@azure/web-pubsub');

// This is the hub name we used on Azure portal when generating the Client Access URL. 
// It ensures this server can push messages to clients in the hub named "myHub1".
const hub = "myHub1";
    
let server = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);

// By default, the content type is `application/json`. 
// Specify contentType as `text/plain` for this demo.
server.sendToAll(process.argv[2], { contentType: "text/plain" });

server.sendToAll() 呼叫會將訊息傳送至中樞中的所有已連線用戶端。

取得連接字串

重要

連接字串包含應用程式存取 Web PubSub 服務所需的授權資訊。 連接字串內的存取金鑰類似於您服務的根密碼。

在本快速入門指南中,我們將從 Azure 入口網站取得,如下所示。 A diagram shows how to get client access url.

執行伺服器程式

新的命令殼層中,執行下列命令。

# Set the environment variable for your connection string.
export WebPubSubConnectionString="<Put your connection string here>" 

node publish.js "Hello World"

觀察用戶端上收到的訊息

GIF of demonstrating an app server pushing data to connected client.

嘗試在多個命令殼層中執行相同的「訂閱」程式,以刺激更多用戶端。 一旦執行「發佈」程式,您應該會看到訊息即時傳遞至所有這些用戶端。

摘要

本快速入門示範如何輕鬆將訊息從應用程式伺服器推送至中樞內所有連線的用戶端。 此外,Web PubSub 可讓您將訊息推送至:

  • 中樞中的用戶端子集
  • 中樞中的特定群組
  • 群組中的用戶端子集

這些 API 可實現豐富的使用案例,讓開發人員專注於獨特的商業規則,同時確保 Web PubSub 提供低延遲 (<100 毫秒)高可用性大規模(百萬+同時連線)

下一步

在下一個步驟中,我們將探索如何使用 Web PubSub 事件系統,以建置完整的 Web 應用程式。