Compilar um aplicativo de chat Node.js com Socket.IO no Serviço de Nuvem do Azure (clássico)

Dica

O Socket.IO agora tem suporte nativo no Azure. Escalar horizontalmente um aplicativo Socket.IO para lidar com milhares de conexões costuma ser frustrante. Agora que o Azure oferece suporte nativo ao Socket.IO, ele pode gerenciar a escalabilidade e a disponibilidade. Saiba mais sobre como obter qualquer aplicativo Socket.IO em execução no Azure com algumas linhas de código.

Importante

Os Serviços de Nuvem (clássicos) estão obsoletos para todos os clientes desde 1º de setembro de 2024. Todas as implantações em execução existentes serão interrompidas e desligadas pela Microsoft e os dados serão permanentemente perdidos a partir de outubro de 2024. Novas implantações devem usar o novo modelo de implantação baseado no Azure Resource Manager Azure Cloud Services (suporte estendido).

O Socket.IO fornece comunicação em tempo real entre seu servidor e clientes do Node.js. Este tutorial explica como hospedar um aplicativo de bate-papo baseado em socket.IO no Azure. Para obter mais informações sobre Socket.IO, consulte socket.io.

A captura de tela a seguir mostra o aplicativo concluído:

![Uma janela do navegador exibindo o serviço hospedado no Azure][concluído-app]

Pré-requisitos

Verifique se os seguintes produtos e versões estão instalados para concluir com êxito o exemplo deste artigo:

Criar um projeto de Serviço de Nuvem

As etapas a seguir criam o projeto de serviço de nuvem que hospeda o aplicativo Socket.IO.

  1. No Menu Iniciar ou tela inicial, pesquise pelo Windows PowerShell. Por fim, clique com o botão direito do mouse no Windows PowerShell e selecione Executar como Administrador.

    Ícone do Azure PowerShell

  2. Crie um diretório chamado c:\node.

    PS C:\> md node
    
  3. Mude o diretório para c:\node

    PS C:\> cd node
    
  4. Insira os seguintes comandos para criar uma nova solução chamada chatapp e uma função de trabalho chamada WorkerRole1:

    PS C:\node> New-AzureServiceProject chatapp
    PS C:\Node> Add-AzureNodeWorkerRole
    

    Você verá a seguinte resposta:

    A saída dos cmdlets

Baixar o exemplo de chat

Para este projeto, usamos o exemplo de chat do [repositório GitHub Socket.IO]. Execute as seguintes etapas para baixar o exemplo e adicioná-lo ao projeto que você criou anteriormente.

  1. Crie uma cópia local do repositório usando o botão Clonar . Você também pode usar o botão ZIP para baixar o projeto.

    Uma exibição https://github.com/LearnBoost/socket.io/tree/master/examples/chatda janela do navegador, com o ícone de download zip realçado

  2. Navegue pela estrutura de diretório do repositório local até chegar ao diretório examples\chat . Copie o conteúdo deste diretório para o diretório C:\node\chatapp\WorkerRole1 criado anteriormente.

    Explorer, exibindo o conteúdo do diretório examples\chat extraído de um arquivo

    Os itens realçados na captura de tela anterior são os arquivos copiados do diretório examples\chat

  3. No diretório C:\node\chatapp\WorkerRole1 , exclua o arquivo server.js e renomeie o arquivo app.js para server.js. Esta etapa remove o arquivo server.js padrão criado anteriormente pelo cmdlet Add-AzureNodeWorkerRole e o substitui pelo arquivo de aplicativo do exemplo de chat.

Modificar o Server.js e instalar os módulos

Antes de testar o aplicativo no emulador do Microsoft Azure, é necessário fazer algumas modificações secundárias. Execute as seguintes etapas para o arquivo server.js:

  1. Abra o arquivo server.js no Visual Studio ou em qualquer editor de texto.

  2. Localize a seção Dependências do Módulo no início do server.js e altere a linha que contém sio = require('.. //.. lib//socket.io') para sio = require('socket.io') da seguinte maneira:

    var express = require('express')
      , stylus = require('stylus')
      , nib = require('nib')
    //, sio = require('..//..//lib//socket.io'); //Original
      , sio = require('socket.io');                //Updated
      var port = process.env.PORT || 3000;         //Updated
    
  3. Para garantir que o aplicativo ouça na porta correta, abra server.js no Bloco de Notas ou no editor favorito e altere a seguinte linha substituindo 3000 por process.env.port da seguinte maneira:

    //app.listen(3000, function () {            //Original
    app.listen(process.env.port, function () {  //Updated
      var addr = app.address();
      console.log('   app listening on http://' + addr.address + ':' + addr.port);
    });
    

