如何根据第一个组件收到的 websocket 事件更新第二个组件中的内容?

Posted

技术标签:

【中文标题】如何根据第一个组件收到的 websocket 事件更新第二个组件中的内容?【英文标题】:How to update contents in a second component based on websocket event received at first component? 【发布时间】:2018-03-15 05:46:03 【问题描述】:

我有一个用组件 A 编写的 websocket 逻辑,如下所示。

    this.socketService.connect('/socket_url');
    this.statusSubscription = this.socketService.messages
      .subscribe(result => 
        if (result !== 'pong') 
            // update Component B with the response obtained
        
    );

我想知道如何在旅途中收到 websocket 事件时更新组件 B。

【问题讨论】:

【参考方案1】:

您可以按如下方式使用共享的 Service 和 Observable。

shared-data.service.ts

import Injectable from '@angular/core';
import Subject from 'rxjs/Subject';
import Observable from 'rxjs/Observable';

@Injectable()
export class SharedDataService 

  public userStatusToggle: Observable<any>;
  private userStatusSubject = new Subject<any>();

  constructor() 
    this.userStatusToggle = this.userStatusSubject.asObservable();
  

  notifyUserStatusChange(data) 
    this.userStatusSubject.next(data);
  

组件 A

.
.
.

constructor(private  sharedDataService: SharedDataService)     


this.socketService.connect('/socket_url');
this.statusSubscription = this.socketService.messages
        .subscribe(result => 
            if (result !== 'pong') 
                this.sharedDataService.notifyUserStatusChange(result);
            
        );

组件 B

.
.
.
constructor(private  sharedDataService: SharedDataService)     


this.sharedDataService.userStatusToggle.subscribe(userStatus => 
    // Do action with the 'userStatus' obtained
);

【讨论】:

【参考方案2】:

如果组件处于父/子关系中,您也可以这样做:

组件 A(父):

this.socketService.connect('/socket_url');
    this.statusSubscription = this.socketService.messages
      .subscribe(result => 
        if (result !== 'pong') 
            this.componentBdata = result;
        
    );

在组件A.html

<componenB [data]="componentBdata "> </componentB>

在组件B(子)中:

export class ComponentB implements OnChanges, OnInit 
  @Input() data: string;
  private _data: string;
  constructor() 

  ngOnChanges(changes: SimpleChanges) 
    const data: SimpleChange = changes.data;

    if(data.previousValue ! = data.currentValue)
       this._data = data.currentValue;
       // do your change here
    
  


【讨论】:

以上是关于如何根据第一个组件收到的 websocket 事件更新第二个组件中的内容?的主要内容,如果未能解决你的问题,请参考以下文章

如何从控制器或其他组件/服务访问 websocket?

Websocket事件仅由一个组件捕获

从 websockets 更新数据时,如何在不连接到每个子组件的情况下更新单个子组件?

通过 Laravel 中的 websocket 收到通知后,Vue.js 组件未更新

WebSocket断开重连机制 实现demo,非采用onclose事件方式

Javascript - 当服务器发送大响应时,WebSocket 客户端未收到 onmessage 事件