Search code examples
c#signalrasp.net-web-apieventaggregator

SignalR.EventAggregatorProxy simple example issues

I'm trying to use SignalR.EventAggregatorProxy library, but I cannot get my head arround the docs or the demos. I do not need to use Ninject and I'm only after very simple tes app with WEB API on server side and Angular SPA.

Here is what I Have so far:

Startup.cs

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        app.MapSignalR();

        var proxy = new Lazy<IEventAggregator>(() => new Eventer());
        GlobalHost.DependencyResolver.Register(typeof(IEventAggregator), () => proxy.Value);

        app.MapEventProxy<Message>();
    }
}

message classes

public abstract class Message {}

public class MyMessage : Message
{
    public int Number { get; set; }
}

Eventer.cs class firing events

public class Eventer : IEventAggregator
{
    public void Subscribe(Action<object> handler)
    {
        Task.Factory.StartNew(() =>
        {
            int number = 0;

            while (true)
            {
                handler.Invoke(new MyMessage { Number = number++ });
                System.Threading.Thread.Sleep(1000);
            }
        });
    }
}

simple app.js

(function () {
    'use strict';

    var app = angular.module("TestApp", ['signalR.eventAggregator']);

    app.controller("TestCtrl", ['$scope','$http', function ($scope, $http) {

        function onEvent(e) {
            console.log("event received => ", e);
        };

        $scope.eventAggregator().subscribe(EventAgrTest.Events.MyMessage, onEvent);

        $scope.headerText = "HEADER";
    }]);
})();

and index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="TestApp">
<head>
    <title></title>

    <script src="Scripts/jquery-1.6.4.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="Scripts/jquery.signalR.eventAggregator-1.4.141.0.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="/eventAggregation/events"></script>
</head>
<body ng-controller="TestCtrl">

    <h1>{{headerText}}</h1>

    <script src="Scripts/angular.js"></script>
    <script src="Scripts/jquery.signalR.eventAggregator.angular-1.4.143.0.js"></script>

    <script src="Scripts/app.js"></script>
</body>
</html>

When I run the app I'm getting "TypeError: Cannot read property 'subscribe' of undefined" error pointing to line

signalR.eventAggregator.subscribe(type, function(e) { ...

in jquery.signalR.eventAggregator.angular-1.4.143.0.js

I'm sure I'm missing something, but I'm not sure what.

There is part in the Wiki called Implement constraint handlers (https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki/Implement-constraint-handlers) per which it should be as simple as inheriting from abstract class, but I'm not sure what needs to inherit from this class.

console output

Solution

  • The problem was in the order of JS dependencies in index.html file.

    <script src="/signalr/hubs"></script>

    should be before

    <script src="Scripts/jquery.signalR.eventAggregator-1.4.141.0.js"></script>

    Here is how it should look like ...

    <script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<script src="/signalr/hubs"></script>
<script src="Scripts/jquery.signalR.eventAggregator-1.4.141.0.js"></script>
<script src="/eventAggregation/events"></script>

<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery.signalR.eventAggregator.angular-1.4.143.0.js"></script>

    it does make a sense ... now ...