创建webSocketServer(服务器端)

webSocket 是一种低负载的二进制协议，目前主流的浏览器都支持了webSocket协议，在node.js的生态圈中很多项目都实现了webSocket协议，本次使用的是ws，也就是说用wsl来实现一个webSocket服务器

const Ws = require('ws')
const wsServer = new Ws.Server({port:8085});
// 建立连接
wsServer.on("connection",websocket => {
    websocket.send("这个消息是服务器主动推送的");
      //将客户端发过来的消息直接返回回去
    websocket.on('message', message => {
        websocket.send('返回给客户端'+ message)
        console.log('客户端发来的消息'+ message)
    })
 });
 

在客户端创建webSocketService

• 创建一个服务，服务中声明一个webSocket

ng g service shared/webSocket

• 写两个方法：接收服务器端的消息 和 发送消息到服务器

import { Observable } from 'rxjs';

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: any) {
    this.ws.send(JSON.stringify(message));
  }
}

• 在组件中使用

// 引入服务
import { WebSocketService } from '../shared/web-socket.service';
export class WebSocketComponent implements OnInit {
  public messages: Array<string> =[]
   // 注入服务 也叫声明
  constructor(private wsService: WebSocketService) { }

  ngOnInit() {
    // 订阅了服务器发送过来的消息 连接websocket
    this.wsService.createObservableSocket("ws://localhost:8085")
    .subscribe(
      data => this.messages.push(data),
      err => console.log(err),
      () => console.log("流已经结束")
    );
  }

  //此方法需要在html模板中写明
  sendMessageToServer(){
    this.wsService.sendMessage("hello from client");
  }
}