Angular2/Websocket: wie die Rückkehr einer beobachtbaren, für eingehende websocket-Nachrichten
Werde ich Angular2 zu erhalten websocket-Nachrichten und eine Seite aktualisieren basierend auf den empfangenen Nachrichten. Jetzt nutze ich eine dummy-echo-websocket-service und ersetzen Sie es.
Aus meinem Verständnis, die Funktion, die erhalten websocket-Nachrichten zu schicken, beobachtbare abonniert ist, um einen handler, der wird die Webseite aktualisiert. Aber ich kann nicht herausfinden, wie man eine Rückkehr zu beobachten.
Code-snippet ist unten angehängt. Die MonitorService
schafft eine websocket-Verbindung, und eine observable mit den empfangenen Nachrichten.
@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();
}
}
Unten ist eine weitere Komponente, die abonniert die beobachtbaren kehrte von oben und Aktualisierungen von 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";
}
}
}
Nun, ich bin in dieser Fehler in der browser-Konsole
TypeError: this._subscribe is not a function
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich Sie auf eine plunker und ich fügte hinzu, eine Funktion für das senden von Nachricht an den Websocket endpoint. Hier ist die wichtige änderung:
Update
Als Sie erwähnt in Ihrem Kommentar, eine bessere alternative ist die Verwendung
Observable.fromEvent()
plunker Beispiel für
Observable.fromEvent()
;Können, können Sie auch tun es mit
WebSocketSubject
, obwohl, es sieht nicht so aus wie es ist bereit, noch (wie von rc.4):plunker Beispiel
return Observable.fromEvent(websocket, 'message');
haben Sie irgendwelche Ideen über Ihre Unterschiede?fromEvent
Weg ist nur ein wrapper für das Ereignis, das ist, was ich in meiner Antwort. Ich bezweifle, dass es da Unterschiede gibt. Aber, es ist ein besserer Weg, als meine Antwort trotzdem :D. ich werde es zu aktualisieren, meine Antwort aufzunehmen. DankfromEvent
. Btw, sollte nichtWebSocketSubject
verwendet werden, für die streaming-Daten? (Ich Frage mich nur, ich bin neu auf websockets).fromEvent
undWebSocketSubject
. Über die VerwendungWebSocketSubject
, ich wußte es von Ihnen, wie es scheint, es ist neu und noch nicht fertig. Sobald es fertig, werden Es meine erste Wahl.Bekommen onMessage-Daten aus der Buchse.