在Angular 2中的多个组件之间共享WebSocket数据的最佳方法是什么? [英] The best way to share WebSocket data between multiple components in Angular 2?

查看:135
本文介绍了在Angular 2中的多个组件之间共享WebSocket数据的最佳方法是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I start to build an application. There are a lot of components. Each of them need a part of data from 1 webSocket. The example of a receiveing object by webSocket:

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

Each Angular 2 component need 1 field from receiveing object. Is it possible to make 1 service, that will connect to webSocket, receive data and share it between all components ? I think it will be a good solution.

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

Now i'm using the next approach:

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);
    };
}

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

I receive data in a main component and want to share it between components using component's instances. But i think it's a bad idea and there is exist a better solution.

推荐答案

当然,您可以通过设置其提供商来共享您的服务引导应用程序时:

Sure you can share your service by set its provider when bootstrapping the application:

bootstrap(AppComponent, [ WebSocketService ]);

这样,您将在整个应用程序中共享相同的服务实例。我的意思是当你注入 WebSocketService 服务时,无论组件/服务如何,相应的实例都是相同的。

This way you will share the same instance of your service in the whole application. I mean when you inject the WebSocketService service, the corresponding instance will be the same whatever the component / service.

为了能够共享收到的数据,我会利用热点可观察性。默认情况下,observables很冷,因此您需要使用 share 运算符。

To be able to share the received data, I would leverage an hot observable. By default observables are cold so you need to use the share operator.

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套接字接收数据的组件可以使用此可观察对象方式:

Components that would like to receive data from the web socket could use this observable this way:

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

有关事件 - 的更多详情,请参阅此文章基于方法部分:

See this article for more details in the "event-based approach" section:

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

这篇关于在Angular 2中的多个组件之间共享WebSocket数据的最佳方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