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

  • Статья

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

Общие сведения

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

Gif готового проекта.

Ознакомьтесь с демонстрацией доски в режиме реального времени

Архитектура

Имя службы Azure Назначение Преимущества
служба приложений Azure; Предоставляет среду размещения для серверного приложения, созданного с помощью Express. Полностью управляемая среда для серверных серверов приложений без необходимости беспокоиться об инфраструктуре, в которой выполняется код
Azure Web PubSub Обеспечивает канал двунаправленного обмена данными с низкой задержкой между серверным приложением и клиентами. Значительно сокращает нагрузку на сервер за счет освобождения сервера от управления постоянными подключениями WebSocket и масштабирования до 100 000 одновременных клиентских подключений только с одним ресурсом

Схема архитектуры приложения для совместной работы с доской.

Предварительные требования

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

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

Создавать ресурсы Azure с помощью Azure CLI

1. Вход

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

    az login

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

    az group create \
  --location "westus" \  
  --name "whiteboard-group"

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

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

    az appservice plan create \ 
  --resource-group "whiteboard-group" \ 
  --name "demo" \ 
  --sku FREE
  --is-linux

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

    az webapp create \
  --resource-group "whiteboard-group" \
  --name "whiteboard-app" \ 
  --plan "demo" \
  --runtime "NODE:18-lts"

3. Создание ресурса Web PubSub

  1. Создайте ресурс Web PubSub.

    az webpubsub create \
  --name "whiteboard-app" \
  --resource-group "whiteboard-group" \
  --location "westus" \
  --sku Free_F1

  2. Отображение и сохранение значения в каком-либо месте для последующего primaryConnectionString использования.

    az webpubsub key show \
  --name "whiteboard-app" \
  --resource-group "whiteboard-group"

Получение кода приложения

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

git clone https://github.com/Azure/awps-webapp-sample.git

Развертывание приложения в Служба приложений

  1. Служба приложений поддерживает множество рабочих процессов развертывания. В этом руководстве мы развернем ZIP-пакет. Выполните следующие команды, чтобы подготовить ZIP-файл.

    npm install
npm run build
zip -r app.zip *

  2. Используйте следующую команду, чтобы развернуть ее в Служба приложений Azure.

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

  3. Задайте строку подключения Azure Web PubSub в параметрах приложения. Используйте значение, сохраненное primaryConnectionString на предыдущем шаге.

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

Настройка сервера вышестоящий для обработки событий, поступающих из Web PubSub

Всякий раз, когда клиент отправляет сообщение в службу Web PubSub, служба отправляет HTTP-запрос в указанную конечную точку. Этот механизм используется сервером для дальнейшей обработки сообщений, например, если вы можете сохранить сообщения в выбранной базе данных.

Как и в случае с HTTP-запросами, служба Web PubSub должна знать, где находится сервер приложений. Так как серверное приложение теперь развернуто в Служба приложений, мы получаем для него общедоступное доменное имя.

  1. Отображение и сохранение значения name в каком-либо месте.

    az webapp config hostname list \
  --resource-group "whiteboard-group"
  --webapp-name "whiteboard-app"

  2. На внутреннем сервере /eventhandler мы решили предоставить конечную точку hub и имя приложения доски "sample_draw"

    az webpubsub hub create \ 
  --resource-group "whiteboard-group" \
  --name "whiteboard-app" \
  --hub-name "sample_draw" \
  --event-handler url-template="https://<Replace with the hostname of your Web App resource>/eventhandler" user-event-pattern="*" system-event="connected" system-event="disconnected"

Важно!

url-template состоит из трех частей: протокол + имя узла + путь, который в нашем случае имеет значение https://<The hostname of your Web App resource>/eventhandler.

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

Теперь перейдите в браузер и посетите развернутые веб-приложения. Рекомендуется открыть несколько вкладок браузера, чтобы вы могли испытать аспект совместной работы приложения в режиме реального времени. Или, лучше, поделитесь ссылкой с коллегой или другом.

