Il modo migliore per condividere dati WebSocket tra più componenti in Angular 2?

Question

Inizio a creare un'applicazione. Ci sono molti componenti Ognuno di loro ha bisogno di una parte di dati da 1 webSocket. L'esempio di un oggetto da receiveing ​​websocket:

Ogni angolare 2 componente necessita 1 campo da receiveing ​​oggetto. È possibile creare 1 servizio, che si connetterà a webSocket, ricevere dati e condividerlo tra tutti i componenti? Penso che sarà una buona soluzione.

ora sto usando il metodo seguente:

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

ricevo i dati in un componente principale e voglio condividere tra i componenti che utilizzano le istanze del componente. Ma penso che sia una cattiva idea e esiste una soluzione migliore.

Answer 1

Certo che si può condividere il vostro servizio per impostare il suo provider quando bootstrap l'applicazione:

bootstrap(AppComponent, [ WebSocketService ]); 

In questo modo condividerai la stessa istanza del tuo servizio nell'intera applicazione. Voglio dire quando si inietta il servizio WebSocketService, l'istanza corrispondente sarà la stessa indipendentemente dal componente/servizio.

Per essere in grado di condividere i dati ricevuti, vorrei sfruttare un osservabile caldo. Per impostazione predefinita, gli osservabili sono freddi, quindi è necessario utilizzare l'operatore 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(); 
} 

componenti che vorrebbero ricevere i dati dal socket web potrebbe utilizzare questo osservabile in questo modo:

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

consulta questo articolo per maggiori dettagli nella sezione "approccio event-based":

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

Answer 2

Qualcosa di simile a quanto segue (a seconda delle esigenze concrete):

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