Delen via

Instructies: een realtime samenwerkings whiteboard bouwen met behulp van Azure Web PubSub en dit implementeren in Azure App Service

  • Artikel

Een nieuwe klasse van toepassingen is het opnieuw instellen van wat modern werk zou kunnen zijn. Terwijl Microsoft Word editors samenbrengt, verzamelt Figma ontwerpers voor dezelfde creatieve onderneming. Deze klasse toepassingen bouwt voort op een gebruikerservaring waardoor we ons verbonden voelen met onze externe medewerkers. Vanuit technisch oogpunt moeten de activiteiten van gebruikers met een lage latentie worden gesynchroniseerd tussen de schermen van gebruikers.

Overzicht

In deze handleiding gebruiken we een cloudeigen benadering en gebruiken we Azure-services om een realtime samenwerkings whiteboard te bouwen en implementeren we het project als een web-app voor Azure App Service. De whiteboard-app is toegankelijk in de browser en biedt iedereen de mogelijkheid om op hetzelfde canvas te tekenen.

GIF van voltooid project.

Live whiteboarddemo bekijken

Architectuur

Naam van Azure-service Doel Voordelen
Azure App Service Biedt de hostingomgeving voor de back-endtoepassing, die is gebouwd met Express Volledig beheerde omgeving voor toepassingsback-ends, zonder dat u zich zorgen hoeft te maken over de infrastructuur waarin de code wordt uitgevoerd
Azure Web PubSub Biedt een bidirectioneel gegevensuitwisselingskanaal met lage latentie tussen de back-endtoepassing en clients Vermindert de serverbelasting drastisch door de server te bevrijden van het beheer van permanente WebSocket-verbindingen en schaalt naar 100 K gelijktijdige clientverbindingen met slechts één resource

Architectuurdiagram van de whiteboard-app voor samenwerking.

Vereisten

Aan het einde van deze instructiegids vindt u een gedetailleerde uitleg van de gegevensstroom , omdat we ons eerst gaan richten op het bouwen en implementeren van de whiteboard-app.

Als u de stapsgewijze handleiding wilt volgen, hebt u

Azure-resources maken met behulp van Azure CLI

1. Aanmelden

  1. Meld u aan bij Azure CLI door de volgende opdracht uit te voeren.

    az login

  2. Maak een resourcegroep in Azure.

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

2. Een web-app-resource maken

  1. Maak een gratis App Service-abonnement.

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

  2. Een web-app-resource maken

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

3. Een Web PubSub-resource maken

  1. Maak een Web PubSub-resource.

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

  2. De waarde van primaryConnectionString ergens weergeven en opslaan voor later gebruik.

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

De toepassingscode ophalen

Voer de volgende opdracht uit om een kopie van de toepassingscode op te halen. Gedetailleerde uitleg van de gegevensstroom vindt u aan het einde van deze handleiding.

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

De toepassing implementeren in App Service

  1. App Service ondersteunt veel implementatiewerkstromen. Voor deze handleiding gaan we een ZIP-pakket implementeren. Voer de volgende opdrachten uit om de ZIP voor te bereiden.

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

  2. Gebruik de volgende opdracht om deze te implementeren in Azure App Service.

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

  3. Stel Azure Web PubSub in connection string in de toepassingsinstellingen. Gebruik de waarde van primaryConnectionString die u hebt opgeslagen uit een eerdere stap.

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

Upstream-server configureren voor het afhandelen van gebeurtenissen die afkomstig zijn van Web PubSub

Wanneer een client een bericht verzendt naar de Web PubSub-service, verzendt de service een HTTP-aanvraag naar een eindpunt dat u opgeeft. Dit mechanisme wordt door uw back-endserver gebruikt om berichten verder te verwerken, bijvoorbeeld als u berichten kunt behouden in een database naar keuze.

Net als bij HTTP-aanvragen moet de Web PubSub-service weten waar de toepassingsserver moet worden gevonden. Omdat de back-endtoepassing nu is geïmplementeerd in App Service, krijgen we er een openbaar toegankelijke domeinnaam voor.

  1. De waarde van name ergens weergeven en opslaan.

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

  2. Het eindpunt dat we hebben besloten weer te geven op de back-endserver is /eventhandler en de naam voor de hub 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"

Belangrijk

url-template bestaat uit drie delen: protocol + hostnaam + pad, wat in ons geval is https://<The hostname of your Web App resource>/eventhandler.

De whiteboard-app weergeven in een browser

