整體上就是一個web socket服務(wù)小例子。報(bào)錯信息如下：
這是啥原因呢？

component.ts

export class WebSocketComponent implements OnInit {
  constructor(private wsService: WebSocketService) { }
  ngOnInit() {
    this.wsService.createObservableSocket("ws://localhost:8085").subscribe(
      data => console.log(data),
      err => console.log(err),
      () => console.log("流已經(jīng)結(jié)束")
    );
  }
  sendMessageToServer() {
    this.wsService.sendMessage("Hello from client");
  }
}

瀏覽器定位：(service.ts)

控制臺輸出：

====================================================
完整代碼如下：
1.服務(wù)器端：

import {Server} from 'ws';
const wsServer = new Server({port:8085});
wsServer.on("connection", websocket => {
    websocket.send("這個消息是服務(wù)器主動推送的！");
    websocket.on("message", message => {
        console.log("接收到消息：" + message)
    })
})

2.客戶端Serves：

export class WebSocketService {
  ws: WebSocket;
  constructor() { }
   createObservableSocket(url: string): Observable<any> {
     this.ws = new WebSocket(url);   
     return new Observable(
       observer => {                 
         this.ws.onmessage = (event) => observer.next(event.data);
         this.ws.onerror = (event) => observer.error(event);
         this.ws.onclose = (event) => observer.complete();
       }
     );
   }
   sendMessage(message: string) {
     this.ws.send(message);
   }
}

3.客戶端控制器TS：

export class WebSocketComponent implements OnInit {

  constructor(private wsService: WebSocketService) { }
  ngOnInit() {
    this.wsService.createObservableSocket("ws://localhost:8085").subscribe(
      data => console.log(data),
      err => console.log(err),
      () => console.log("流已經(jīng)結(jié)束")
    );
  }
  sendMessageToServer() {
    this.wsService.sendMessage("Hello from client");
  }
}