Rx with SignalR in ASP.NET MVC

Question

I am learning reactive programming, and the first impression was that it's similar to SignalR (both use push). However, later I learned the difference and how Rx doesn't care about "How" but only "What". Therefore, I wanted to implement what I learned utilizing both Rx and SignalR. I created a simple auction MVC web app that uses SignalR to update bidders with the latest price and the remaining time.

The scenario that I am trying to implement using Rx is as follows:

1. client clicks on bid button.
2. SignalR hub receives the place-bid request and propagates the updated price to all clients. The remaining time is increased.
3. SignalR hub sends the updated remaining time every second.

So here we have two sources of events. bidders clicking on bid button, and SignalR updating the bidders with remaining time each second.

I don't know if the SignalR updating clients with latest bid price is considered an event that can be implemented in Rx. Is it?

Based on the above we have two observables (the button and the timer in SignalR hub) Based on the tutorial of Andre Staltz in "The introduction to Reactive Programming you've been missing"[1] I can visualize and understand the stream of button's clicks. However, I am having a problem with the timer stream which I think should be implemented using Observable.Interval. So now I will need RxJS in the client to stream button clicks where SignalR hub is going to be the observer, and at the same time, I will need Rx.NET in SignalR hub for it to stream remaining-time event to the connected clients who will be the observers. I looked at Lee Campbell's tutorial and his reactive trader using SignalR with Rx.NET but as it's advanced I didn't study in details but I found a simplified version by Sacha Barber on codeproject [2] and an answer by Jim-Wooley [3]

However, I couldn't understand how I can implement my idea where the observable is an observer and vice-versa. What are the boundaries between SignalR and Rx? I know what each of them does, but how to build a reactive approach in the above example, should I call the javascript function that updates the remaining-time when I subscribe to the Observalbe.Interval? If so, what is the value of Rx? SignalR hub is calling the update function in each connected client without the need for Rx. As everything is a stream, should I transfer everything to Rx?

I really appreciate your help, or if you could direct me to good resources which discuss this kind of scenarios.

Answer 1

SignalR frontend client api are base on callback pattern which is the most fundamental approach for async programming in javascript. You can build on top of this with any async pattern that you prefer, such as Promise, Rxjs. There's an article that covers how to wrap the client side communication with Rxjs approach- https://blog.sstorie.com/integrating-angular-2-and-signalr-part-2-of-2/

I would suggest start with callback pattern first and have a working app setup, then slowly dig into Rxjs way of communications

Converting callback to Rxjs is fairly easy like below

var onMessage$ = new Subject()
var connection = $.hubConnection();
var myHub = connection.createHubProxy('myHub');
myHub.on('message', function(message) {
    onMessage$.next(message)
});
onMessage$.subscribe((message)=>console.log(message))

but write everything in a functional reactive style will take a lot of effort and time to practise. Once you are more familiar, in my opinion rxjs is more productive and efficient compare to promise and callback.