Не удается опубликовать события клиента SignalR с помощью Aurelia Event Aggregator

Question

У меня есть одностраничное приложение на основе Aurelia, и я пытаюсь заставить его работать с существующим бэкэндом SignalR. Я скачал JavaScript-клиент SignalR и вручную интегрировал его с приложением Aurelia (т.е. я не использую прокси-файл). Я могу подключиться к концентратору SignalR и увидеть сообщения в консоли в консоли.... пока все хорошо. Теперь я пытаюсь использовать Aurelia Event Aggregator, чтобы при получении нового сообщения концентратора запускалось событие, и все компоненты приложения, подписанные на это конкретное событие, выполняли некоторую работу. Проблема заключается в том, что обратный вызов события SignalR не может получить доступ к объекту Event Aggregator. Вот код для иллюстрации проблемы:

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

Объект агрегатора событий, на который есть ссылка в функции обратного вызова, не определен - я полагаю, потому что он не вызывается в рамках класса. Есть ли способ решить эту проблему? Как мне дать функции обратного вызова доступ к свойствам класса (this.ea в моем примере).

Answer 1

Попробуйте использовать

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

Это терпит неудачу из-за того, как this это не то, что вы ожидаете. Используя функцию жирной стрелки, this это то, что вы ожидаете. Это действительно разочаровывающая часть JavaScript, но жирные стрелки обеспечивают простой обходной путь.

Answer 2

Я думаю, что вам не хватает "начала" для вашего Proxy, также вам может понадобиться псевдоним вашей модели представления для передачи в HubProxy.

Это работает для меня:

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