web-dev-qa-db-fra.com

Websocket dans Angular 4 et confusion RxJS

J'essaie d'apprendre RxJS avec les websockets et Angular 4, et j'ai trouvé un bon exemple ici . J'espère que quelqu'un pourra aider à expliquer l'exemple car quelques choses sont déroutant.

Ils ont créé 2 Angular angulaires, le service Websocket:

import { Injectable } from '@angular/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class WebsocketService {
  constructor() { }

  private subject: Rx.Subject<MessageEvent>;

  public connect(url): Rx.Subject<MessageEvent> {
    if (!this.subject) {
      this.subject = this.create(url);
      console.log("Successfully connected: " + url);
    } 
    return this.subject;
  }

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

    let observable = Rx.Observable.create(
    (obs: Rx.Observer<MessageEvent>) => {
        ws.onmessage = obs.next.bind(obs);
        ws.onerror = obs.error.bind(obs);
        ws.onclose = obs.complete.bind(obs);
        return ws.close.bind(ws);
    })
let observer = {
        next: (data: Object) => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify(data));
            }
        }
    }
    return Rx.Subject.create(observer, observable);
  }

}

et le service Chat:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';
import { WebsocketService } from './websocket.service';

const CHAT_URL = 'ws://echo.websocket.org/';

export interface Message {
    author: string,
    message: string
}

@Injectable()
export class ChatService {
    public messages: Subject<Message>;

    constructor(wsService: WebsocketService) {
        this.messages = <Subject<Message>>wsService
            .connect(CHAT_URL)
            .map((response: MessageEvent): Message => {
                let data = JSON.parse(response.data);
                return {
                    author: data.author,
                    message: data.message
                }
            });
    }
}

J'ai un certain nombre de questions à ce sujet:

  1. Pourquoi faut-il créer 2 services? Un sujet ne peut-il pas être un observateur et observable (il pourrait donc simplement relayer les messages directement sans un deuxième service de chat)? Quel problème résout la création de 2 services?
  2. Dans le service Websocket, pourquoi la dernière ligne de l'appel de fonction .create renvoie-t-elle ws.close.bind (ws)? Qu'est-ce que ça fait?
  3. Comment est gérée une déconnexion de la prise Web? Existe-t-il un moyen de le faire se reconnecter?
  4. Comment les services devraient-ils fermer/éliminer la prise Web?
angulartypescriptwebsocketrxjs
11
TSG
  1. Réutilisabilité
  2. de sorte que vous pouvez vous désabonner de l'observable qui à son tour ferme la connexion

  3. dans l'exemple que vous avez donné, ce serait probablement quelque chose comme (lorsque vous avez une instance de chatService)

    let sub = chatService.messages.subscribe(()=>{ 
// do your stuff 
});

// some where in your code
sub.unsubscribe() // this will close the connection

  4. déjà répondu dans 3

4
Arin