Build real-time application with lightweight server and Azure Web PubSub service

[yan_jin]

With the growth of internet, the demands of real-time is also expanded to web application to achieve live and synchronous interaction with the world. The data must be efficiently processed and delivered to produce a responsive, real time experience, for example cross platforms chatting application beside the live video, group collaboration in remote education, live dashboard for IoT, instant notification and alert for IT systems, and so on.

The Azure Web PubSub service (AWPS) could help you build real-time web application easily with large scale and high availability and focus on your own business instead of infrastructure. This service enables you to build the real-time web application based on WebSocket technology and publish-subscribe pattern. It enables an extensive client platform, and you also have the flexibility to leverage WebSocket community ecosystem.

In some scenarios, we need the server to process the data between clients, for example, implementing the language moderation for a cross platforms chat room, raw data scaling and calibration for logistic location tracking, data statistics for live dashboard, etc. But in other cases, you may look for a more effective model which routes the data between clients directly with a lightweight server. Taking the group collaboration scenario in remote education as an example, you may want to build a whiteboard application for remote customers which will synchronize the customized events between clients.

The Azure Web PubSub service could support both server with the ability to process messages and lightweight server scenarios. To help you build application with lightweight server, the AWPS published a predefined subprotocol json.webpubsub.azure.v1 which empowers the clients to do publish-subscribe directly. For the client supporting this subprotocol, we call it “PubSub WebSocket Client”. Let’s walk through how to use this subprotocol and build a chatroom with lightweight server together. You build the application with any programming language supporting WebSocket API. We are taking JavaScript as an example here. If you are using others, like Node.JS, Python, etc., you need to replace the APIs accordingly.

Create the instance of AWPS

First, sign in to the Azure portal  with your Azure account. You could create the new free instance by searching the “Web PubSub” or find it from the “Web” category.

Once the instance is created, we need to go to the “Client URL Generator” in “Key” tab to generate the “Client Access URL”. Please make sure that it has the roles of “Send To Groups” and “Join/Leave Groups”.

Create the PubSub WebSocket Client

It is using the Client_Access_URL and the subprotocol json.webpubsub.azure.v1 to create the WebSocket connection. In general, you need to generate the URL and token by server with the connection string. To simplify this demo, we just copy the URL from portal directly.

// PubSub WebSocket client
var publisher = new WebSocket('Client_Access_URL', 'json.webpubsub.azure.v1');
var subscriber = new WebSocket('Client_Access_URL', 'json.webpubsub.azure.v1');

Join and subscribe message from group

You need to join the group at first before receiving the messages. The message format to join a group is as below.

{
    "type": "joinGroup",
    "group": "<group_name>"
}

Once you join the group, it is easy to receive the messages from the specific group by onmessage event as the code snippet below. 

subscriber.onopen = function () {
    subscriber.send(JSON.stringify({
        "type": "joinGroup",
        "group": "group1"
    }));
}

subscriber.onmessage = function (e) {
    console.log(e.data);
}

Publish a text message the group

You could publish a text message to the specific group with this message format, if you have proper permission with the Client Access URL. It is not required to join the group at first.

{
    "type": "sendToGroup",
    "group": "<group_name>",
    "dataType" : "text",
    "data": "Hello World!"
}

Here is the code snippet in Javascript. 

publisher.onopen = function () {
    publisher.send(JSON.stringify({
        "type": "sendToGroup",
        "group": "group1",
        "dataType" : "text",
        "data": "Hello World!"
    }));
}

The server in this scenario is lightweight, since its major responsibility is generating the URL and authentication token with the connect event handler.  You could take this get started guide of subprotocol as reference to learn how to write the lightweight server. 

Next Steps

Now, you have learned how to use Azure Web PubSub to complete pub/sub between clients, and you can use it to build a real application like chat room as this online demo and the sample code.  You could also get more helpful resources from the getting stated contents. We are looking forward your feedback and ideas to help us become better via Azure Feedback Forum!