vue 消息推送 WebSocket

1、创建WebSocket.js文件

2、设置链接

const url = "localhost:8080"

3、方法

class WebSocketClass {
  constructor() {
    this.instance = null;
    this.connect();
  }
  static getInstance() {
    if (!this.instance) {
      this.instance = new WebSocketClass();
    }
    return this.instance;
  }
  // 创建连接
  connect() {
    this.ws = new WebSocket(url);
    this.ws.onopen = e => {
      this.heartCheck();
      this.getMessage();
    };
  }
  // 心跳
  heartCheck() {
    const _this = this;
    // 心跳状态
    this.state = setInterval(() => {
      if (_this.ws.readyState === 1) {
        _this.ws.send("/Heart");
      } else {
        this.closeHandle(); // 重新连接
        console.log("状态未连接");
      }
    }, 60000);
  }
  closeHandle() {
    if (this.state) {
      console.log(`断开，重连websocket`);
      // 清除定时器;
      clearInterval(this.state);
      this.connect(); // 重连
    } else {
      console.log(`websocket手动关闭,或者正在连接`);
    }
  }
  // 收/发信息
  getMessage() {
    this.ws.onmessage = e => {
      if (e.data) {
        const newsData = JSON.parse(e.data);
        // 接收到消息
        console.log(`newsData`);
      }
    };
  }
  // 关闭
  close() {
    this.ws.close();
    console.log("关闭连接");
  }
}

export default WebSocketClass;

4、消息状态

// readyState
// 0 - 表示连接尚未建立。
// 1 - 表示连接已建立，可以进行通信。
// 2 - 表示连接正在进行关闭。
// 3 - 表示连接已经关闭或者连接不能打开。

5、调用（加载页面中调用）

import WebSocketClass from "@/utils/websocket.js";
// 创建消息连接
const ws = new WebSocketClass();
ws.getMessage();