Procedimentos: criar um quadro colaborativo em tempo real com o Web PubSub para Socket.IO e implementá-lo no Serviço de Aplicações do Azure

Uma nova classe de aplicações está a reimaginar o que pode ser o trabalho moderno. Enquanto o Microsoft Word reúne editores, a Figma reúne designers no mesmo esforço criativo. Esta classe de aplicações baseia-se numa experiência de utilizador que nos faz sentir ligados aos nossos colaboradores remotos. Do ponto de vista técnico, as atividades do utilizador têm de ser sincronizadas entre os ecrãs dos utilizadores com baixa latência.

Descrição Geral

Neste guia de procedimentos, tomamos uma abordagem nativa da cloud e utilizamos os serviços do Azure para criar um quadro colaborativo em tempo real e implementamos o projeto como uma Aplicação Web para Serviço de Aplicações do Azure. A aplicação do quadro é acessível no browser e permite que qualquer pessoa possa desenhar na mesma tela.

Pré-requisitos

Para seguir o guia passo a passo, precisa de

• Uma conta do Azure . Se não tiver uma subscrição do Azure, crie uma conta gratuita do Azure antes de começar.
• A CLI do Azure (versão 2.39.0 ou superior) ou a Cloud Shell do Azure para gerir recursos do Azure.

Criar recursos do Azure com a CLI do Azure

Iniciar sessão

1. Inicie sessão na CLI do Azure ao executar o seguinte comando.

   az login
   

2. Criar um grupo de recursos no Azure.

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

Criar um recurso de Aplicação Web

1. Crie um plano de Serviço de Aplicações gratuito.

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

2. Criar um recurso de Aplicação Web

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

Criar um Web PubSub para Socket.IO

1. Crie um recurso Web PubSub.

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

2. Mostrar e armazenar o valor de primaryConnectionString algures para utilização posterior.

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

Obter o código da aplicação

Execute o seguinte comando para obter uma cópia do código da aplicação.

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

Implementar a aplicação no Serviço de Aplicações

1. Serviço de Aplicações suporta muitos fluxos de trabalho de implementação. Para este guia, vamos implementar um pacote ZIP. Execute os seguintes comandos para instalar e criar o projeto.

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

2. Comprimir num zip

   Utilizar o Bash

   zip -r app.zip *
   

   Utilizar o PowerShell

   Compress-Archive -Path * -DestinationPath app.zip
   

3. Defina a cadeia de ligação Azure Web PubSub nas definições da aplicação. Utilize o valor armazenado primaryConnectionString de um passo anterior.

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

4. Utilize o seguinte comando para implementá-lo no Serviço de Aplicações do Azure.

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

Ver a aplicação do quadro num browser

Agora, aceda ao seu browser e visite a sua Aplicação Web implementada. Normalmente, o URL é https://<webapp-name>.azurewebsites.net . É recomendado ter vários separadores do browser abertos para que possa experimentar o aspeto colaborativo em tempo real da aplicação. Ou melhor, partilhe a ligação com um colega ou amigo.

Passos seguintes

Veja mais exemplos de Socket.IO