2017-08-30 64 views
9

Próbuję nauczyć się RxJS z websockets i Angular 4, i znalazłem dobry przykład here. Mam nadzieję, że ktoś może pomóc w wyjaśnieniu tego przykładu, ponieważ kilka rzeczy jest mylących.Websocket w Angular 4 i RxJS confusion

Oni stworzyli 2 Usługi kanciasty usługa 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); 
    } 

} 

i usługę czatu:

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

Mam kilka pytań na ten temat:

  1. Dlaczego konieczne jest utworzenie 2 usług? Czy podmiot nie może być obserwatorem i być obserwowalnym (aby mógł przekazywać wiadomości bezpośrednio bez drugiej usługi czatu)? Jaki problem rozwiązuje tworzenie 2 usług?
  2. W usłudze Websocket, dlaczego ostatnia linia wywołania funkcji .create zwraca ws.close.bind (ws)? Co to oznacza?
  3. Jak przebiega rozłączenie websocket? Czy istnieje sposób na ponowne połączenie?
  4. W jaki sposób usługi powinny zamknąć/zlikwidować websocket?
+1

Downvoted w ciągu kilku sekund od opublikowania? Mam nadzieję, że pojawi się wyjaśnienie. – TSG

+0

Jeśli masz na uwadze wszystkie te pytania, dlaczego uważasz, że ten przykład jest dobry? :-). Dla mnie podstawowe, proste podejścia są zawsze lepsze: https://stackoverflow.com/questions/37025837/the-best-way-to-share-websocket-data-between-multiple-components-in-angular-2/37027309# 37027309 (obie odpowiedzi są proste i użyteczne). Przy okazji wydaje się, że przyczyna spadku jest zbyt szeroka, ponieważ została oznaczona w ten sposób, ponieważ zadałeś pytanie 4 w 1, na które zasadniczo oczekujesz bardzo szerokiej, a nie konkretnej odpowiedzi (ja też nie cierpię lekkich zniżek). – echonax

+1

Istnieje BARDZO MAŁA pod względem dokumentacji dla websocket + RxJS + ng2, więc utknąłem patrząc na przykłady. To najprostszy przykład, jaki mogłem znaleźć ... więc próbuję to zrozumieć. Zbadałem poszczególne części, ale niektóre nie mają jeszcze sensu. – TSG

Odpowiedz

3
  1. MoŜliwość wykorzystania
  2. , dzięki czemu można zrezygnować z zaobserwować, co z kolei zamyka połączenie
  3. na przykład dałeś prawdopodobnie byłoby coś jak (jeśli masz instancję chatService)

    let sub = chatService.messages.subscribe(()=>{ 
    // do your stuff 
    }); 
    
    // some where in your code 
    sub.unsubscribe() // this will close the connection 
    
  4. już odpowiedział 3

+0

Czy mógłbyś rozwinąć odpowiedź # 2 - dlaczego zwrócenie wyniku zamknięcia tylko zamknięcie gniazda po anulowaniu subskrypcji? Czy zamknięcie nie nastąpi natychmiast po powrocie funkcji? – TSG

+0

Bind zwraca funkcję close z ws jako "this". To go nie uruchomi. Anuluj subskrypcję uruchomi zwróconą funkcję, która jest bliska() – Arin

+0

Bind nie uruchamia funkcji tutaj https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind – Arin