angular5 组件中使用websocket通信

angular4+以上的版本，不需要安装websocket的插件，可以使用其自带的websocket

import { Component, HostListener, ViewChild } from '@angular/core';

@Component({
  selector: '',
  templateUrl: ''
})

export class AppHeaderComponent {

  socket = new WebSocket("ws://后端websocket地址/"  );
  msgModalCxt; // 用于页面展示推送消息

  。。。

  // 监听组件是否关闭或浏览器刷新，然后关闭websocket
  @HostListener('window:beforeunload', ['$event'])
  doSomething($event) {
    this.CloseWebSocket()
  }

  ngOnInit(): void {

    if (typeof (WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    } else {
      this.socket.onopen = function () {
        console.log("Socket 已打开");
      };
      //监听后端推送的消息事件
      this.listenSocket()
      //发生了错误事件
      this.socket.onerror = function () {
        alert("Socket发生了错误");
      };
    }
  }
  //监听后端推送的消息事件
  listenSocket() {
   
    let _this = this
    this.socket.onmessage = function (msg) {
        _this.msgModalCxt = msg.data
        //此处写收到消息后的处理逻辑
    }
  }
  // 关闭webSocket
  CloseWebSocket() {
    this.socket.close() // 主动关闭
    //监听关闭事件
    this.socket.onclose = function (e) {
      console.log("Socket已关闭");
      // 关闭操作逻辑
    };
  }

}