你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

操作说明：使用 Web PubSub for Socket.IO 生成实时协作白板并将其部署到 Azure 应用服务

一类新的应用程序正在重塑新式工作给人的印象。 Microsoft Word 使编辑人员能够相互协作，而 Figma 却使众多设计人员能够一起进行同一创意工作。 此类应用程序打造了一种用户体验，使我们感觉与远程协作伙伴相互联系。 从技术角度来看，需要以较低的延迟在各用户的屏幕间同步用户的活动。

重要

本文中出现的原始连接字符串仅用于演示目的。

连接字符串包括应用程序访问 Azure Web PubSub 服务所需的授权信息。 连接字符串中的访问密钥类似于服务的根密码。 在生产环境中，请始终保护访问密钥。 使用 Azure Key Vault 安全地管理和轮换密钥，并使用 WebPubSubServiceClient 对连接进行保护。

避免将访问密钥分发给其他用户、对其进行硬编码或将其以纯文本形式保存在其他人可以访问的任何位置。 如果你认为访问密钥可能已泄露，请轮换密钥。

概述

在本操作指南中，我们采用云原生方法，使用 Azure 服务构建实时协作白板，并将项目作为 Web 应用部署到 Azure 应用服务。 用户可在浏览器中访问白板应用，任何人都可以在同一画布上绘图。

先决条件

按分步指南操作需要具备以下各项

• 一个 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. 创建一个免费的应用服务计划。

   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 Key Vault 安全地管理和轮换密钥，并使用 WebPubSubServiceClient 对连接进行保护。

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

获取应用程序代码

运行以下命令，获取应用程序代码的副本。

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

将应用程序部署到应用服务

1. 应用服务支持许多部署工作流。 在本指南中，我们将部署一个 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 应用服务。

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