首页 > 解决方案 > 尽管新数据来自 websockets,但视图数据不会更新

问题描述

我有一个控制器来维护向我的 Web 应用程序显示日志。日志通过 SignalR 从 ASP.NET Core API 发送。

情况是当我第一次进入站点时,新的传入日志会正确显示。但是当我切换到我的 Web 应用程序的另一个页面并返回日志时,虽然我可以看到控制台中有新日志传入,但日志控制器的视图不会更新。

我的日志控制器如下所示:

export class LoggerComponent implements OnInit {
    hubConnection: HubConnection;
    public logs: Array<LogMessage> = new Array<LogMessage>();

    constructor(private alertService: AlertService,
                private loaderService: LoaderService,
                private signalRHandler: SignalRHandler,
                ) {
      // Here I subscribe to event that is called if WebSocket connection was 
      // lost and renewed so I can acquire new instance of HubCOnnection
      // and subscribe to Hub events
      this.signalRHandler.onAcquireNewHubInstance.subscribe((acquire) => {
          if (acquire) {
           this.acquireHubInstance();
          }
      });
    }

    ngOnInit() { 
     // As you can see I tried to re-subscribe to HubEvents and this works 
     // but when I refresh the app the log messages are duplicated.
     //this.acquireHubInstance();
    }

    acquireHubInstance() {
      this.hubConnection = this.signalRHandler.hubConnection;
      this.hubConnection.on('BroadcastLogMessage', (data) => {
        console.log(data)
        if (this.logs.length < 2000) {
            this.logs.push(data);
        }
      });
    }
}

标签: angularsignalr

解决方案


推荐阅读