ドキュメントのロックを表示するために、angular5 Web サイトで SignalR を使用しています。ハブ接続をデータ サービスに保存しています。すぐに広告ユーザーがログインすると、接続が開始されます。ハブ接続が必要な各コンポーネントには Observable があり、接続が確立された後、ハブをリッスンします。すべてが正常に機能しています。ただし、ページを更新した後、SignalR コマンドの結果は表示されません。そのページをクリックまたはマウスオーバーすると、SignalR の結果が表示されます。
これは、ログイン後に実行されるコードです。
startConnection(): void {
//Create the hub connection for SignalR
this.dataService.connection = $.hubConnection(this.dataService.getServerConn());
this.dataService.authProxy = this.dataService.connection.createHubProxy('auth');
this.dataService.authProxy.on('handler', () => { });
this.dataService.authProxyCreated = false;
this.dataService.connection.qs = { "AuthenticationToken": sessionStorage.getItem('UMToken') };
if (this.dataService.connection.state != $.signalR.connectionState.connected)
this.dataService.connection.start().done(() => {
console.log('Connected to SignalR hub!');
}).catch((error: any) => {
console.log('Hub error -> ' + error);
});
}
これは、ハブをリッスンするコンポーネントのコードです。
ngOnInit() {
//SignalR
if (this.storeDataService.connection.state === $.signalR.connectionState.connected)
this.registerSignalR();
this.storeDataService.connection.stateChanged((change) => {
if (change.newState === $.signalR.connectionState.connected)
this.registerSignalR();
});
}
ngOnDestroy() {
this.storeDataService.authProxy.off('lockAuth');
this.storeDataService.authProxy.off('unlockAuth');
}
registerSignalR() {
this.storeDataService.authProxy.on('lockAuth', (authNo: string, username: string) => {
var auth = this.queueList.data.find(p => p.AuthNo == authNo);
if (auth) {
auth.LockedOn = new Date();
auth.LockedByUserName = username;
}
});
this.storeDataService.authProxy.on('unlockAuth', (authNo: string) => {
var auth = this.queueList.data.find(p => p.AuthNo == authNo);
if (auth) {
auth.RmiLockedOn = null;
}
});
}
これは、ロックを呼び出す編集ページのコードでもあります。
if (this.dataService.connection.state === $.signalR.connectionState.connected) {
this.dataService.authProxy.invoke('lock', this.authNo, this.userService.userName, this.userService.userId);
}
this.dataService.connection.stateChanged((change) => {
if (change.newState === $.signalR.connectionState.connected) {
this.dataService.authProxy.invoke('lock', this.authNo, this.userService.userName, this.userService.userId);
}
});