2017-08-30 40 views
9

मैं वेबसाइकिल और कोणीय 4 के साथ आरएक्सजेएस सीखने की कोशिश कर रहा हूं, और here का एक अच्छा उदाहरण मिला। मुझे उम्मीद है कि कोई उदाहरण उदाहरण की व्याख्या करने में मदद कर सकता है क्योंकि कुछ चीजें उलझन में हैं।कोणीय 4 और आरएक्सजेएस भ्रम में वेबसाइटकेट

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

मैं इस बारे में कई सवाल मिल गया है:

  1. 2 सेवाओं को बनाने के लिए क्यों आवश्यक है? कोई विषय पर्यवेक्षक और अवलोकन योग्य नहीं हो सकता है (इसलिए यह केवल दूसरी चैट सेवा के बिना संदेशों को रिले कर सकता है)? 2 सेवाओं को हल करने में क्या समस्या है?
  2. वेबसाइट्स सेवा में, .create फ़ंक्शन कॉल की अंतिम पंक्ति ws.close.bind (ws) क्यों लौटती है? वह क्या करता है
  3. वेबसाइकिल का डिस्कनेक्ट कैसे संभाला जाता है? क्या इसे फिर से कनेक्ट करने का कोई तरीका है?
  4. सेवाओं को वेबसाईट को बंद/निपटान कैसे करना चाहिए?
+1

पोस्टिंग के कुछ सेकंड के भीतर डाउनवॉटेड? मुझे उम्मीद है कि एक स्पष्टीकरण आगामी है। – TSG

+0

यदि आपके पास ये सभी प्रश्न दिमाग में हैं, तो आपको क्या लगता है कि उदाहरण एक अच्छा है? :-)। मेरे लिए बुनियादी, सरल दृष्टिकोण हमेशा बेहतर होते हैं: https://stackoverflow.com/questions/37025837/the-best-way-to-share-websocket-data-between-multiple-components-in-angular-2/37027309# 3702730 9 (दोनों उत्तरों सरल और उपयोगी हैं)। बीटीडब्ल्यू, डाउनवोट का कारण जाहिर है कि प्रश्न बहुत व्यापक है क्योंकि इसे इस तरह से ध्वजांकित किया गया है क्योंकि आपने 4 में से 1 प्रश्न पूछा था, जिसे आप मूल रूप से बहुत व्यापक उम्मीद करते हैं, एक विशिष्ट उत्तर नहीं (मैं भी तर्कहीन डाउनवॉट से नफरत करता हूं)। – echonax

+1

websocket + RxJS + ng2 के लिए प्रलेखन के मामले में बहुत कम है इसलिए मैं उदाहरणों को देखकर अटक गया हूं। यह सबसे सरल उदाहरण है जो मुझे मिल सकता है .... इसलिए मैं इसे समझने की कोशिश कर रहा हूं। मैंने अलग-अलग टुकड़ों का शोध किया है, लेकिन कुछ अभी तक समझ में नहीं आ रहे हैं – TSG

उत्तर

3
  1. Reuseability
  2. ताकि आप नमूदार जो बारी में कनेक्शन
  3. उदाहरण आप यह शायद की तरह (आप chatService का एक उदाहरण है जब)

    कुछ होगा दे दी है में बंद कर देता है की सदस्यता छोड़ सकते
    let sub = chatService.messages.subscribe(()=>{ 
    // do your stuff 
    }); 
    
    // some where in your code 
    sub.unsubscribe() // this will close the connection 
    
  4. पहले से ही 3

में जवाब
+0

क्या आप उत्तर # 2 पर विस्तृत कर सकते हैं - क्यों न केवल सदस्यता के परिणाम को वापस कर देगा, सदस्यता समाप्त करने पर केवल सॉकेट बंद करें? समारोह वापस आने पर तुरंत बंद नहीं होगा? – TSG

+0

बाइंड डब्ल्यूएस के साथ 'यह' के रूप में करीबी कार्य देता है। यह इसे नहीं चलाएगा। सदस्यता छोड़ने वाले फ़ंक्शन को वापस चलाएगा जो कि बंद है() – Arin

+0

बाइंड फ़ंक्शन नहीं चलाता है https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind – Arin

संबंधित मुद्दे