CODEWITHSUNDEEP
angularjssignalrasp.net-core-mvcasp.net-core-signalr
Bagzli
Bagzli

Reputation: 6569

Getting a value sent by SignalR with AngularJS

I'm trying to write a very simple message on the screen that when 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 :

<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;

Upvotes: 2

Views: 1222

Answers (2)

david canche
david canche

Reputation: 1

poker.client.showAllCards = function (show) {  
    $scope.allCardsShowing = show;
    $scope.$apply();
};

$scope.$apply(), refresh the Angularjs context, and this working for me.

I get this form article: Consensus: SignalR + AngularJS

Upvotes: 0

Stephu
Stephu

Reputation: 3334

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

Upvotes: 1

Related Questions