Migrate a self-hosted Socket.IO app to be fully managed on Azure

In this article, you migrate a Socket.IO chat app to Azure by using Web PubSub for Socket.IO.

Prerequisites

Create a Web PubSub for Socket.IO resource

1. Go to the Azure portal.

2. Search for socket.io, and then select Web PubSub for Socket.IO.

3. Select a plan, and then select Create.

   

Migrate the app

For the migration process in this guide, you use a sample chat app provided on Socket.IO's website. You need to make some minor changes to both the server-side and client-side code to complete the migration.

Server side

1. Locate index.js in the server-side code.

2. Add the @azure/web-pubsub-socket.io package:

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

3. Import the package:

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

4. Locate in your server-side code where you created the Socket.IO server, and append useAzureSocketIO(...):

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

   Important

   The useAzureSocketIO method is asynchronous, and it does initialization steps to connect to Web PubSub. You can use await useAzureSocketIO(...) or use useAzureSocketIO(...).then(...) to make sure your app server starts to serve requests after the initialization succeeds.

5. If you use the following server APIs, add async before using them, because they're asynchronous with Web PubSub for Socket.IO:

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

   For example, if there's code like this:

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

   Update it to:

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

   This chat example doesn't use any of those APIs. So you don't need to make any changes.

Client side

1. Find the endpoint to your resource on the Azure portal.

   

2. Go to ./public/main.js in the client-side code.

3. Find where the Socket.IO client is created. Replace its endpoint with the Socket.IO endpoint in Azure, and add a path option:

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