Send real-time, secure message to a specific user browser using Azure SignalR
2 min readJul 20, 2022
Our web application is publicly and not required authenticated user, each time user access the page, we treat he/she as a transaction with unique id. During the transaction, the system receive the message from third-party service and
it need to send the real-time message to a specific aforementioned user. The solution must be real-time, secure so that multiple transactions does not know the data of each other.
The completed source code was published here. Thank for reading
Overview
The sample built-in .NET API, ReactJs which deployed on Azure App Service and SignalR.
There are 2 types of SignalR using in this acticle, there not much code change from these two, we will go one by one
- Self-hosted, we host SignalR ourselves as part of a Web App
- Azure SignalR Service, this is SignalR living in the Cloud as a service, it comes with a lot of benefits
How it work
- Front-end ask for making a connection with the API web service, the unique transaction id will send along with the request
- The Web API validate the unique transaction id using the custom Auth handler middleware
- After the API accept the connection, it generate a connection ID, we need to store the Connection ID into the database, then we can use it to send message back to the Browser later on
- The connection was establish between SignalR and Browser
- External service make a HTTP call to our server, in the example: it’s /test path. Our API lookup for the connection Id in the database, then send the request to a specific browser
Why Azure SignalR Managed Service?
- The main reason to use Azure SignlR manage service is that it help to keep the solution work incase Azure App service scale out to more than 1 instance
- Check out the other benefits of it here
How to convert from Hosted SignalR to Azure SignalR Managed Service
- Go to Azure Portal > Create Azure SignalR > Select Default mode
- Go to your .NET web API, add this line
builder.Services
.AddSignalR()
.AddAzureSignalR();
Enjoy coding!
