Detect Active Users in Angular App Using SignalR

Bi-directional communication between Angular App and .NET Server

Recently, I implemented an interesting feature using SignalR and Angular. The new feature in the Angular App allows admins to see all active clients on “waiting room” page. The admin can then pick one and start the appointment immediately.

I will share the gist of the solution, which uses SignalR's bi-directional communication ability and integrates with Angular. Let’s dive in.

Architecture

The technologies used include .Net core, SignalR, and Angular.

SignalR

Although it’s a framework published seven years ago, SignalR still has a unique position in web development. It offers bidirectional communications so that the Server can notify the client instead of the client polling the server.

Under the hood, SignalR uses several transports, including WebSocket, as default. It falls back to other transport methods when WebSocket isn’t available. Compared with HTTP web requests, WebSocket has lower overhead as it doesn’t have the…