Real-time communication with Azure Web PubSub

 

Overview

This walkthrough explains how to you can use Azure PubSub service for your real-time communication application with the help of Azure Function App. Azure Web PubSub enables you to build real-time messaging web applications using WebSockets and the publish-subscribe pattern. Any platform supporting WebSocket APIs can connect to the service.

 

Azure Web PubSub Service

Azure Web PubSub enables you to build real-time messaging web applications using HTTP WebSockets and the publish-subscribe pattern. Any browser platform supporting WebSocket APIs can connect to the service. WebSockets offer a two-way connection between a server and a client endpoint, with support for full duplex communications. Both the endpoint and server can send and receive data at the same time, allowing a real-time conversation between the applications and the users

Prerequisites

• Azure Function Core tool
• Visual Studio Code
• Azure subscription
• Git CLI
• Ngrok

Creating Azure web PubSub Service

For creating a group chat application, we require an Azure PubSub service, you can follow the below give step to create a new Service.

1. Login on Azure Portal
2. Search PubSub in Search bar
3. Click on create new
4. Select your resource group name and add the PubSub service name
5. Click on review and create
6. After the deployment, click of go to resource
7. Click on Key and Copy the connection string

Note: Make sure your service name should be unique.

 

Application configuration

For this demonstration we require an application, we are going to use an NodeJS function App, you can use the same repository for creating chat application.

The Application is start executing on the port 7071. The local function will use port defined in the local.settings.json file. To make it available in public network, we need to work with ngrok to expose this endpoint.

After this command you’ll get a forwarding endpoint, for example: http://{ngrok-id}.ngrok.io -> http://localhost:7071.

 

Azure PubSub configuration

For enabling multiway communication, we will have to enable event handler. You can follow below given step for enabling event handler.

1. Go to Azure portal
2. Select your Web PubSub service
3. Click on setting → Add event handler hub
4. Add this value
   • Hub Name: simplechat
   • URL Template: http://{replace with ngrok-id}.ngrok.io/runtime/webhooks/webpubsub
   • User Event Pattern: *
   • System Events: connect, connected, disconnected.
   • Click on save

Now enter the function app base URL as local: http://localhost:7071/api/index and enter a username.

Open another instance of the web application in a different browser window. You will see that any messages sent will appear in all instances of the application.

 

Now we have created a group chat application with the help of azure web PubSub service and using Azure Function app