Share via

Vorgehensweise: Erstellen eines Whiteboards für die Zusammenarbeit in Echtzeit mithilfe von Azure Web PubSub und bereitstellen in Azure App Service

  • Artikel

Eine neue Klasse von Anwendungen definiert die moderne Form der Arbeit neu. Während Microsoft Word Redakteure zusammenbringt, versammelt Figma Designer für dasselbe kreative Unterfangen. Diese Klasse von Anwendungen baut auf einer Benutzeroberfläche auf, die uns das Gefühlt gibt, mit den Remotemitarbeitern verbunden zu sein. Aus technischer Sicht müssen die Aktivitäten der Benutzer mit einer geringen Latenzzeit über die Bildschirme der Benutzer hinweg synchronisiert werden.

Übersicht

In dieser Anleitung ergreifen wir einen cloudnativen Ansatz und verwenden Azure-Dienste, um ein Whiteboard für die Zusammenarbeit in Echtzeit zu erstellen, und wir stellen das Projekt als Web-App für Azure App Service bereit. Die Whiteboard-App ist im Browser zugänglich und ermöglicht es jedem, auf demselben Canvas zu zeichnen.

GIF eines fertigen Projekts.

Live-Whiteboard-Demo ansehen

Aufbau

Azure-Dienstname Zweck Vorteile
Azure App Service Stellt die Hostumgebung für die Back-End-Anwendung bereit, die mit Express erstellt wird Vollständig verwaltete Umgebung für Anwendungs-Back-Ends, ohne sich um die Infrastruktur kümmern zu müssen, in der der Code ausgeführt wird
Azure Web PubSub Bietet latenzarme, bidirektionale Datenaustauschkanäle zwischen Back-End-Anwendung und Clients Reduziert die Serverlast drastisch, indem der Server von der Verwaltung persistenter WebSocket-Verbindungen befreit und gleichzeitige Clientverbindungen mit nur einer Ressource auf 100 K skaliert wird

Architekturdiagramm der Whiteboard-App für die Zusammenarbeit.

Voraussetzungen

Eine ausführliche Erläuterung des Datenflusses finden Sie am Ende dieser Anleitung, da wir uns zunächst auf das Erstellen und Bereitstellen der Whiteboard-App konzentrieren.

Um die schrittweise Anleitung zu befolgen, müssen Sie

Erstellen von Azure-Ressourcen mit der Azure CLI

1. Anmelden

  1. sich bei der Azure CLI anmelden, indem Sie den folgenden Befehl ausführen.

    az login

  2. eine Ressourcengruppe in Azure erstellen.

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

2. Erstellen einer Web-App-Ressource

  1. Erstellen Sie einen App Service-Tarif vom Typ „Free“.

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

  2. Erstellen einer Web-App-Ressource

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

3. Erstellen einer Web PubSub-Ressource

  1. Erstellen Sie eine Web PubSub-Ressource.

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

  2. Zeigen Sie den Wert von primaryConnectionString an, und speichern Sie ihn für die spätere Verwendung.

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

Abrufen des Anwendungscodes

Führen Sie den folgenden Befehl aus, um eine Kopie des Anwendungscodes abzurufen. Eine ausführliche Erläuterung des Datenflusses finden Sie am Ende dieser Schrittanleitung.

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

Bereitstellen der Anwendung in App Service

  1. App Service unterstützt viele Bereitstellungsworkflows. In dieser Anleitung stellen wir ein ZIP-Paket bereit. Führen Sie die folgenden Befehle aus, um die ZIP-Datei vorzubereiten.

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

  2. Verwenden Sie den folgenden Befehl, um sie in Azure App Service bereitzustellen.

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

  3. Legen Sie die Azure Web PubSub-Verbindungszeichenfolge in den Anwendungseinstellungen fest. Verwenden Sie den Wert von primaryConnectionString, den Sie in einem früheren Schritt gespeichert haben.

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

Konfigurieren von Upstream Servern für die Verarbeitung von Ereignissen aus Web PubSub

Wenn ein Client eine Nachricht an den Web PubSub-Dienst sendet, sendet der Dienst eine HTTP-Anforderung an einen von Ihnen angegebenen Endpunkt. Dieser Mechanismus verwendet Ihren Back-End-Server, um Nachrichten weiter zu verarbeiten, z. B. wenn Sie Nachrichten in einer Datenbank Ihrer Wahl beibehalten können.

Wie bei HTTP-Anforderungen muss der Web PubSub-Dienst wissen, wo der Anwendungsserver zu finden ist. Da die Back-End-Anwendung jetzt in App Service bereitgestellt wird, erhalten Sie einen öffentlich zugänglichen Domänennamen für sie.

  1. Zeigen Sie den Wert von name an, und speichern Sie ihn irgendwo.

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

  2. Der Endpunkt, den wir auf dem Back-End-Server verfügbar machen möchten, ist /eventhandler und der hub-Name für die Whiteboard-App "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"

Wichtig

url-template hat drei Teile: Protokoll + Hostname + Pfad, welcher in unserem Fall ist https://<The hostname of your Web App resource>/eventhandler.

Anzeigen der Whiteboard-App in einem Browser