Поток данных

Общие сведения

В разделе Поток данных подробно рассматривается создание приложения для доски. Приложение доски имеет два метода транспорта.

  • Служба HTTP, написанная как приложение Express и размещенная в Служба приложений.
  • Подключения WebSocket, управляемые Azure Web PubSub.

Использование Azure Web PubSub для управления подключениями WebSocket снижает нагрузку на веб-приложение. Помимо проверки подлинности клиента и обслуживания изображений, веб-приложение не участвует в синхронизации действий рисования. Действия клиента по рисованию отправляются непосредственно в Web PubSub и передаются всем клиентам в группе.

В любой момент времени может быть несколько клиентских рисунков. Если веб-приложение самостоятельно управляет подключениями WebSocket, ему необходимо транслировать все действия рисования всем остальным клиентам. Огромный трафик и обработка являются большим бременем для сервера.

Клиент, созданный с помощью Vue, выполняет HTTP-запрос маркера клиентского доступа к конечной точке /negotiate. Серверное приложение является приложением Express и размещается как веб-приложение с использованием Служба приложений Azure.

Снимок экрана: первый шаг потока данных приложения.

Когда серверное приложение успешно возвращает маркер клиентского доступа подключаемого клиента, клиент использует его для установления подключения WebSocket к Azure Web PubSub.

Снимок экрана: второй шаг потока данных приложения.

Если подтверждение с помощью Azure Web PubSub прошло успешно, клиент добавляется в группу с именем draw, фактически подписываясь на сообщения, опубликованные в этой группе. Кроме того, клиенту предоставляется разрешение на отправку сообщений в группуdraw.

Снимок экрана: третий шаг потока данных приложения.

Примечание

Чтобы сосредоточиться на этом практическом руководстве, все подключающиеся клиенты добавляются в одну группу с именем draw и получают разрешение на отправку сообщений в эту группу. Сведения о детальном управлении клиентскими подключениями см. в полных ссылках на API, предоставляемых Azure Web PubSub.

Azure Web PubSub уведомляет серверное приложение о подключении клиента. Серверное приложение обрабатывает onConnected событие путем вызова sendToAll()с полезными данными последнего числа подключенных клиентов.

Снимок экрана: четвертый шаг потока данных приложения.

Примечание

Важно отметить, что если в draw группе есть большое количество сетевых пользователей с одним сетевым вызовом из серверного приложения, все пользователи будут уведомлены о том, что новый пользователь только что присоединился. Это значительно снижает сложность и нагрузку серверного приложения.

Как только клиент устанавливает постоянное подключение к Web PubSub, он выполняет HTTP-запрос к внутреннему приложению для получения последних фигур и фоновых данных по адресу /diagram. Службу HTTP, размещенную на Служба приложений, можно объединить с Web PubSub. Служба приложений выполняет обслуживание конечных точек HTTP, а Web PubSub — управление подключениями WebSocket.

Снимок экрана: шаг 5 потока данных приложения.

Теперь, когда клиенты и серверное приложение имеют два способа обмена данными. Один из них — это обычный цикл http-запроса и ответа, а другой — постоянный двунаправленный канал через Web PubSub. Действия рисования, которые исходят от одного пользователя и должны транслироваться всем пользователям сразу после их выполнения, доставляются через Web PubSub. Для этого не требуется участие серверного приложения.

Снимок экрана: шестой шаг потока данных приложения.

Очистка ресурсов

Хотя приложение использует только бесплатные уровни обеих служб, рекомендуется удалять ресурсы, если они больше не нужны. Вы можете удалить группу ресурсов вместе с ресурсами в ней с помощью следующей команды:

az group delete 
  --name "whiteboard-group"

Дальнейшие действия

Ознакомьтесь с дополнительными демонстрациями, созданными с помощью Web PubSub