Partilhar via

Como fazer: Criar um quadro de comunicações colaborativo em tempo real usando o Web PubSub para Socket.IO e implantá-lo no Serviço de Aplicativo do Azure

Uma nova classe de aplicações está a reimaginar o que poderia ser o trabalho moderno. Enquanto o Microsoft Word reúne editores, Figma reúne designers na mesma empreitada criativa. 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 usuário precisam ser sincronizadas entre as telas dos usuários em baixa latência.

Importante

As cadeias de conexão brutas aparecem neste artigo apenas para fins de demonstração.

Uma cadeia de conexão inclui as informações de autorização necessárias para seu aplicativo acessar o serviço Azure Web PubSub. A chave de acesso dentro da cadeia de conexão é semelhante a uma senha de root para o seu serviço. Em ambientes de produção, proteja sempre as suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceCliento .

Evite distribuir chaves de acesso para outros usuários, codificá-las ou salvá-las em qualquer lugar em texto simples acessível a outras pessoas. Rode as chaves se acreditar que podem ter sido comprometidas.

Descrição geral

Neste guia de instruções, adotamos uma abordagem nativa da nuvem e usamos os serviços do Azure para criar um quadro de comunicações colaborativo em tempo real e implantamos o projeto como um Aplicativo Web no Serviço de Aplicativo do Azure. O aplicativo de quadro branco é acessível no navegador e permite que qualquer pessoa possa desenhar na mesma tela.

Animação da visão geral do projeto concluído.

Pré-requisitos

Para seguir o guia passo-a-passo, você precisa

  • Uma conta do Azure. Se você não tiver uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.
  • CLI do Azure (versão 2.39.0 ou superior) ou Azure Cloud Shell para gerenciar recursos do Azure.

Criar recursos do Azure usando a CLI do Azure

Iniciar sessão

  1. Entre na CLI do Azure executando o seguinte comando.

    az login

  2. Crie um grupo de recursos no Azure.

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

Criar um recurso de aplicativo Web

  1. Crie um plano gratuito do Serviço de Aplicativo.

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

  2. Criar um recurso de aplicativo 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 algum lugar para uso posterior.

    As cadeias de conexão brutas aparecem neste artigo apenas para fins de demonstração. Em ambientes de produção, proteja sempre as suas chaves de acesso. Use o Azure Key Vault para gerenciar e girar suas chaves com segurança e proteger sua conexão com WebPubSubServiceCliento .

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

Obter o código do aplicativo

Execute o seguinte comando para obter uma cópia do código do aplicativo.

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

Implantar o aplicativo no Serviço de Aplicativo

  1. O Serviço de Aplicativo oferece suporte a muitos fluxos de trabalho de implantação. Para este guia, vamos implantar um pacote ZIP. Execute os seguintes comandos para instalar e compilar o projeto.

    npm install
npm run build

# bash
zip -r app.zip *

# Powershell

  2. Comprimir num fecho

    Use Bash

    zip -r app.zip *

    Utilizar o PowerShell

    Compress-Archive -Path * -DestinationPath app.zip

  3. Defina a cadeia de conexão Azure Web PubSub nas configurações do aplicativo. Use o valor de primaryConnectionString você armazenado de uma etapa anterior.

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

  4. Use o comando a seguir para implantá-lo no Serviço de Aplicativo do Azure.

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

Exibir o aplicativo de quadro de comunicações em um navegador

Agora vá para o seu navegador e visite seu aplicativo Web implantado. O url geralmente é https://<webapp-name>.azurewebsites.net . Recomenda-se ter várias abas do navegador abertas para que você possa experimentar o aspeto colaborativo em tempo real do aplicativo. Ou melhor, compartilhe o link com um colega ou amigo.

Próximos passos

Confira mais exemplos de Socket.IO