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

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

概觀

在本操作指南中，我們會採用雲端原生方法和使用 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 的值，以供日後使用。

   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 *
   
   # Poweshell
   

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 範例