Практическое руководство. Создание доски для совместной работы в режиме реального времени с помощью Web PubSub для Socket.IO и его развертывания в службе приложение Azure

Новый класс приложений переосмыслеет то, что может быть современной работой. В то время как Microsoft Word объединяет редакторов, Figma собирает дизайнеров на те же творческие усилия. Этот класс приложений основан на пользовательском интерфейсе, который делает нас подключенными к нашим удаленным участникам совместной работы. С технической точки зрения действия пользователя должны быть синхронизированы на экранах пользователей с низкой задержкой.

Внимание

Необработанные строка подключения отображаются в этой статье только для демонстрационных целей.

Строка подключения содержит сведения об авторизации, требуемые для доступа приложения к службе Azure Web PubSub. Ключ доступа в строке подключения аналогичен паролю привилегированного пользователя для службы. В рабочих средах всегда защищать ключи доступа. Используйте Azure Key Vault для безопасного управления ключами и защиты подключения.WebPubSubServiceClient

Старайтесь не распространять ключи доступа среди других пользователей, жестко программировать их или где-то сохранять в виде обычного текста в открытом доступе для других пользователей. Меняйте свои ключи постоянно, если предполагаете, что они могут быть подобраны.

Обзор

В этом руководстве мы используем облачный подход и используем службы Azure для создания доски для совместной работы в режиме реального времени, и мы развертываем проект в качестве веб-приложения для приложение Azure службы. Приложение доски доступно в браузере и позволяет любому пользователю нарисовать на одном холсте.

Необходимые компоненты

Чтобы выполнить пошаговые инструкции, вам потребуется

• Учетная запись Azure. Если у вас еще нет подписки Azure, создайте бесплатную учетную запись Azure, прежде чем начинать работу.
• Azure CLI (версия 2.39.0 или более поздней версии) или Azure Cloud Shell для управления ресурсами Azure.

Создание ресурсов Azure с использованием Azure CLI

Войдите в систему.

1. Войдите в Azure CLI, выполнив следующую команду.

   az login
   

2. Создайте группу ресурсов в Azure.

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

Создание ресурса веб-приложения

1. Создайте бесплатный план Служба приложений.

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

2. Создание ресурса веб-приложения

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

Создание веб-pubSub для 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
   

Просмотр приложения доски в браузере

Теперь перейдите к браузеру и посетите развернутую веб-приложение. Обычно url-адрес имеет значение https://<webapp-name>.azurewebsites.net . Рекомендуется открыть несколько вкладок браузера, чтобы вы могли испытать аспект совместной работы приложения в режиме реального времени. Или лучше, поделитесь ссылкой с коллегой или другом.

Следующие шаги

Дополнительные Socket.IO примеры