CQRS with event sourcing using NServiceBus, Event Store, Elastic Search, AngularJS and ASP.NET MVC (part 4)

CQRS+event sourcing posts

Introduction

Command + event sourcing

Read model: Elastic Search and event store projections

UI

 

The User Interface

The user interface in the code is developed using AngularJS + ASP.NET MVC following the style showed here. So it has several parts: AngularJS, a REST API implemented with ASP.NET MVC all linked to the bus and some repositories to the Query model.. The UI sends commands to the bus and it can get events back and show info to the client using SignalR. Lets follow an update of the client info in the code.

 

AngularJS

Let’s go directly to the clientBrowserController.js. There we have our client data binded to the UI and some functionallity to manage clients. If a submitUpdateClient is clicked then a call to the REST API is executed:


    $scope.submitUpdateClient = function () {

        $http.put('/api/Clients/',
            $scope.updateClient
        )
         .success(function (data, status, headers, config) {

         }).
         error(function (data, status, headers, config) {
             // log error
         });

    };

 

ASP.NET REST API

This call will arrive to ClientControllers.cs in the server. This will send a message to the bus that will create an event in the EventStore.


    public void Put([FromBody] UpdateClientDTO updateClient)
        {
            if (updateClient.quantity >= 0)
            {
                MvcApplication.Bus.Send("DepositMoney", new DepositMoneyCommand()
                {
                    ClientID = updateClient.id,
                    Quantity = updateClient.quantity,
                    FromATM = bool.Parse(updateClient.inATM?? "False")                 
                });
            }
            else
            {
                MvcApplication.Bus.Send("WithdrawMoney", new WithdrawMoneyCommand()
                {
                    ClientID = updateClient.id,
                    Quantity = updateClient.quantity,
                    FromATM = bool.Parse(updateClient.inATM ?? "False")
                });
            }
        }

Also the UI is notified when a stolen card event is created in the system. This event is handled by NServiceBus in the ASP.NET process and propagated to the clients using SignalR:

    public class ClientPossiblyStolenHandler : IHandleMessages<ClientPossiblyStolen>
    {
        public void Handle(ClientPossiblyStolen message)
        {
            var hub = GlobalHost.ConnectionManager.GetHubContext<NonPersistentHub>();
            hub.Clients.All.clientPossiblyStolen(message);
        }
    }

AngularJS

That call is received by the AngularJS client. It is propagated to the controllers using an $emit.

uiAngularServices.service('SignalRHubService', function ($rootScope) {
    var proxy = null;
    
    var initialize = function () {
        //Getting the connection object
        connection = $.hubConnection("./signalr", { useDefaultPath: false });

        //Creating proxy
        this.proxy = connection.createHubProxy('NonPersistentHub');

        //Starting connection
        connection.start();
        
        this.proxy.on('clientPossiblyStolen', function (msg) {
           
           
            $rootScope.$emit('clientPossiblyStolen', { message: msg });
            
           
        });
    };

    
    return {
        initialize: initialize
       
    };
});

In the controller a popup is shown:


   var unbind = $rootScope.$on('clientPossiblyStolen', function (event, args) {
        console.log('evento en controlador' + args.message.ClientID);

        ngDialog.open({
            template: '<p>Client '+args.message.ClientID+' card has been used in ATM several time in less than 2 minutes</p>',
            plain: true
        });
    });

Here you can take the code:

https://github.com/pablocastilla/CQRS-NServiceBus-EventStore-ElasticSearch

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: