Migrar um aplicativo Socket.IO auto-hospedado para ser totalmente gerenciado no Azure

Neste artigo, você migra um aplicativo de chat Socket.IO para o Azure usando o Web PubSub para Socket.IO.

Pré-requisitos

Criar um recurso Web PubSub no Socket.IO

1. Acesse o portal do Azure.

2. Pesquise socket.io na barra de pesquisa e selecione Web PubSub para Socket.IO.

3. Selecione um plano e selecione Criar.

   

Migrar o aplicativo

Para o processo de migração neste guia, você usa um aplicativo de chat de exemplo fornecido no site do Socket.IO. Você precisa fazer algumas pequenas alterações no código do lado do servidor e do lado do cliente para concluir a migração.

Lado do Servidor

1. Localize index.js no código do lado do servidor.

2. Adicione o pacote @azure/web-pubsub-socket.io:

   npm install @azure/web-pubsub-socket.io
   

3. Importar o pacote:

   const { useAzureSocketIO } = require("@azure/web-pubsub-socket.io");
   

4. Localize em seu código do lado do servidor em que você criou o servidor Socket.IO e acrescente useAzureSocketIO(...):

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

   const io = require("socket.io")();
   useAzureSocketIO(io, {
       hub: "eio_hub", // The hub name can be any valid string.
       connectionString: process.argv[2]
   });
   

   Importante

   O método useAzureSocketIO é assíncrono e executa etapas de inicialização para se conectar ao Web PubSub. Você poderá usar await useAzureSocketIO(...) ou usar useAzureSocketIO(...).then(...) para garantir que o servidor de aplicativos comece a atender solicitações depois que a inicialização for bem-sucedida.

5. Se você usar as seguintes APIs de servidor, adicione async antes de usá-las, pois elas são assíncronas com o Web PubSub para Socket.IO:

   • server.socketsJoin
   • server.socketsLeave
   • socket.join
   • socket.leave

   Por exemplo, se houver um código como este:

   io.on("connection", (socket) => { socket.join("room abc"); });
   

   Atualize-o para:

   io.on("connection", async (socket) => { await socket.join("room abc"); });
   

   Este exemplo de chat não usa nenhuma dessas APIs. Você não precisa fazer nenhuma alteração.

Lado do cliente

1. Localize o ponto de extremidade para o recurso no portal do Azure.

   

2. Acesse o ./public/main.js no código do lado do cliente.

3. Localize onde o cliente Socket.IO é criado. Substitua seu ponto de extremidade pelo ponto de extremidade Socket.IO no Azure e adicione uma opção path:

   const socket = io("<web-pubsub-for-socketio-endpoint>", {
       path: "/clients/socketio/hubs/eio_hub",
   });