Aurelia用signalR激活

Question

如何将signalR与aurelia canActivate（）和activate（）页面循环一起使用？我的意思是...在我的VM构造函数中，我初始化signalR连接。在canActivate（）或activate（）方法中，我启动了signalR连接。在服务器端，在集线器中，当客户端连接时，我获取客户端的数据并将其发布到连接的客户端。所以Aurelia客户端将异步获取数据。因此页面将显示为空，当数据到来时，它将刷新它。但是我想在显示页面之前等待来自signalR hub的数据。

所以工作是这样的：

1. VM构造函数=>使用（HubConnectionBuilder）构建signalR连接
2. VM Constructor =>设置连接事件，如“onConnected”
3. VM activate（）=>通过调用this.connection.start（）来启动连接;
4. SignalR Hub.OnConnectedAsync（）=>从DB获取数据
5. SignalR Hub.OnConnectedAsync（）=>仅将数据发送到新连接的客户端（Clients.Client（Context.ConnectionId）.SendAsync（“onConnected”，data）;）
6. VM onConnected事件处理程序=>获取数据并设置模型（this.model = data）

当工作流程到达步骤4时，页面已显示为空。

VM

@autoinject
export class AlarmsVM {
  model: any;    
  connection: HubConnection;

  constructor() {
     this.connection = new HubConnectionBuilder()
        .withUrl("/alarmsHub")
        .configureLogging(LogLevel.Information)
        .build();

    this.connection.on("onConnected", (data) => this.model = data);
    this.connection.on("onUpdate", (data) => this.model = data);
  }

  async activate() {
    await this.connection.start().catch(err => console.error(err.toString()));
  }

  async deactivate() {
    await this.connection.stop();
  }
}

signalR Hub

public class AlarmsHub:Hub
{
    private readonly IMediator _mediator;

    public AlarmsHub(IMediator mediator)
    {
        _mediator = mediator;
    }

    public override async Task OnConnectedAsync()
    {
        var data = await _mediator.Send(new GetAlarmsQuery());
        await Clients.Client(Context.ConnectionId).SendAsync("onConnected", data);
    }

    ...
}

Answer 1

根据文档，您可以从activate（）返回一个promise，导航只会在promise解决时发生：https://aurelia.io/docs/api/router/interface/RoutableComponentActivate/method/activate/

编辑

我误解了您的原始问题，您基本上希望在收到onConnected事件时解析激活。在activate（）中的promise中包含onConnected的解析，你应该很高兴，示例代码：

  activate() {
    this.connection.start().catch(err => console.error(err.toString()));
    return new Promise((resolve, reject) => {
       this.connection.on("onConnected", (data) => {
          this.model = data;
          return resolve();
       });
    });
  }