javascript - 在 Angular 2 中的多个组件之间共享 WebSocket 数据的最佳方式？

Question

我开始构建一个应用程序。有很多组件。他们每个人都需要来自 1 个 webSocket 的一部分数据。 webSocket接收对象示例:

每个 Angular 2 组件都需要来自接收对象的 1 个字段。是否可以创建 1 个服务，连接到 webSocket，接收数据并在所有组件之间共享？我认为这将是一个很好的解决方案。

现在我正在使用下一种方法:

getConfigCallback() {
    this.connectionSockets.telemetry = io(this.config.connections.telemetry);
    this.connectionSockets.controlFlow = new WebSocket(this.config.connections.controlFlow.server + ':' + this.config.connections.controlFlow.port);

    this.connectionSockets.telemetry.on('telemetry', function(data) {
        console.log(data);
    });

    this.connectionSockets.controlFlow.onopen = function(data) {
        console.log('onOpen', data);
    };

    this.connectionSockets.controlFlow.onmessage = function(data) {
        console.log('onMessage', data);
    };
}

我在主组件中接收数据，并希望使用组件的实例在组件之间共享它。但我认为这是个坏主意，并且存在更好的解决方案。

Answer 1

确保您可以在引导应用程序时通过设置其提供者来共享您的服务:

bootstrap(AppComponent, [ WebSocketService ]);

这样您就可以在整个应用程序中共享同一个服务实例。我的意思是，当您注入(inject) WebSocketService 服务时，无论组件/服务如何，相应的实例都是相同的。

为了能够共享接收到的数据，我会利用一个热可观察对象。默认情况下，可观察对象是冷的，因此您需要使用 share 运算符。

initializeWebSocket(url) {
  this.wsObservable = Observable.create((observer) => {
    this.ws = new WebSocket(url);

    this.ws.onopen = (e) => {
      (...)
    };

    this.ws.onclose = (e) => {
      if (e.wasClean) {
        observer.complete();
      } else {
        observer.error(e);
      }
    };

    this.ws.onerror = (e) => {
      observer.error(e);
    }

    this.ws.onmessage = (e) => {
      observer.next(JSON.parse(e.data));
    }

    return () => {
      this.ws.close();
    };
  }).share();
}

想要从 web socket 接收数据的组件可以这样使用这个 observable:

@Component({
  (...)
})
export class SomeComponent {
  constructor(private service:WebSocketService) {
    this.service.wsObservable.subscribe((data) => {
      // use data
    });
  }
}

有关“基于事件的方法”部分的更多详细信息，请参阅本文:

• https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html