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

我开始构建一个应用程序。有很多组件。他们每个人都需要1个webSocket的一部分数据。一个receiveing物体的通过的WebSocket的例子：在Angular 2中的多个组件之间共享WebSocket数据的最佳方式是什么？

每个角度2成分需要从receiveing对象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); 
 
    }; 
 
}

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

来源

2016-05-04 Edward

你可以将该服务添加到您的' bootstrap（）'命令设置你的提供者。然后在组件中通过依赖注入从构造函数中获取服务。现在，您可以在注入它的每个组件中使用该服务。 – rinukkusu

当然，你可以通过设置它的供应商自举应用程序时，分享您的服务：

bootstrap(AppComponent, [ WebSocketService ]);

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

为了能够共享收到的数据，我会利用一个热门的observable。默认情况下，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(); 
}

组件，就是想从网络套接字接收数据可以使用这种观察的是这样的：

@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

来源

2016-05-04 12:05:59

当我尝试测试此解决方案时，存在一些问题。我的IDE会自动添加一个Observable导入：[link]（http://data3.floomby.com/files/share/4_5_2016/14/fWyVy8kOfUioABCs795DXw.jpg）。一个应用程序出现错误：[链接]（http://data3.floomby.com/files/share/4_5_2016/14/DTCuEmJmxUKrP4HUhmQQ.jpg）。我的项目结构：[链接]（http://data3.floomby.com/files/share/4_5_2016/14/wVoBYKAcTUGxKEZ7Rb765A.jpg）。你能帮我解决这个错误吗？ – Edward

您应该以这种方式导入Observable类：'从'rxjs/Observable'导入{Observable};''从'rxjs/Rx'导入{Observable};' –

类似以下（根据您的具体要求）：

@Injectable() 
class WsService { 
    comp1Data = new BehaviorSubject(); 
    comp2Data = new BehaviorSubject(); 

    constructor() { 
    getData().subscribe(val => { 
     ... 
     this.compXData.next(someValue); 
    }); 
    } 
    ... 
}

@Component({...}) 
export class Component1 { 
    constructor(wsService:WsService) { 
    wsService.comp1Data.subscribe(value => this.data = value); 
    } 
}

@NgModule({ 
    directives: [AppComponent, Component1], 
    bootstrap: [AppComponent], 
    providers: [WsService, ...] 
});

来源

2016-05-04 12:02:19

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

回答

相关问题