Procedura: Creare una lavagna collaborativa in tempo reale usando Web PubSub per Socket.IO e distribuirla in Servizio app di Azure

Una nuova classe di applicazioni sta ricreando il lavoro moderno. Mentre Microsoft Word riunisce gli editor, Figma raccoglie designer nello stesso impegno creativo. Questa classe di applicazioni si basa su un'esperienza utente che ci rende connessi ai collaboratori remoti. Dal punto di vista tecnico, le attività dell'utente devono essere sincronizzate tra le schermate degli utenti a una bassa latenza.

Panoramica

In questa guida pratica viene adottato un approccio nativo del cloud e si usano i servizi di Azure per creare una lavagna collaborativa in tempo reale e il progetto viene distribuito come app Web in Servizio app di Azure. L'app whiteboard è accessibile nel browser e consente a chiunque di disegnare sullo stesso canvas.

Prerequisiti

Per seguire la guida dettagliata, è necessario

• Un account Azure . Se non si ha una sottoscrizione di Azure, creare un account Azure gratuito prima di iniziare.
• Interfaccia della riga di comando di Azure (versione 2.39.0 o successiva) o Azure Cloud Shell per gestire le risorse di Azure.

Creare risorse di Azure usando l'interfaccia della riga di comando di Azure

Accedi

1. Accedere all'interfaccia della riga di comando di Azure eseguendo il comando seguente.

   az login
   

2. Creare un gruppo di risorse in Azure.

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

Creare una risorsa app Web

1. Creare un piano di servizio app gratuito.

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

2. Creare una risorsa app Web

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

Creare un pubSub Web per Socket.IO

1. Creare una risorsa PubSub Web.

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

2. Visualizzare e archiviare il valore di primaryConnectionString da qualche parte per usarlo in un secondo momento.

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

Ottenere il codice dell'applicazione

Eseguire il comando seguente per ottenere una copia del codice dell'applicazione.

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

Distribuire l'applicazione in servizio app

1. servizio app supporta molti flussi di lavoro di distribuzione. Per questa guida verrà distribuito un pacchetto ZIP. Eseguire i comandi seguenti per installare e compilare il progetto.

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

2. Comprimere in un zip

   Usare Bash

   zip -r app.zip *
   

   Usare PowerShell

   Compress-Archive -Path * -DestinationPath app.zip
   

3. Impostare la stringa di connessione Web PubSub di Azure nelle impostazioni dell'applicazione. Usare il valore di primaryConnectionString archiviato da un passaggio precedente.

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

4. Usare il comando seguente per distribuirlo in Servizio app di Azure.

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

Visualizzare l'app lavagna in un browser

Passare ora al browser e visitare l'app Web distribuita. L'URL è https://<webapp-name>.azurewebsites.net in genere . È consigliabile aprire più schede del browser in modo da poter sperimentare l'aspetto collaborativo in tempo reale dell'app. O meglio, condividere il collegamento con un collega o un amico.

Passaggi successivi

Vedere altri esempi di Socket.IO