Websocket在Angular 4和RxJS混淆中的應用

我正在試着學習Websockets和Angular 4的RxJS，並發現了一個很好的例子here。我希望有人能幫助解釋這個例子，因爲有些事情令人困惑。Websocket在Angular 4和RxJS混淆中的應用

他們創造了2個服務，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); 
    } 

}

和聊天服務：

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

我有一些問題，這個問題：

爲什麼需要創建2個服務？一個主體是不是一個觀察者和可觀察的（所以它可以直接在沒有第二個聊天服務的情況下中繼消息）？解決創建2個服務有什麼問題？
在Websocket服務中，爲什麼.create函數調用的最後一行返回ws.close.bind（ws）？這是做什麼的？
如何處理WebSocket的斷開連接？有沒有辦法讓它重新連接？
服務應該如何關閉/處理WebSocket？

來源

2017-08-30 TSG

在投稿幾秒內投了？我希望有一個解釋。 – TSG

如果你有所有這些問題，是什麼讓你認爲這個例子是一個很好的例子？ :-)。對我來說，簡單的方法總是更好：https：//stackoverflow.com/questions/37025837/the-best-way-to-share-websocket-data-between-multiple-components-in-angular-2/37027309# 37027309（這兩個答案都很簡單而且有用）。順便說一句，downvote的原因顯然是這個問題太廣泛，因爲它被標記爲這種方式，因爲你問4合1問題，你基本上期望一個非常廣泛的，而不是一個具體的答案（我也討厭無理由downvotes）。 – echonax

在websocket + RxJS + ng2的文檔方面有很大的差異，所以我一直在看例子。這是我能找到的最簡單的例子....所以我試圖理解它。我已經研究過各個部分，但有些部分沒有意義 – TSG

可以重新使用
，所以你可以從觀察到的這反過來又關閉在你給它可能會是這樣的（當你有chatService的一個實例）
的例子中，連接

退訂

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

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

已經回答3

來源

2017-09-08 09:47:55 Arin

您能否詳細解答第2個問題 - 爲什麼只返回close的結果只有在取消訂閱時關閉套接字？函數返回時不會立即運行close嗎？ – TSG

Bind以ws返回關閉函數'this'。它不會運行它。取消訂閱將運行返回關閉的函數（） – Arin

綁定不運行函數看這裏https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind – Arin

Websocket在Angular 4和RxJS混淆中的應用

回答

相關問題