Blog Post

Apps on Azure Blog
3 MIN READ

Socket.IO support on Azure

kevinguo's avatar
kevinguo
Icon for Microsoft rankMicrosoft
Aug 24, 2023

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 

 

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

 

Updated Aug 24, 2023
Version 2.0
  • CodeTheCat's avatar
    CodeTheCat
    Copper Contributor

    Hello to all, I'm trying to switch from a self hosted Socket.IO server (on Node app on Azure ACA) to Azure Web PubSub for Socket.IO.

    I'm facing problems to connect my Arduino devices to the server: I always get an HTTP error 400 (the log message is RX:HTTP/1.1 400 Bad Request).

     

    The connection worked fine on the hosted server.

    As always, I'm using the code:

     

    socketIO.begin("xxx.webpubsub.azure.com", 443, "/clients/socketio/hubs/hhh");
    
    socketIO.onEvent(eventHandler);


    and I tried also the follow code, but no way:

            String path = "/clients/socketio/hubs/hhh/?EIO=4";
            wsClient->setExtraHeaders("Connection:Upgrade");
            wsClient->setExtraHeaders("Upgrade:websocket");
            wsClient->setExtraHeaders("Sec-WebSocket-Extensions:permessage-deflate; client_max_window_bits");
            wsClient->setExtraHeaders(("hear-auth:" + accessToken).c_str());
    
            // try ever 1000 again if connection has failed
            wsClient->setReconnectInterval(500);
    
            //    event handler
            wsClient->onEvent(this->webSocketEvent);
            Serial.println("Socket.io host is: '" + socketServerUrl + "', path is: " + path);
            wsClient->begin(socketServerUrl.c_str(), 443, path.c_str());

     

    Do you have some suggestions? Thanks !!