操作說明：使用 Web PubSub for Socket.IO 建置即時共同作業白板，並將其部署至 Azure App Service

新的應用程式類別正在重新構想現代化的工作。 Microsoft Word 讓編輯們聚首一堂，而 Figma 則讓追求探索創意的設計師群英薈萃。 此類別的應用程式是以使用者體驗為本，讓我們感到與遠端共同作業者心有靈犀。 從技術觀點來看，使用者的活動必須以低延遲的方式跨使用者畫面同步處理。

重要

原始 連接字串 只針對示範目的出現在本文中。

連接字串包含應用程式存取 Azure Web PubSub 服務所需的授權資訊。 連接字串內的存取金鑰類似於服務的根密碼。 在生產環境中，請一律保護您的存取金鑰。 使用 Azure 金鑰保存庫，安全地管理和輪替密鑰，並使用保護連線WebPubSubServiceClient。

避免將存取金鑰散發給其他使用者、寫入程式碼，或將其以純文字儲存在他人可以存取的位置。 如果您認為金鑰可能已遭盜用，請輪替金鑰。

概觀

在本操作指南中，我們會採用雲端原生方法和使用 Azure 服務來建置即時共同作業白板，並將專案部署為 Web 應用程式至 Azure App Service。 白板應用程式可在瀏覽器中存取，並允許任何人在同一個畫布面板上繪製。

必要條件

若要遵循逐步指南，您需要

• 一個 Azure 帳戶。 如果您沒有 Azure 訂閱，請在開始之前先建立 Azure 免費帳戶。
• Azure CLI (2.39.0 版或更新版本) 或 Azure Cloud Shell 來管理 Azure 資源。

使用 Azure CLI 建立 Azure 資源

登入

1. 執行下列命令以登入 Azure CLI。

   az login
   

2. 在 Azure 上建立資源群組。

   az group create \
     --location "westus" \  
     --name "<resource-group-name>"
   

建立 Web 應用程式資源

1. 建立免費 App Service 方案。

   az appservice plan create \ 
     --resource-group "<resource-group-name>" \ 
     --name "<app-service-plan-name>" \ 
     --sku FREE
     --is-linux
   

2. 建立 Web 應用程式資源

   az webapp create \
     --resource-group "<resource-group-name>" \
     --name "<webapp-name>" \ 
     --plan "<app-service-plan-name>" \
     --runtime "NODE:16-lts"
   

建立 Web PubSub for Socket.IO

1. 建立 Web PubSub 資源。

   az webpubsub create \
     --name "<socketio-name>" \
     --resource-group "<resource-group-name>" \
     --kind SocketIO
     --sku Premium_P1
   

2. 顯示並儲存 primaryConnectionString 的值，以供日後使用。

   原始 連接字串 只會針對示範目的出現在本文中。 在生產環境中，請一律保護您的存取金鑰。 使用 Azure 金鑰保存庫 以安全方式管理和輪替密鑰，並使用保護連線WebPubSubServiceClient。

   az webpubsub key show \
     --name "<socketio-name>" \
     --resource-group "<resource-group-name>"
   

取得應用程式程式碼

執行下列命令以取得一份應用程式程式碼的複本。

git clone https://github.com/Azure-Samples/socket.io-webapp-integration

將應用程式部署至 App Service

1. App Service 支援許多部署工作流程。 針對本指南，我們將部署 ZIP 套件。 執行下列命令來安裝和建置專案。

   npm install
   npm run build
   
   # bash
   zip -r app.zip *
   
   # Powershell
   

2. 壓縮成 zip

   使用 Bash

   zip -r app.zip *
   

   使用 PowerShell

   Compress-Archive -Path * -DestinationPath app.zip
   

3. 在應用程式設定中設定 Azure Web PubSub 連接字串。 使用您從先前步驟儲存的 primaryConnectionString 值。

   az webapp config appsettings set \
   --resource-group "<resource-group-name>" \
   --name "<webapp-name>" \
   --setting Web_PubSub_ConnectionString="<primaryConnectionString>"
   

4. 使用下列命令將其部署至 Azure App Service。

   az webapp deployment source config-zip \
   --resource-group "<resource-group-name>" \
   --name "<webapp-name>" \
   --src app.zip
   

在瀏覽器中檢視白板應用程式

現在前往您的瀏覽器並造訪已部署的 Web 應用程式。 URL 通常是 https://<webapp-name>.azurewebsites.net。 建議您開啟多個瀏覽器分頁，讓您可以體驗應用程式的即時共同作業層面。 或者使用更佳方式，向同事或朋友分享連結。

下一步

請參閱更多 Socket.IO 範例