title: Angular2/Websocket: how to return an observable for incoming websocket messages
body: <p>I'm going to use Angular2 to receive websocket incoming messages and update a webpage based on those received messages. Right now, I'm using a dummy echo websocket service and will replace it.</p>
  
  <p>From my understanding, the function which receive websocket messages has to return an observable that is subscribed by a handler who will update the webpage. But I can't figure out how to return an observable.</p>
  
  <p>Code snippet is attached below. The <code>MonitorService</code> creates a websocket connection and return an observable containing the received messages.</p>
  
  <pre><code>@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&lt;Response&gt; =&gt; {
          this.websocket = new WebSocket("ws://echo.websocket.org/"); //dummy echo websocket service
          this.websocket.onopen =  (evt) =&gt; {
              this.websocket.send("Hello World");
          };
  
          this.websocket.onmessage = (evt) =&gt; { 
              this.receivedMsg = evt;
          };
  
          return new Observable(this.receivedMsg).share();
      }
  
  }
  </code></pre>
  
  <p>Below is another component which subscribes to the observable returned from above and updates webpages correspondingly.</p>
  
  <pre><code>export class InstanceListComponent {
    private instanceStatus: boolean
    private instanceName: string
    private instanceIcon: string
    constructor(private monitor: MonitorService) { 
      this.monitor.GetInstanceStatus().subscribe((result) =&gt; {
          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";
      }
    }
  }
  </code></pre>
  
  <p>Now, I'm running into this error in the browser console
  <code>TypeError: this._subscribe is not a function</code></p>