Depois de salvar as alterações no server.js, use as seguintes etapas para instalar os módulos necessários e teste o aplicativo no emulador do Azure:

  1. No Azure PowerShell, altere os diretórios para o diretório C:\node\chatapp\WorkerRole1 e use o seguinte comando para instalar os módulos exigidos por este aplicativo:

    PS C:\node\chatapp\WorkerRole1> npm install
    

    Esse comando instala os módulos listados no arquivo package.json. Após a conclusão do comando, você deverá ver uma saída semelhante à seguinte captura de tela:

    A saída do comando de instalação do npm

  2. Como esse exemplo originalmente fazia parte do repositório GitHub Socket.IO e fazia referência direta à biblioteca do Socket.IO pelo caminho relativo, o Socket.IO não era referenciado no arquivo package.json, portanto, precisamos instalá-lo emitindo o comando a seguir:

    PS C:\node\chatapp\WorkerRole1> npm install socket.io --save
    

Testar e implantar

  1. Inicie o emulador emitindo o comando a seguir:

    PS C:\node\chatapp\WorkerRole1> Start-AzureEmulator -Launch
    

    Observação

    Se você encontrar problemas ao iniciar o emulador, por exemplo: Start-AzureEmulator: ocorreu um erro inesperado. Detalhes: encontrado um erro inesperado O objeto de comunicação, System.ServiceModel.Channels.ServiceChannel, não pode ser usado para comunicação porque está no estado Com falha.

    Reinstale o AzureAuthoringTools v 2.7.1 e o AzureComputeEmulator v 2.7 – A versão deve ser correspondente.

  2. Abra um navegador e navegue até http://127.0.0.1.

  3. Quando a janela do navegador for aberta, digite um apelido e, em seguida, pressione enter. Essa etapa permite que você poste mensagens como um apelido específico. Para testar a funcionalidade de vários usuários, abra mais janelas do navegador usando o mesma URL e insira apelidos diferentes.

    Duas janelas do navegador exibindo mensagens de chat de User1 e User2

  4. Depois de testar o aplicativo, pare o emulador, emitindo o comando a seguir:

    PS C:\node\chatapp\WorkerRole1> Stop-AzureEmulator
    
  5. Para implantar o aplicativo no Azure, use o cmdlet Publish-AzureServiceProject . Por exemplo:

    PS C:\node\chatapp\WorkerRole1> Publish-AzureServiceProject -ServiceName mychatapp -Location "East US" -Launch
    

    Importante

    Use um nome exclusivo, caso contrário, haverá falha no processo de publicação. Depois que a implantação for concluída, o navegador será aberto e navegará para o serviço implantado.

    Se você receber um erro informando que o nome da assinatura fornecido não existe no perfil de publicação importado, baixe e importe o perfil de publicação para sua assinatura antes de implantar no Azure. Consulte a seção Implantando o aplicativo no Azure do Build e implante um aplicativo Node.js em um Serviço de Nuvem do Azure

    ![Uma janela do navegador exibindo o serviço hospedado no Azure][concluído-app]

    Observação

    Se você receber um erro informando que o nome da assinatura fornecido não existe no perfil de publicação importado, baixe e importe o perfil de publicação para sua assinatura antes de implantar no Azure. Consulte a seção Implantando o aplicativo no Azure do Build e implante um aplicativo Node.js em um Serviço de Nuvem do Azure

Seu aplicativo agora está sendo executado no Azure e pode retransmitir mensagens de chat entre diferentes clientes usando o Socket.IO.

Observação

Para simplificar, este exemplo é limitado a chat entre usuários conectados à mesma instância. Isso significa que se o serviço de nuvem criar duas instâncias de função de trabalho, os usuários só poderão conversar com outros usuários conectados à mesma instância de função de trabalho. Para dimensionar o aplicativo para trabalhar com várias instâncias de função, você pode usar uma tecnologia, como o Service Bus para compartilhar o estado do armazenamento do Socket.IO entre instâncias. Para obter exemplos, consulte os exemplos de uso das Filas do Barramento de Serviço e Tópicos no repositório GitHub do Azure SDK para Node.js.

Próximas etapas

Neste tutorial, você aprendeu a criar um aplicativo de chat básico hospedado em um Serviço de Nuvem do Azure. Para saber como hospedar esse aplicativo em um site do Azure, consulte Criar um aplicativo de chat Node.js com Socket.IO em um site do Azure.

Para obter mais informações, consulte também o Centro de Desenvolvedores doNode.js.