Anvisningar: Skapa en gemensam whiteboard i realtid med Web PubSub för Socket.IO och distribuera den till Azure App Service

En ny klass med program är att återskapa vad modernt arbete kan vara. Medan Microsoft Word samlar redaktörer samlar Figma designers på samma kreativa strävan. Den här programklassen bygger på en användarupplevelse som gör att vi känner oss anslutna till våra fjärranslutna medarbetare. Ur teknisk synvinkel måste användarens aktiviteter synkroniseras mellan användarnas skärmar med kort svarstid.

Översikt

I den här instruktionsguiden använder vi en molnbaserad metod och använder Azure-tjänster för att skapa en samarbetsbaserad whiteboard i realtid och distribuerar projektet som en webbapp för att Azure App Service. Whiteboard-appen är tillgänglig i webbläsaren och gör att vem som helst kan rita på samma arbetsyta.

Förutsättningar

För att kunna följa den stegvisa guiden behöver du

• Ett Azure-konto . Om du inte har en Azure-prenumeration kan du skapa ett kostnadsfritt Azure-konto innan du börjar.
• Azure CLI (version 2.39.0 eller senare) eller Azure Cloud Shell för att hantera Azure-resurser.

Skapa Azure-resurser med Hjälp av Azure CLI

Logga in

1. Logga in på Azure CLI genom att köra följande kommando.

   az login
   

2. Skapa en resursgrupp i Azure.

   az group create \
     --location "westus" \  
     --name "<resource-group-name>"
   

Skapa en webbappresurs

1. Skapa en kostnadsfri App Service plan.

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

2. Skapa en webbappresurs

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

Skapa en pubsub för Socket.IO

1. Skapa en Web PubSub-resurs.

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

2. Visa och lagra värdet primaryConnectionString för någonstans för senare användning.

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

Hämta programkoden

Kör följande kommando för att hämta en kopia av programkoden.

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

Distribuera programmet till App Service

1. App Service stöder många distributionsarbetsflöden. I den här guiden ska vi distribuera ett ZIP-paket. Kör följande kommandon för att installera och skapa projektet.

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

2. Komprimera till en zip

   Använda Bash

   zip -r app.zip *
   

   Använd PowerShell

   Compress-Archive -Path * -DestinationPath app.zip
   

3. Ange Anslutningssträng för Azure Web PubSub i programinställningarna. Använd värdet primaryConnectionString för du lagrade från ett tidigare steg.

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

4. Använd följande kommando för att distribuera det till Azure App Service.

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

Visa whiteboard-appen i en webbläsare

Gå nu till webbläsaren och besök den distribuerade webbappen. URL:en är https://<webapp-name>.azurewebsites.net vanligtvis . Vi rekommenderar att du har flera webbläsarflikar öppna så att du kan uppleva appens samarbetsaspekt i realtid. Eller bättre, dela länken med en kollega eller vän.

Nästa steg

Kolla in fler Socket.IO exempel