Implement SignalR & RabbitMQ with .Net Core ReactJS

Saurabh Singh
Feb 29 · 5 min read

ASP.NET Core SignalR is an open-source library that simplifies adding real-time web functionality to apps. Real-time web functionality enables server-side code to push content to clients instantly.

How it can help ?
- Apps that require high frequency updates from the server. Examples are gaming, social networks, voting, auction, maps, and GPS apps.
- Dashboards and monitoring apps. Examples include company dashboards, instant sales updates, or travel alerts.
- Collaborative apps. Whiteboard apps and team meeting software are examples of collaborative apps.
- Apps that require notifications. Social networks, email, chat, games, travel alerts, and many other apps use notifications.

SignalR provides an API for creating server-to-client remote procedure calls (RPC). The RPCs call JavaScript functions on clients from server-side .NET Core code.

What it do ?

  • Handles connection management automatically
  • Sends messages to all connected clients simultaneously. For example, a chat room
  • Sends messages to specific clients or groups of clients
  • Scales to handle increasing traffic

How it do ? Transport
SignalR supports the following techniques for handling real-time communication:

  • WebSockets
  • Server-Sent Events
  • Long Polling

SignalR automatically chooses the best transport method that is within the capabilities of the server and client.

Hubs
SignalR uses hubs to communicate between clients and servers.
A hub is a high-level pipeline that allows a client and server to call methods on each other.
SignalR provides two built-in hub protocols:
- a text protocol based on JSON
- a binary protocol based on MessagePack.

Implementation

In my another article I created real-time pub/sub design pattern to push and receive messages from RabbitMQ and display in UI, created in ReactJS. You can find the demo code below:

https://medium.com/@saurabh.singh0829/async-queue-implementation-using-rabbitmq-net-core-reactjs-12d98f9745dc

https://github.com/sorabzone/RabbitMQ-Demo

In above code calls the .Net core WebAPI at regular intervals(every 1-2 seconds) from UI/React component to fetch the current list of messages still in queue.

This is the perfect scenario where we can make use of SignalR. Instead of making multiple HTTP calls to API, we can setup a tunnel via a web-socket connection between client and server. Web-socket is a 2-way tunnel via which both client and server can send messages to each other.

Client doesn’t have to call the server every second to fetch the latest status/list. Rather, the server will send the list of messages to all clients only when there is any change in the list.

Server Code

Create the hub by inheriting Hub class. Methods here are used to send and receive messages. Each method receives an input and broadcasts the same to all clients.

In my code, I configured tunnel to communicate 2 types of messages, string and List<string>

Add the SignalR service and register hub in startup.cs

Map the SignalR hub route.

Please note that I registered signalR route before the MVC/SPA route.

We want server to send list of messages whenever it receives/pops a message from queue. When we receive message, we call the hub method to broadcast the updated list to clients.

Client Code

I created a service to establish socket connection with server and create methods to send/receive messages.

Install the SignalR client package using following command

npm install @microsoft/signalr

This service listening to 2 types of messages from tunnel. Please note the method names ‘ReceiveMessage’ and ‘ReceiveMQMessage’. We provided the same name inside hub in server code.

In React component create and initialize the rabbitMQMessageService object.

For demo, I created 3 events:

  • sendMessageSignal — it sends message to server via websocket we created using SignalR
  • receiveMessage — it listens to incoming message from server. In demo code it is the same message we sent o server in above code
  • receiveMQMessage — it listens to incoming List<string> message from server.

Message “Hey! it is friday” is sent from client to server.

The div in brown color display the messages received by react component from server.

In following screen shot we can see the client receiving list of messages from server and refresh the UI.

I also wrote the received message in console for reference. I clicked “SendToQ” button multiple times to push messages to Q and we can see the list getting updated every 3 seconds automatically.

In server side we configured the RabbitMQ consumer to receive message every 3 seconds.

Above code can help you to take first step to write asynchronous, queue based high traffic and high performance web applications.

You can get the code from github for reference.

https://github.com/sorabzone/Core-RabbitMQ-SignalR-ReactJS

Saurabh Singh

Written by

ReactJS, .Net Core, AWS, SQL, Docker, Mongo, RabbitMQ

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade