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

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

Pré-requisitos

Criar um Web PubSub para Socket.IO recurso

1. Aceda ao portal do Azure.

2. Procure socket.io e, em seguida, selecione Web PubSub para Socket.IO.

3. Selecione um plano e, em seguida, 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 @azure/web-pubsub-socket.io pacote:

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

3. Importe o pacote:

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

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

   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 .

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

   Importante

   O useAzureSocketIO método é assíncrono e executa etapas de inicialização para se conectar ao Web PubSub. Você pode usar await useAzureSocketIO(...) ou usar useAzureSocketIO(...).then(...) para garantir que seu 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, porque elas são assíncronas com o Web PubSub para Socket.IO:

   • server.socketsJunte-se
   • 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. Portanto, você não precisa fazer nenhuma alteração.

Lado do cliente

1. Encontre o ponto de extremidade do seu recurso no portal do Azure.

   

2. Vá para ./public/main.js no código do lado do cliente.

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

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