Angular 4中的Websocket和RxJS混淆

TSG*_*TSG 11 websocket rxjs typescript angular

我正在尝试使用websockets和Angular 4学习RxJS,并在这里找到了一个很好的例子.我希望有人可以帮助解释这个例子,因为有些事情令人困惑.

他们创建了2个Angular服务,即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);
  }

}
Run Code Online (Sandbox Code Playgroud)

和聊天服务:

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
                }
            });
    }
}
Run Code Online (Sandbox Code Playgroud)

我对此有很多疑问:

  1. 为什么需要创建2个服务?主题不能成为观察者和观察者(因此它可以直接中继消息而无需第二个聊天服务)?问题是解决创建2个服务的问题?
  2. 在Websocket服务中,为什么.create函数调用的最后一行返回ws.close.bind(ws)?那是做什么的?
  3. 如何处理websocket的断开连接?有没有办法让它重新连接?
  4. 服务如何关闭/处置websocket?

Ari*_*rin 4

  1. 可重复使用性
  2. 这样你就可以取消订阅 observable,从而关闭连接
  3. 在您给出的示例中,它可能类似于(当您有一个 chatService 实例时)

    let sub = chatService.messages.subscribe(()=>{ 
    // do your stuff 
    });
    
    // some where in your code
    sub.unsubscribe() // this will close the connection
    
    Run Code Online (Sandbox Code Playgroud)
  4. 已经在3回答了