DEV Community

Kevin Guo for Microsoft Azure

Posted on • Edited on

Socket.IO on Azure

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

We have been conducting user studies with Socket.IO users for the past few months and had the 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 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.

Architecture of how Socket.IO on Azure works

Hosting 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.
  • Some familiarity with the Socket.IO library.

Create a Socket.IO resource on Azure portal

Head over to Azure portal and search for “socket.io”.

Screenshot of creating Socket.IO resource on Azure

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

Create a Node project and install the 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
Enter fullscreen mode Exit fullscreen mode

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"
    })
});
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

Run the app

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

// Run client
node client.js "<web-pubsub-endpoint>"
Enter fullscreen mode Exit fullscreen mode

Additional resources

Overview of Web PubSub for Socket.IO
How to migrate a self-hosted Socket.IO to be fully managed on Azure

Top comments (0)