Angular2/Websocket: Wie gebe ich eine Observable für eingehende Websocket-Nachrichten zurück?

Question

Ich werde Angular2 verwenden, um eingehende Web-Socket-Nachrichten zu empfangen und eine Webseite basierend auf diesen empfangenen Nachrichten zu aktualisieren. Im Moment benutze ich einen Dummy-Echo-Websocket-Dienst und werde ihn ersetzen.

Aus meiner Sicht muss die Funktion, die Websocket-Nachrichten empfangen, eine Observable zurückgeben, die von einem Handler abonniert wurde, der die Webseite aktualisieren wird. Aber ich kann nicht herausfinden, wie man ein Observable zurückgibt.

Code-Snippet ist unten beigefügt. Die MonitorService erstellt eine Websocket-Verbindung und gibt eine Observable zurück, die die empfangenen Nachrichten enthält.

Unten ist eine weitere Komponente, die die observable von oben zurückgegeben abonniert und aktualisiert Webseiten entsprechend.

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

Jetzt bin ich in der Browser-Konsole TypeError: this._subscribe is not a function

Answer 1

ich es auf einem plunker setzen in diesen Fehler läuft und ich hinzugefügt Nachricht an den Websocket Endpunkt eine Funktion zum Senden. Hier ist die wichtige edit:

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

aktualisieren
Wie Sie in Ihrem Kommentar erwähnt, eine bessere Alternative Art und Weise ist Observable.fromEvent()

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

plunker example für Observable.fromEvent() zu verwenden;

Auch können Sie es WebSocketSubject mit tun, obwohl es sieht nicht, wie es noch bereit ist (Stand rc.4):

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

Get onMessage Daten aus der Steckdose .

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

}