कोणीय 2/वेबसाइट: आने वाले वेबसाइकिल संदेशों के लिए एक अवलोकन योग्य कैसे करें

Question

मैं websocket आने वाले संदेशों को प्राप्त करने के लिए कोणीय 2 का उपयोग करने जा रहा हूं और उन प्राप्त संदेशों के आधार पर एक वेबपृष्ठ अपडेट कर रहा हूं। अभी, मैं एक डमी इको वेबस्केट सेवा का उपयोग कर रहा हूं और इसे बदल दूंगा।

मेरी समझ से, वेबसाइकिल संदेशों को प्राप्त करने वाले फ़ंक्शन को एक ऐसे पर्यवेक्षक को वापस करना होगा जो एक हैंडलर द्वारा सब्सक्राइब किया गया हो जो वेबपृष्ठ अपडेट करेगा। लेकिन मैं यह नहीं समझ सकता कि एक अवलोकन योग्य कैसे लौटाया जाए।

कोड स्निपेट नीचे संलग्न है। MonitorService एक वेबसाइकिल कनेक्शन बनाता है और प्राप्त संदेशों वाले एक अवलोकन योग्य लौटाता है।

@Injectable() 
export class MonitorService { 

    private actionUrl: string; 
    private headers: Headers; 
    private websocket: any; 
    private receivedMsg: any; 
    constructor(private http: Http, private configuration: AppConfiguration) { 

     this.actionUrl = configuration.BaseUrl + 'monitor/'; 
     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     this.headers.append('Accept', 'application/json'); 
    } 

    public GetInstanceStatus =(): Observable<Response> => { 
     this.websocket = new WebSocket("ws://echo.websocket.org/"); //dummy echo websocket service 
     this.websocket.onopen = (evt) => { 
      this.websocket.send("Hello World"); 
     }; 

     this.websocket.onmessage = (evt) => { 
      this.receivedMsg = evt; 
     }; 

     return new Observable(this.receivedMsg).share(); 
    } 

} 

नीचे एक और घटक है जो नमूदार ऊपर और अद्यतन से लौटे का सदस्य बनता तदनुसार वेबपेजों है।

export class InstanceListComponent { 
    private instanceStatus: boolean 
    private instanceName: string 
    private instanceIcon: string 
    constructor(private monitor: MonitorService) { 
    this.monitor.GetInstanceStatus().subscribe((result) => { 
     this.setInstanceProperties(result); 
    }); 
    } 

    setInstanceProperties(res:any) { 
    this.instanceName = res.Instance.toUpperCase(); 
    this.instanceStatus = res.Status; 
    if (res.Status == true) 
    { 
     this.instanceIcon = "images/icon/healthy.svg#Layer_1"; 
    } else { 
     this.instanceIcon = "images/icon/cancel.svg#cancel"; 
    } 
    } 
} 

अब, मैं ब्राउज़र कंसोल TypeError: this._subscribe is not a function

Answer 1

में इस त्रुटि में चल रहा हूँ मैं एक plunker पर डाल दिया और मैं WebSocket समाप्ति बिंदु को संदेश भेजने के लिए एक समारोह जोड़ा। यहाँ महत्वपूर्ण संपादित है:

public GetInstanceStatus(): Observable<any>{ 
    this.websocket = new WebSocket("ws://echo.websocket.org/"); //dummy echo websocket service 
    this.websocket.onopen = (evt) => { 
     this.websocket.send("Hello World"); 
    }; 
    return Observable.create(observer=>{ 
     this.websocket.onmessage = (evt) => { 
      observer.next(evt); 
     }; 
    }) 
    .share(); 
} 

अद्यतन
आप अपनी टिप्पणी में उल्लेख किया है, एक बेहतर वैकल्पिक तरीका Observable.fromEvent() के लिए Observable.fromEvent()

websocket = new WebSocket("ws://echo.websocket.org/"); 
public GetInstanceStatus(): Observable<Event>{ 
    return Observable.fromEvent(this.websocket,'message'); 
} 

plunker example उपयोग करने के लिए है,

इसके अलावा, आप हालांकि, यह नहीं दिखता है जैसे कि यह अभी तक तैयार है (rc.4 के रूप में) यह WebSocketSubject उपयोग कर सकते हैं,:

constructor(){ 
    this.websocket = WebSocketSubject.create("ws://echo.websocket.org/"); 
} 

public sendMessage(text:string){ 
    let msg = {msg:text}; 
    this.websocket.next(JSON.stringify(msg)); 
} 

plunker example

Answer 2

प्राप्त onMessage सॉकेट से डेटा ।

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


@Injectable() 

export class HpmaDashboardService { 
private socketUrl: any = 'ws://127.0.0.0/util/test/dataserver/ws'; 
private websocket: any;  

public GetAllInstanceStatus(objStr): Observable<any> { 
     this.websocket = new WebSocket(this.socketUrl); 
     this.websocket.onopen = (evt) => { 
     this.websocket.send(JSON.stringify(objStr)); 
     }; 
     return Observable.create(observer => { 
     this.websocket.onmessage = (evt) => { 
      observer.next(evt); 
     }; 
     }).map(res => res.data).share(); 
} 

**Get only single mesage from socket.** 

    public GetSingleInstanceStatus(objStr): Observable<any> { 
     this.websocket = new WebSocket(this.socketUrl); 
     this.websocket.onopen = (evt) => { 
     this.websocket.send(JSON.stringify(objStr)); 
     }; 
     return Observable.create(observer => { 
     this.websocket.onmessage = (evt) => { 
      observer.next(evt); 
      this.websocket.close(); 
     }; 
     }).map(res => res.data).share(); 
    } 

}