Azure Web PubSub 本機通道工具

Web PubSub 本機通道為客戶提供本機開發環境，為他們增強本機開發體驗。 客戶不需要使用第三方工具公開本機連接埠，使用 Web PubSub 本機通道作為 Web PubSub 服務與本機伺服器之間的通道，即可確保本機開發環境安全無虞。

Web PubSub 本機通道工具提供：

• 將流量從 Web PubSub 導向本機伺服器的方式
• 透過通道和本機伺服器，檢視從用戶端到 Web PubSub 之端對端資料流程的方式
• 提供內嵌上游伺服器，協助您快速上手
• 提供簡單的用戶端，協助您展開伺服器開發

優點：

• 安全的本機: 不需要對外公開您的本地伺服器
• 安全連線: 使用 Microsoft Entra ID 和 Web PubSub 存取原則進行連線
• 簡單設定: URL 範本設定為 tunnel:///<your_server_path>
• 資料檢查: 清晰的資料與工作流程檢視

必要條件

• Node.js 16 版或更高版本

安裝

npm install -g @azure/web-pubsub-tunnel-tool

使用方式

Usage: awps-tunnel [options] [command]

A local tool to help tunnel Azure Web PubSub traffic to local web app and provide a vivid view to the end to end workflow.

Options:
  -v, --version   Show the version number.
  -h, --help      Show help details.

Commands:
  status          Show the current configuration status.
  bind [options]  Bind configurations to the tool so that you don't need to specify them every time running the tool.
  run [options]   Run the tool.
  help [command]  Display help details for subcommand.

You could also set WebPubSubConnectionString environment variable if you don't want to configure endpoint.

準備認證

同時支援連接字串和 Microsoft Entra ID。

使用連接字串

1. 在 Web PubSub 服務入口網站，從 Web PubSub 服務入口網站複製連接字串。

2. 將連接字串設定為本機環境變數，然後開始 awps-tunnel。

Linux 或 macOS

export WebPubSubConnectionString="<your connection string>"

Windows

SET WebPubSubConnectionString=<your connection string>

使用 Azure 身分識別

1. 在 Web PubSub 服務入口網站，移至 [存取控制] 索引標籤，然後將角色 Web PubSub Service Owner 新增至您的身分識別。

2. 在本機終端機，使用 Azure CLIaz login 登入身分識別。

3. 或者，您也可以透過定義的環境變數設定帳戶資訊，或是直接針對支援的 Azure 服務使用受控識別驗證。

執行

1. 在 Web PubSub 服務入口網站，移至 [設定] 索引標籤，並指定事件處理常式 URL 範本從 tunnel:/// 開始，即可允許通道連線。

   

2. 使用您之前設定的中樞執行工具，例如，使用中樞 chat 連線端點 https://<awps-host-name>.webpubsub.azure.com:

   awps-tunnel run --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com
   

   您也可以使用 awps-tunnel bind --hub chat --endpoint https://<awps-host-name>.webpubsub.azure.com 儲存設定，然後awps-tunnel run。

3. 您會看到類似 Open webview at: http://127.0.0.1:4000 的輸出，請在瀏覽器開啟連結，您便可看到通道狀態和工作流程。

4. 現在切換至 [伺服器]索引標籤，並檢查內建 Echo Server，啟動內建上游伺服器，其程式碼類似下方所示的範例程式碼。

   

5. 或者，您可以在 http://localhost:3000. 自行啟動上游伺服器 您也可以在awps-tunnel run或awps-tunnel bind時指定選項--upstream http://localhost:<custom-port>，在自訂的連接埠自行設定上游伺服器。 例如，執行下列程式碼啟動這個範例上游伺服器，當它啟動時，上游會向 http://localhost:3000/eventhandler/. 提供要求

   git clone https://github.com/Azure/azure-webpubsub.git
   cd tools/awps-tunnel/server/samples/upstream
   npm install
   npm start
   

6. 現在切換至 [用戶端]索引標籤並選取 [Connect]，啟動與 Azure Web PubSub 服務的測試 WebSocket 連線。 您會看到流量通過 Web PubSub 到本機通道，最後到達上游伺服器。 [通道] 索引標籤提供要求和回應的詳細資料，讓您清楚檢視向上游伺服器要求的內容，以及上游伺服器回應的內容。