Ga nu naar uw browser en ga naar uw geïmplementeerde web-app. Het is raadzaam om meerdere browsertabbladen te openen, zodat u het realtime samenwerkingsaspect van de app kunt ervaren. Of beter, deel de koppeling met een collega of vriend.

Gegevensstroom

Overzicht

In de sectie Gegevensstroom wordt dieper ingegaan op de wijze waarop de whiteboard-app is gebouwd. De whiteboard-app heeft twee transportmethoden.

  • HTTP-service geschreven als een Express-app en gehost op App Service.
  • WebSocket-verbindingen die worden beheerd door Azure Web PubSub.

Door Azure Web PubSub te gebruiken voor het beheren van WebSocket-verbindingen, wordt de belasting van de web-app verminderd. Afgezien van het verifiëren van de client en het leveren van afbeeldingen, heeft de web-app geen betrekking op het synchroniseren van tekenactiviteiten. De tekenactiviteiten van een client worden rechtstreeks verzonden naar Web PubSub en uitgezonden naar alle clients in een groep.

Op elk moment kan er meer dan één clienttekening zijn. Als de web-app de WebSocket-verbindingen zelfstandig zou beheren, moest elke tekenactiviteit worden uitgezonden naar alle andere clients. Het enorme verkeer en de verwerking zijn een grote belasting voor de server.

De client, gebouwd met Vue, maakt een HTTP-aanvraag voor een clienttoegangstoken naar een eindpunt /negotiate. De back-endtoepassing is een Express-app en wordt gehost als een web-app met behulp van Azure App Service.

Schermopname van stap één van de app-gegevensstroom.

Wanneer de back-endtoepassing het clienttoegangstoken retourneert naar de verbindingsclient, gebruikt de client dit om een WebSocket-verbinding met Azure Web PubSub tot stand te brengen.

Schermopname van stap twee van de app-gegevensstroom.

Als de handshake met Azure Web PubSub is geslaagd, wordt de client toegevoegd aan een groep met de naam draw, die zich in feite abonneert op berichten die naar deze groep zijn gepubliceerd. De client krijgt ook de machtiging om berichten naar de draw groep te verzenden.

Schermopname van stap drie van de app-gegevensstroom.

Notitie

Om deze instructiegids gefocust te houden, worden alle verbindende clients toegevoegd aan dezelfde groep met de naam draw en krijgen ze toestemming om berichten naar deze groep te verzenden. Als u clientverbindingen op gedetailleerd niveau wilt beheren, raadpleegt u de volledige verwijzingen van de API's van Azure Web PubSub.

Azure Web PubSub meldt de back-endtoepassing die een client heeft verbonden. De back-endtoepassing verwerkt de onConnected gebeurtenis door de sendToAll()aan te roepen met een nettolading van het meest recente aantal verbonden clients.

Schermopname van stap vier van de app-gegevensstroom.

Notitie

Het is belangrijk om te weten dat als er een groot aantal onlinegebruikers in de draw groep is, met één netwerkaanroep vanuit de back-endtoepassing, alle onlinegebruikers een melding krijgen dat een nieuwe gebruiker zojuist lid is geworden. Dit vermindert de complexiteit en belasting van de back-endtoepassing drastisch.

Zodra een client een permanente verbinding tot stand brengt met Web PubSub, wordt er een HTTP-aanvraag naar de back-endtoepassing verzonden om de meest recente shape en achtergrondgegevens op te halen op /diagram. Een HTTP-service die wordt gehost op App Service kan worden gecombineerd met Web PubSub. App Service zorgt voor het bedienen van HTTP-eindpunten, terwijl Web PubSub zorgt voor het beheren van WebSocket-verbindingen.

Schermopname van stap vijf van de app-gegevensstroom.

De clients en de back-endtoepassing hebben nu twee manieren om gegevens uit te wisselen. De ene is de conventionele HTTP-aanvraag-antwoordcyclus en de andere is het permanente, bidirectionele kanaal via Web PubSub. De tekenacties, die afkomstig zijn van één gebruiker en naar alle gebruikers moeten worden uitgezonden zodra deze worden uitgevoerd, worden geleverd via Web PubSub. Hiervoor is geen betrokkenheid van de back-endtoepassing vereist.

Schermopname van stap zes van de app-gegevensstroom.

Resources opschonen

Hoewel de toepassing alleen de gratis lagen van beide services gebruikt, is het raadzaam om resources te verwijderen als u deze niet meer nodig hebt. U kunt de resourcegroep samen met de resources erin verwijderen met behulp van de volgende opdracht:

az group delete 
  --name "whiteboard-group"

Volgende stappen

Bekijk meer demo's die zijn gebouwd met Web PubSub