Azure Web PubSub 實做及時聊天服務

2021-05-11

Azure Web PubSub 是微軟推出的一個新服務，目前還在預覽中，它是即時推撥訊息的服務，透過伺服器和用戶端建立 WebSoket 連線，做到及時的訊息傳遞的服務，它底層還是微軟之前推出的 SignalR ，他簡化了 SignalR 的使用，僅保留 WebSoket 的連線方式，然後支援 CloudEvents 格式，在使用上也不需要限定使用 SignalR 的 JS SDK，可以使用任何 WebSoket 的套件來使用，本文針對官方聊天室範例實做過程做個記錄，並且把一些會卡住的點說明一下。

前言

說明

開始前還是不免俗介紹一下 Web PubSub ，根據官方說明，它可以使用在底下的情境：

高頻率資料更新：遊戲、投票、輪詢、拍賣。
即時儀表板和監視：公司儀表板、財務市場資料、即時銷售更新、多玩家遊戲領導人面板，以及 IoT 監視。
跨平臺即時聊天：即時聊天室、聊天機器人、線上客戶支援、即時購物助理、messenger、遊戲中的交談等等。
地圖上的即時位置：物流追蹤、傳遞狀態追蹤、運輸狀態更新、GPS 應用程式。
即時目標廣告：個人化即時推播廣告和供應專案、互動式廣告。
共同作業應用程式：共同創作、白板應用程式和小組會議軟體。
推播立即通知：社交網路、電子郵件、遊戲、旅遊警示。
即時廣播：即時音訊/視訊廣播、即時隱藏式輔助字幕、轉譯、事件/新聞廣播。
IoT 和連接的裝置：即時 IoT 計量、遠端控制、即時狀態，以及位置追蹤。
自動化：上游事件的即時觸發程序。

這類型訂閱推撥服務最基本的應用就是聊天室了，所以這次挑選來實做看看。首先搜尋 Web PubSub Service 可以看到底下的服務：

建立的畫面相當簡單，唯一要注意的只有定價層

目前微軟提供兩種定價層，一個是免費，一個是標準，免費針對的就是開發和測試時候使用，每一單位連線數為 20 ，每天發訊息上限為 20000，最大單位只能一個，所以是無法針對服務規模去調整執行的個體，更多詳細比較可以參考下圖。

正常的話大約幾分鐘內服務就會建立完成，但是我第一次建立的時候，執行了一個多小時之後建置失敗，之後在建立就幾分鐘內就完成了，可能因為還在預覽，所以產生這樣的錯誤，如果在建立的過程等候太久的話，很有可能是會建置失敗的。

再來點選金鑰這一個功能，複製連接字串，之後會需要用到

接下來到這邊取得官方範例，裡面包含各種程式語言的範例，我這邊挑選 C# 的 chatapp 來測試，下載之後開啟專案，主要修改的檔案為 Startup.cs 的 ConfigureServices 內，首先把前面複製下來的連線字串填入。

services.AddAzureClients(builder =>
{                
    builder.AddWebPubSubServiceClient("<connection_string>", "chat");
});

再來針對這個範例，需要在同一個區塊補上底下的程式碼，因為後面的程式碼包含了非同步的 IO 程式，如果不開啟的話會產生錯誤，而這個錯誤在這個情境底下會很難找到問題點，我也是卡住很久後來才意外找到解決辦法，底下針對 Kestrel 和 IIS 的執行模式有不同的設定，請針對 .NET Core 執行的 Web Server 自行選擇，或是都輸入。

// If using Kestrel:
services.Configure<KestrelServerOptions>(options =>
{
    options.AllowSynchronousIO = true;
});

// If using IIS:
services.Configure<IISServerOptions>(options =>
{
    options.AllowSynchronousIO = true;
});

整個 ConfigureServices 區塊修改之後程式碼如下：

public void ConfigureServices(IServiceCollection services)
{
    services.AddAzureClients(builder =>
    {                
        builder.AddWebPubSubServiceClient("<connection_string>", "chat");
    });

    // If using Kestrel:
    services.Configure<KestrelServerOptions>(options =>
    {
        options.AllowSynchronousIO = true;
    });

    // If using IIS:
    services.Configure<IISServerOptions>(options =>
    {
        options.AllowSynchronousIO = true;
    });
}

再來針對特定的系統訊息需要做 Handler 的設定，才會送出這些訊息到我們的程式，不然只會收到客戶端傳送的一般訊息，在設定前需要確認有對外的網址，可以將程式部署到 Azure 或是使用 ngrok 這類型服務產生一個對外網址，再來開啟 Web PubSub 設定，新增一個 Handler， Hub Name 請輸入 chat 或是看前面設定連線字串時候有沒有調整，然後 Url 部分輸入 http://<url>/eventhandler ，請針對自己的對外網址修改，System Events 部分選擇 connected，存檔之後就可以了，針對這一個事件主要是判斷有用戶端連上的時候，就會收到訊息，然後在畫面上就可以呈現某人加入的訊息。

修改到這邊就可以執行程式來測試了，用瀏覽器開啟 index.html 就可以測試這一個範例了，開啟兩個不同的瀏覽器，就可以正確執行和傳送訊息了。

結論

簡單的玩了一下這個服務，大致上的應用和 SignalR 是一樣的，如果本來就已經在用 SignalR 建立還是可以維持使用該服務，因為還是比較完整可以支援不同連線方式，對於瀏覽器相容性會高一點，尤其是不支援 WebSoket 的老舊瀏覽器，如果想要快速簡單的使用，就可以嘗試這一個新服務，使用上可以比較簡易的使用，官方也提供很多範例，其中有一個電子白板的範例也是很有趣，大家可以嘗試玩看看。

本文僅針對服務簡單的測試，之後有機會會針對服務跟 SDK 做介紹，看看可以做出怎樣有趣的範例來說明更多的情境。