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

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

  • 项目

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

概述

在本操作指南中，我们采用云原生方法，使用 Azure 服务构建实时协作白板，并将项目作为 Web 应用部署到 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 的值以备后用。

    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 *

# 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 应用服务。

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