我开始构建一个应用程序.有很多组件.他们每个人都需要来自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
原文地址:https://www.jb51.cc/js/158186.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。