Der beste Weg, WebSocket-Daten zwischen mehreren Komponenten in Angular 2 zu teilen?

Question

Ich fange an, eine Anwendung zu erstellen. Es gibt viele Komponenten. Jeder von ihnen benötigt einen Teil der Daten von 1 WebSocket. Das Beispiel eines Objekts durch receiveing ​​WebSocket:

jeder Winkel 2-Komponenten benötigen 1 Feld aus Objekt receiveing. Ist es möglich, 1 Service zu machen, der sich mit webSocket verbindet, Daten empfängt und diese zwischen allen Komponenten teilt? Ich denke, es wird eine gute Lösung sein.

Jetzt bin ich mit dem nächsten Ansatz:

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

Ich empfange Daten in einer Hauptkomponente und will, dass es zwischen den Komponenten Instanzen der Verwendung der Komponente teilen. Aber ich denke, es ist eine schlechte Idee und es gibt eine bessere Lösung.

Answer 1

Sicher, dass Sie Ihren Service gesetzt sein Anbieter teilen kann, wenn die Anwendung Bootstrapping:

bootstrap(AppComponent, [ WebSocketService ]); 

Auf diese Weise teilen Sie dieselbe Instanz Ihres Dienstes in der gesamten Anwendung. Ich meine, wenn Sie den Dienst WebSocketService injizieren, wird die entsprechende Instanz unabhängig von der Komponente/dem Dienst identisch sein.

Um die empfangenen Daten teilen zu können, würde ich eine heiße Observable nutzen. Standardmäßig sind Observables kalt, daher müssen Sie den Operator share verwenden.

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

Komponenten, die von der Web-Socket-Daten erhalten möchten diese beobachtbaren auf diese Weise nutzen könnten:

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

in diesem Artikel für weitere Details in der „ereignisbasierten Ansatz“ Abschnitt:

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

Answer 2

So etwas wie die folgenden (je nach konkreten Anforderungen):

@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, ...] 
});