CODEWITHSUNDEEP
signalr.clientaurelia
CharlieB
CharlieB

Reputation: 11

Can't get SignalR client events published with Aurelia Event Aggregator

I have a single page app based on Aurelia and I'm trying to get it to work with an existing SignalR backend. I've downloaded the SignalR javascript client and integrated it with the Aurelia app manually (i.e. I'm not using a proxy file). I'm able to connect to the SignalR hub and see the arrvive messages in the console.... so far so good. Now, I'm trying to use the Aurelia Event Aggregator so that when a new hub message arrives an event is fired and any components of the app subscribed to that particular event will do some work. The issue is that the SignalR event callback doesn't seem to be able to access the Event Aggregator object. Here's the code to illustrate the issue:

//Import statements omitted for brevity

@inject (EventAggregator)
export class MyService{

    constructor(eventAggregator) {

        this.ea = eventAggregator;

       this.connection = $.hubConnection("http://localhost:8080/signalr", { useDefaultPath: false });

        this.hub = this.connection.createHubProxy("myHub");

        //Register a callback function to fire when a new hub message arrives        
        this.hub.on("sendMessage", this.processHubMessage);

        //No issues so far - all this constructor code works fine     
    }

    processHubMessage(message) {

       // This doesn't work - this.ea is undefined in the scope of this function
       this.ea.publish('deviceStatusUpdate', message);
    }
}

The event aggregator object referenced within the callback function is not defined - I assume because it's not being called within the scope of the class. Is there a way to resolve this? How do I give the callback function access to the class properties (this.ea in my example).

Upvotes: 1

Views: 628

Answers (2)

Rick
Rick

Reputation: 1

I think you are missing the 'start' for your Proxy, also you may need to alias your view model to pass to the HubProxy.

This works for me:

constructor(eventAggregator){
    this.eventAggregator = eventAggregator;

    var signalrAddress = 'https://pathToYouServer';
    var hubName = 'yourHubsName';

    var connection = $.hubConnection(signalrAddress);
    var eventHubProxy = connection.createHubProxy(hubName);
    var vm = this;

    eventHubProxy.on('yourBroadcastMessage', function(data) {
        vm.eventAggregator.publish(data);
    });

    connection.start();
}

Upvotes: 0

Ashley Grant
Ashley Grant

Reputation: 10887

Try using

this.hub.on("sendMessage", (message) => this.processHubMessage(message));

It's failing on you due to how this isn't what you're expecting it to be. By using a fat arrow function, this is what you expect it to be. This is a really frustrating part of JavaScript, but fat arrows provide a simple workaround for it.

Upvotes: 3

Related Questions