在 Angular 2 中的多个组件之间共享 WebSocket 数据的最佳方式? [英] The best way to share WebSocket data between multiple components in Angular 2?
问题描述
我开始构建一个应用程序.有很多组件.他们每个人都需要来自 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();
}
想要从网络套接字接收数据的组件可以这样使用这个可观察对象:
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:
这篇关于在 Angular 2 中的多个组件之间共享 WebSocket 数据的最佳方式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!