SignalR-Client-Ereignisse können nicht mit Aurelia Event Aggregator

Question

veröffentlicht werden Ich habe eine einzelne Seite App auf Aurelia basiert und ich versuche, es mit einem vorhandenen SignalR-Backend zu arbeiten. Ich habe den SignalR JavaScript-Client heruntergeladen und manuell in die Aurelia App integriert (d. H. Ich verwende keine Proxy-Datei). Ich kann mich mit dem SignalR-Hub verbinden und die Arrvive-Nachrichten in der Konsole sehen ... so weit so gut. Jetzt versuche ich, den Aurelia-Ereignisaggregator zu verwenden, damit beim Eintreffen einer neuen Hub-Nachricht ein Ereignis ausgelöst wird und alle Komponenten der App, die für dieses bestimmte Ereignis abonniert wurden, etwas Arbeit leisten. Das Problem ist, dass der SignalR-Ereignisrückruf nicht in der Lage ist, auf das Ereignisaggregatorobjekt zuzugreifen. Hier ist der Code, das Problem zu veranschaulichen:

//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); 
    } 
} 

Das Object Event Aggregator innerhalb der Callback-Funktion referenziert nicht definiert ist - ich nehme an, weil es nicht in den Anwendungsbereich der Klasse aufgerufen werden. Gibt es eine Möglichkeit, dies zu lösen? Wie gebe ich der Callback-Funktion Zugriff auf die Klasseneigenschaften (in meinem Beispiel dies.ea).

Answer 1

Versuchen Sie es mit

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

Es ist auf Sie andernfalls darauf zurückzuführen, wie this ist nicht das, was Sie erwarten, es zu sein. Wenn Sie eine Fettpfeilfunktion verwenden, ist this das, was Sie erwarten. Dies ist ein wirklich frustrierender Teil von JavaScript, aber dicke Pfeile bieten eine einfache Abhilfe.

Answer 2

Ich denke, dass Sie die "Start" für Ihren Proxy fehlt, auch müssen Sie Alias ​​Ihr View-Modell, um die HubProxy übergeben.

Dies funktioniert für mich:

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(); 
}