Angular2/Websocket: gelen websocket mesajları için gözlenebilir bir geri dönmek nasıl

Question

Ben gelen mesajları websocket almak ve bu alınan iletileri dayalı bir web sayfasını güncelleştirmek için Angular2 kullanacağım. Şu anda, bir kukla echo websocket servisi kullanıyorum ve yerini alacak.

Anlayışımdan, websocket mesajlarını alan işlevin, web sayfasını güncelleyebilecek bir işleyici tarafından izlenen bir gözlemlenebilir döndürmesi gerekir. Ama gözlemlenebilir bir şekilde nasıl döneceğimi anlayamıyorum.

Kod pasajı aşağıya eklenmiştir. MonitorService, bir web bağlantısı bağlantısı oluşturur ve alınan mesajları içeren bir gözlemlenebilir döndürür. Aşağıda

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

} 

buna web sayfaları üzerinde ve güncellemeler döndü gözlemlenebilir abone başka bileşenidir.

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

Şimdi, tarayıcı konsoluna TypeError: this._subscribe is not a function

Answer 1

yılında bu hatayla ediyorum ben plunker üzerine koydu ve ben WebSocket'e uç noktaya mesaj göndermek için bir fonksiyonu eklendi. İşte önemli düzenleme ise:

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

Güncelleme
Eğer yorumunuzda belirtildiği gibi, daha iyi bir alternatif yolu Observable.fromEvent() için Observable.fromEvent()

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

plunker example kullanmaktır; o (rc.4 itibariyle) henüz hazır gibi

Ayrıca, gözükmüyor, ancak bunu WebSocketSubject kullanarak yapabilirsiniz: soketinden

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

alın onMessage verileri .

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

}