Recently I start to explore the Azure SignalR Service for one of my chat based web wpplication.

Azure SignalR Service simplifies the process of adding real-time web functionality to applications over HTTP. This real-time functionality allows the service to push content updates to connected clients, such as a single page web or mobile application. As a result, clients are updated without the need to poll the server or submit new HTTP requests for updates.

To put more simple word Azure SignalR is a PaaS helps us to update the Client (UI) without refreshing the Page - So Cool😎 Is it?

For that I need to come-up with a architecture, So I start doing a POC - "How to securely connect a Azure SignalR Service from a simple ChatBased Application" ?

You can find more asp.net sample code for AzuresignalR from the below Repo.

In this series of post, I am going to share the best practice / architecture on how to securely connect azuresignalr with azure app service.

Let us create a POC Environment

AzureSignalR

I choose the resource group, service name and keep the rest of another configurations to default.

The main thing to note here is the Service mode i.e, how we are going to consume/connect to the azure signalr service

• Default mode- Using azure signalr for your Web application (Server based) - e.g., azure web App

• Serverless mode- Using azure signalr for your Web application (Serverless based) - e.g., static web apps, function apps

• Classic mode - Mixed of the above modes. This mode is for backward compatibility for those applications created before there is default and serverless mode. It is strongly recommended to not use this mode anymore

Leave the connectivity method to the public endpoint for now, we will configure this later.

Azure Web App

Create a simple webapp like below. Please keep an eye of the SKU/Size which you need at least the Standard / Premium plan that support secure network access.

Deploy the Web Chat App

Once we provisioned our web app, we deploy the ChatRoom in it.

After the deployment it’s time to update the azure signalr connection string to our app settings config variable called Azure:SignalR:ConnectionString

Finally, our site will look likes.

Different connections in Azure Signalr service

Before diving into the security, we first need to understand how the azure signalr works behind the screen.

There are 2 different connections in azure signalr (sdk) as of now(24/May/2021)

• Server Connection (Not Applicable for Serverless mode)
• Client Connection (Required for all modes)

Server Connection

Within your SignalR application, where you have a web server that hosts a hub (called hub server) and clients can have duplex real-time communication with the hub server

• A negotiate endpoint is exposed by Azure SignalR Service SDK for each hub.
• This endpoint will respond to client's negotiation requests and redirect clients to SignalR Service.
• Eventually, clients will be connected to SignalR Service.

Server connection flow

From the Code

Please note that for serverless mode there is no server so we could not have a Hub server. So, this server connection will not be applicable for serverless mode.

Client Connection

There are 2 steps to establish the persistent connection.

1.Client will call the negotiate request to app server which returns a redirect response with SignalR Service's URL and access token

2.Client use the new URL and access token to make the persistent connection to SignalR

WebSocket Connection:

Client Connection flow

Overall Flow

Default mode = Server Connection + Client Connection

We will continue on how we secure our azure signalr connectivity to Azure web app in the upcoming parts.