Socket.IO support on Azure

[kevinguo]

Socket.IO powers a variety of real-time applications.

We have been conducting user study with Socket.IO users for the past few months and had to chance to meet the core maintainer of the open-source project. We were pleasantly surprised by the variety of applications built using Socket.IO, from identity management to robotics, not just chat apps. 

Scaling out Socket.IO apps can be frustrating for developers.

Overwhelmingly, users reported their love of the “intuitive APIs” and how easy it is to get productive with the library once they get over the initial learning curve. However, scaling out a Socket.IO app is where the most frustration and difficulty lie. Developers would much rather focus on building real-time experiences than developing and maintaining an “adapter” component like Redis. 

Host Soket.IO app on Azure for simplified architecture, scalability and 99.9%+ uptime. 

With the input from the open-source community we brought support for Socket.IO on Azure. Socket.IO developers can continue using the familiar APIs they come to love from Socket.IO and let Azure handle scalability and availability. This means developers no longer need an "adapter" component.  The Socket.IO server communicates with an Azure service and the Azure service fans out messages. The app architecture is simplified and more robust. See the diagram below. To see the full benefits of an Azure-managed Socket.IO app over a self-host approach, read this article. 

 

Migrate a Socket.IO app to Azure takes only a few lines of code.

Getting a Socket.IO app running locally to Azure requires only a few lines of code change. The following sections will walk you through how to host a simple chat app built with Socket.IO on Azure. 

 

What you need 

To follow the steps, you will need 

• An Azure account with an active subscription. If you don't have one, you can [create a free account] (https://azure.microsoft.com/free/).
• Some familiarity with Socket.IO library.  

 

Create a Socket.IO resource on Azure portal

Head over to Azure portal and search for "socket.io".

Note that the support for Socket.IO is provided through an Azure service called Web PubSub.

Create a Node project and install required packages

Note that beyond "socket.io-client" package, we also need "@azure/web-pubsub-socket.io". 

mkdir chatapp
cd chatapp
npm init
npm install @azure/web-pubsub-socket.io socket.io-client

 

Write server-side code

/* server.js */
// Import required packages
const { Server } = require("socket.io");
const { useAzureSocketIO } = require("@azure/web-pubsub-socket.io");

// Configure connection with the Azure service
const wpsOptions = {
    hub: "eio_hub", // The hub name can be any valid string.
    connectionString: process.argv[2] || process.env.WebPubSubConnectionString
}

// Create a Socket.IO server supported by Azure
let io = new Server(3000);
useAzureSocketIO(io, wpsOptions);

// Write message passing logic using Socket.IO's APIs.
// This code snippet is taken from Socket.IO's website and should be familiar to Socket.IO users.
io.on("connection", (socket) => {
    // Send a message to the client
    socket.emit("hello", "world");

    // Receive a message from the client
    socket.on("howdy", (arg) => {
        console.log(arg);   // prints "stranger"
    })
});

Write client-side code

/* client.js */
const io = require("socket.io-client");

const webPubSubEndpoint = process.argv[2] || "<web-pubsub-socketio-endpoint>";
const socket = io(webPubSubEndpoint, {
    path: "/clients/socketio/hubs/eio_hub",
});

// Receives a message from the server
socket.on("hello", (arg) => {
    console.log(arg);
});

// Sends a message to the server
socket.emit("howdy", "stranger")

Run the app

// Run server
node server.js "<web-pubsub-connection-string>"

// Run client
node client.js "<web-pubsub-endpoint>"

 

Additional resources

Overview of Web PubSub for Socket.IO | Microsoft Learn

How to migrate a self-hosted Socket.IO to be fully managed on Azure | Microsoft Learn