Using Backbone.CQRS with SignalR

Introduction

Many popular client MV* frameworks lean on the convention of an HTTP API of resources. But in a world of with many different approaches ex Sockets, Hyper Media APIs, this model doesn’t  always fit.

Backbone.CQRS is an extension for backbone that provides CQRS integration client side. This enables backbone to fit with a CQRS approach. The “default” protocol for this is Web Sockets. But the framework is highly pluggable and easy to configure.

SignalR is a .NET library that helps you building real time web applications. It makes it simple to push data from a server to client(s). This is done by long polling or web sockets.

Scenario

The goal is simple, to swap the “default” web socket usage in Backbone.CQRS to use SignalR instead, and see what we could learn from that. We’ll not be going into details on proper usage of mentioned architectures.

We’re going to send a simple demo command and let Backbone.CQRS listen for the corresponding event of that action.

Start

The starting point is a simple MVC application. First we need some packages. We install backbone.js from NuGet, then SignalR.  Last we need BackBone.CQRS, witch is not on NuGet(yet). Instead, we download from the project site.

We then create a simple mvc view to host our demo. Then we add the script references needed by the three libs.

We also need to include the generated script for accessing SignalR hubs.

Server

With the core scripts in place in our demo view, let us continue with our SignalR hub.

Our hub is named CommandHub and derives form SignalR’s Hub. It’s possible to give the hub a different name when exposed to the client. This is done with an attribute.

Next the “doDemo” method that will retrieve our command and simulate the backend by sending back an event to the caller. The structure of the command with payload is to play nice with the Backbone.CQRS default conventions. This is of course possible to configure.

Caller is a part of the Hub. Note the publish method. It is the method on the client to receive the event.

Now we have a simple server part that will receive a command and shortcut all application logic and send back an event with the corresponding commandId to the client.

Client

On the client the command representation will look like:

Here we have a simple demo command with commandId set (In the real world this would be an UUID). One feature of Backbone.CQRS is the possibility to emit a command with a callback. This callback will be triggered when Backbone.CQRS receives an event with the corresponding id. When one event is received the callback will not be triggered if more events are fired. 

But how do we get Backbone.CQRS to use SignalR ?

Backbone.CQRS is highly configurable, so this is easy.

The hub is our SignalR hub, we’ll see code about how we access that soon. For now lets focus on how Backbone.CQRS send and retrieves commands. We just swap the event and command infrastructure. Note that we map the command name so the hub function.

The full client javascript code for the demo looks like:

There are two things to note here. First how we access the hub from the client through the connection. The second is our demo button that sends the command.

Running this code, when pressing the sendcommand button the command is sent to the server. It pushes an event to the client’s publish method. When the id in the event matches the commandId our callback will be triggered and we get the alert. Neat!

Server next step

All this is good in demo land. But one question that arises is that we may be interested in accessing the hub for outside the hub to send events to the server.

Lets delegate the execution to a new service called DemoMagic. Now demo magic will need to access the hub to send the event.

Inside this new application simulator – DemoMagic we now take a dependency on SignalR’s IConnection.

From IConnection we now can get the clients for a specific hub. We could then publish the command. Note that we send the event to all clients.

Summary

Both libraries has a lot more to offer than what we covered here. But we found out that swapping Backbone.CQRS’s infrastructure for commands and events was pretty simple.

Using SignalR gives us a whole model for both client and server. SignalR can also handle different methods of protocol like long polling or web sockets.

Enjoy!

This Post Has 2 Comments

  1. Thanks for sharing, do you have a simple example to download?
    I’ve copied the code in this article but can’t get it working.

Leave a Reply

Close Menu