Navigieren Sie nun zu Ihrem Browser, und besuchen Sie Ihre bereitgestellte Web-App. Es wird empfohlen, mehrere Browserregisterkarten zu öffnen, damit Sie den Echtzeitaspekt der Zusammenarbeit in der App erleben können. Oder besser: Geben Sie den Link für einen Kollegen oder Freund frei.

Datenfluss

Übersicht

Im Abschnitt Datenfluss erfahren Sie mehr über die Erstellung der Whiteboard-App. Die Whiteboard-App verfügt über zwei Transportmethoden.

  • HTTP-Dienst, der als Express-App geschrieben und auf App Service gehostet wird.
  • WebSocket-Verbindungen, die von Azure Web PubSub verwaltet werden.

Durch die Verwendung von Azure Web PubSub zum Verwalten von WebSocket-Verbindungen wird die Auslastung der Web-App verringert. Abgesehen von der Authentifizierung des Clients und der Bereitstellung von Bildern ist die Web App nicht an der Synchronisierung von Zeichnungsaktivitäten beteiligt. Die Zeichnungsaktivitäten eines Clients werden direkt an Web PubSub und an alle Clients in einer Gruppe gesendet.

Zu jedem Zeitpunkt kann es mehr als eine Clientzeichnung geben. Wenn die Web-App WebSocket-Verbindungen selbst verwalten sollte, musste jede Zeichnungsaktivität an alle anderen Clients übertragen werden. Der riesige Datenverkehr und die Verarbeitung wären eine große Belastung für den Server.

Der mit Vue erstellte Client sendet eine HTTP-Anforderung für ein Clientzugriffstoken an einen /negotiate-Endpunkt. Die Back-End-Anwendung ist eine Express-App und wird als Web-App mit Azure App Service gehostet.

Screenshot des ersten Schritts des App-Datenflusses.

Wenn die Back-End-Anwendung das Clientzugriffstoken erfolgreich an den verbindenden Client zurückgibt, wird dieses vom Client verwendet, um eine WebSocket-Verbindung mit Azure Web PubSub herzustellen.

Screenshot des zweiten Schritts des App-Datenflusses.

Wenn der Handshake mit Azure Web PubSub erfolgreich ist, wird der Client einer Gruppe namens „draw“ hinzugefügt und die Nachrichten abonniert, die in dieser Gruppe veröffentlicht werden. Außerdem erhält der Client die Berechtigung, Nachrichten an die draw-Gruppe zu senden.

Screenshot des dritten Schritts des App-Datenflusses.

Hinweis

Um diese Schrittanleitung auf das Wesentliche zu beschränken, werden alle verbindenden Clients der gleichen Gruppe namens „draw“ hinzugefügt und erhalten die Berechtigung, Nachrichten an diese Gruppe zu senden. Um Clientverbindungen auf granularer Ebene zu verwalten, sehen Sie sich alle Verweise der von Azure Web PubSub bereitgestellten APIs an.

Azure Web PubSub benachrichtigt die Back-End-Anwendung, die über einen Client verbunden ist. Die Back-End-Anwendung verarbeitet das onConnected-Ereignis, indem sie sendToAll() mit einer Payload der letzten Anzahl verbundener Clients aufruft.

Screenshot des vierten Schritts des App-Datenflusses.

Hinweis

Es ist wichtig zu beachten, dass bei einer großen Anzahl von Onlinebenutzern in der draw-Gruppe bei einem einzelnen Netzwerkaufruf von der Back-End-Anwendung alle Onlinebenutzer benachrichtigt werden, dass gerade ein neuer Benutzer beigetreten ist. Dies reduziert die Komplexität und Last der Back-End-Anwendung drastisch.

Sobald ein Client eine dauerhafte Verbindung mit Web PubSub herstellt, sendet er eine HTTP-Anforderung an die Back-End-Anwendung, um die neuesten Shape- und Hintergrunddaten unter /diagram abzurufen. Ein HTTP-Dienst, der auf App Service gehostet wird, kann mit Web PubSub kombiniert werden. App Service kümmert sich um die Bereitstellung von HTTP-Endpunkten, während Web PubSub die Verwaltung von WebSocket-Verbindungen übernimmt.

Screenshot des fünften Schritts des App-Datenflusses.

Nun haben die Clients und die Back-End-Anwendung zwei Möglichkeiten, Daten auszutauschen. Eine ist der herkömmliche HTTP-Anforderung/Antwort-Zyklus und der andere ist der persistente, bidirektionale Kanal über Web PubSub. Die Zeichnungsaktionen, die von einem Benutzer stammen und an alle Benutzer gesendet werden müssen, sobald sie stattfinden, werden über Web PubSub übermittelt. Eine Beteiligung der Back-End-Anwendung ist nicht erforderlich.

Screenshot des sechsten Schritts des App-Datenflusses.

Bereinigen von Ressourcen

Obwohl die Anwendung nur die kostenlosen Tarife beider Dienste verwendet, empfiehlt es sich, Ressourcen zu löschen, wenn Sie sie nicht mehr benötigen. Sie können die Ressourcengruppe zusammen mit den darin enthaltenen Ressourcen mit dem folgenden Befehl löschen:

az group delete 
  --name "whiteboard-group"

Nächste Schritte

Sehen Sie sich weitere Demos an, die mit Web PubSub erstellt wurden.