Share via

Vorgehensweise: Erstellen eines Whiteboards für die Zusammenarbeit in Echtzeit mithilfe von Web PubSub für Socket.IO 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.

Animation des Überblicks über das fertiggestellte Projekt.

Voraussetzungen

Um die schrittweise Anleitung zu befolgen, müssen Sie

Erstellen von Azure-Ressourcen mit der Azure CLI

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 "<resource-group-name>"

Erstellen einer Web-App-Ressource

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

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

  2. Erstellen einer Web-App-Ressource

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

Erstellen eines Web PubSub für Socket.IO

  1. Erstellen Sie eine Web PubSub-Ressource.

    az webpubsub create \
  --name "<socketio-name>" \
  --resource-group "<resource-group-name>" \
  --kind SocketIO
  --sku Premium_P1

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

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

Abrufen des Anwendungscodes

Führen Sie den folgenden Befehl aus, um eine Kopie des Anwendungscodes abzurufen.

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

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 das Projekt zu installieren und kompilieren.

    npm install
npm run build

# bash
zip -r app.zip *

# Poweshell

  2. Komprimieren in eine ZIP-Datei

    Verwenden von Bash

    zip -r app.zip *

    Verwenden von PowerShell

    Compress-Archive -Path * -DestinationPath 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 "<resource-group-name>" \
--name "<webapp-name>" \
--setting Web_PubSub_ConnectionString="<primaryConnectionString>"

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

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

Anzeigen der Whiteboard-App in einem Browser

Navigieren Sie nun zu Ihrem Browser, und besuchen Sie Ihre bereitgestellte Web-App. Die URL lautet in der Regel https://<webapp-name>.azurewebsites.net. 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.

Nächste Schritte

Anzeigen weiterer Socket.IO-Beispiele