Instructies: Een realtime whiteboard voor samenwerking maken met Web PubSub voor Socket.IO en dit implementeren in Azure App Service

Een nieuwe klasse van toepassingen is het opnieuw instellen van wat modern werk zou kunnen zijn. Terwijl Microsoft Word editors samenbrengt, verzamelt Figma ontwerpers die hetzelfde creatieve werk doen. Deze klasse toepassingen bouwt voort op een gebruikerservaring waardoor we ons verbonden voelen met onze externe medewerkers. Vanuit technisch oogpunt moeten de activiteiten van de gebruiker 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 stelt iedereen in staat om op hetzelfde canvas te tekenen.

Vereisten

Als u de stapsgewijze handleiding wilt volgen, hebt u

• Een Azure-account . Als u geen Azure-abonnement hebt, maakt u een gratis Azure-account voordat u begint.
• Azure CLI (versie 2.39.0 of hoger) of Azure Cloud Shell voor het beheren van Azure-resources.

Azure-resources maken met behulp van Azure CLI

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

Een web-app-resource maken

1. Maak een gratis App Service-abonnement.

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

2. Een web-app-resource maken

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

Een Web PubSub maken voor Socket.IO

1. Maak een Web PubSub-resource.

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

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

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

De toepassingscode ophalen

Voer de volgende opdracht uit om een kopie van de toepassingscode op te halen.

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

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 het project te installeren en te bouwen.

   npm install
   npm run build
   
   # bash
   zip -r app.zip *
   
   # Poweshell
   

2. Comprimeren in een zip

   Bash gebruiken

   zip -r app.zip *
   

   PowerShell gebruiken

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

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

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

De whiteboard-app weergeven in een browser

Ga nu naar uw browser en ga naar uw geïmplementeerde web-app. De URL is https://<webapp-name>.azurewebsites.net meestal . 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.

Volgende stappen

Bekijk meer Socket.IO voorbeelden