我开始构建一个应用程序.有很多组件.他们每个人都需要来自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);
};
}
我在主组件中接收数据,并希望使用组件的实例在组件之间共享它.但我认为这是一个坏主意,并且存在更好的解决方案.
解决方法
当你引导应用程序时,你可以通过设置它的提供者来共享你的服务：
bootstrap(AppComponent,[ WebSocketService ]);
这样,您将在整个应用程序中共享相同的服务实例.我的意思是当您注入WebSocketService服务时,无论组件/服务如何,相应的实例都是相同的.
为了能够共享收到的数据,我会利用热点可观察性.默认情况下,observables很冷,因此您需要使用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套接字接收数据的组件可以通过这种方式使用此可观察对象：
@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
