Getting a value sent by SignalR with AngularJS

Question

I'm trying to write a very simple message on the screen that when signalr send a value this message gets updated.

I have a very simple Hub:

public class Chat : Hub
{
    public Task Send(string message)
    {
        return Clients.All.InvokeAsync("Send", message);
    }
}

On the front-end I have the following html:

<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind="value"></p>
</div>

And the script is:

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.value = "My Test Value";
});

chatConnection.on('Send', (message) => {
    app.scope.value = message;
});

What I am failing to understand is how do I access that value parameter so that I may update it.

EDIT:

The SignalR part works, the message comes through. The problem is that I am not sure how to update the value that is inside of that controller. app.scope.value = message;

Answer 1

Use observer pattern. Basically create a service which should do the following things:

1. Creates hub connection (handles start, reconnection, ....)

2. Support for example the following methods:

   • register for event (adds the caller to a list which contains
     interested members.)
   • unregister for event (removes the caller from the list with the interesed members.)
3. In the case a new message from server inform all observers

Example:

(Pseudocode extracted from my solution (to big to show all)):

Server (here called hubWrapperService):

    var yourHubProxy = $.connection.yourHub;        
        yourHubProxy.client.yourMethodWhichServerCanCall= function (params){      
           // Inform observers. Iterate to over all your observers and inform them                     
           notifyObservers(params);
        };

    // Start connection.
    $.connection.hub.start().done(function () {            
        ...
        });

    }).fail(function (error) {...

    });

   function registerToEvent(callback) {
                $log.debug("ServiceHub:  getConnectionEvent called");
                // Add caller to you observer list. (here serviceInitObservers)
            }

   function notifyServiceInitObservers() {
                angular.forEach(serviceInitObservers, function (callback) {
                    callback.callback();
                });
        }

In your Controller (inject service and register for events):

hubWrapperServer.registerToEvent(function () {
        serviceHub.getAllDevices().then(function (params) {    // Do something in your controller
        });
      });

There is also a wrapper service available https://github.com/JustMaier/angular-signalr-hub