RxJs Observables avec WebSocket

Bien, j'ai souffert avec les websockets angulaire et python pour longtemps. J'ai eu quelques websockets pour chaque composant et ils n'ont pas de proches, de sorte que chaque fois que je passe par le biais d'un onglet à l'autre (changement entre les composants), le websocket a été créé de nouveau dans le dos et j'ai été reçu deux fois ou plusieurs fois le même.

Il existe de nombreux tutoriels expliquant comment faire des websockets, mais pas beaucoup, en expliquant comment fermer ou comment plusieurs d'entre eux.

Ici mon morceau de pain:
Le meilleur tuto que j'ai trouvé un peu loin:
https://medium.com/@lwojciechowski/websockets-with-angular2-and-rxjs-8b6c5be02fac
Mais pas encore complet. Il n'est pas de fermer correctement le WS

Ici ce que j'ai fait: (Ma classe WebSocketTestService)

@Injectable()
export class WebSocketTestService {
    public messages: Subject<any>  = new Subject<any>();

    constructor(private wsService: WebSocketService) {
        console.log('constructyor ws synop service')
    }

    public connect() {
        this.messages = <Subject<any>>this.wsService
            .connect('ws://localhost:8000/mytestwsid')
            .map((response: any): any => {
                return JSON.parse(response.data);
            })
    }

    public close() {
        this.wsService.close()
    }
} //end class 

Et ici (dans un autre fichier pour moi) le websocket classe

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {Observer} from "rxjs/Observer";

@Injectable()
export class WebSocketService {
    private subject: Subject<MessageEvent>;
    private subjectData: Subject<number>;
  private ws: any;
    //For chat box
    public connect(url: string): Subject<MessageEvent> {
        if (!this.subject) {
            this.subject = this.create(url);
        }
        return this.subject;
    }

    private create(url: string): Subject<MessageEvent> {
        this.ws = new WebSocket(url);

        let observable = Observable.create(
            (obs: Observer<MessageEvent>) => {
                this.ws.onmessage = obs.next.bind(obs);
                this.ws.onerror   = obs.error.bind(obs);
                this.ws.onclose   = obs.complete.bind(obs);

                return this.ws.close.bind(this.ws);
            });

        let observer = {
            next: (data: Object) => {
                if (this.ws.readyState === WebSocket.OPEN) {
                    this.ws.send(JSON.stringify(data));
                }
            }
        };

        return Subject.create(observer, observable);
  }

  public close() {
    console.log('on closing WS');
    this.ws.close()
    this.subject = null
  }

} //end class WebSocketService

Et enfin, mon appel à la WSTestService dans le composant

this.webSocketTestService.connect();
this.webSocketTestService.messages.subscribe(message => {
      console.log(message);

})

et dans la partie la plus importante, la ngOnDestroy()

ngOnDestroy() {
    this.webSocketTestService.messages.unsubscribe();
    this.webSocketTestService.close()

Bien sûr, ajouter les deux services pour les fournisseurs de la section de l'application.module

C'est le seul moyen que j'ai trouvé pour fermer correctement le websocket quand j'ai changer entre les points de vue et je détruis les composants. Je ne suis pas vraiment sûr si c'est votre cas, mais il est difficile pour moi de trouver un exemple qui fonctionne correctement avec de multiples points de vue et les websockets. J'ai eu des problèmes similaires à ceux que vous avez demandé, donc j'espère que cela fonctionne pour vous. Laissez-moi savoir si mon approche qui fonctionne pour vous.

Vraiment ce que je ne comprends pas c'est pourquoi Angulaire des appels tous les ngOnInit de chaque composants, même si elles ne sont pas affichées lors du démarrage de l'application. Je veux créer le WS seulement quand je rentre dans la vue, et non pas lors du démarrage de l'application. Si vous trouvez une solution pour que, alors laissez-moi savoir.

bonne chance!

OriginalL'auteur Javier