websocket长连接

1.安装依赖

2.新建websocket.js文件

import { Notification } from "element-ui";
import store from '../store'
// import { getToken } from "../utils/token";
 
var socket = null;//实例对象
var lockReconnect = false; //是否真正建立连接
// var timeout = store.state?.miaEnv?.heartbeatTimeout || 60 * 1000; //60秒一次心跳
var timeoutObj = null; //心跳倒计时
var serverTimeoutObj = null; //服务心跳倒计时
var timeoutnum = null; //断开 重连倒计时
 
const initWebSocket = async () => {
  if ("WebSocket" in window) {
    // const wsUrl = '链接地址';
    const token = store.state.loginInfo.accessToken
    const miaUniqueCode = store.state.miaEnv.miaUniqueCode
    // 初始化 这里的回调：在不发送数据时，其他链接发送了数据，通过这个回调接收数据
    const wsUrl = `${store.state.miaEnv.miaWebSocketUrl}/websocket?deptId=${store.state.userInfo.deptId}&token=${token}&miaUniqueCode=${miaUniqueCode}`
    console.log('wsUrl',wsUrl)
    socket = new WebSocket(wsUrl);
    socket.onerror = webSocketOnError;
    socket.onmessage = webSocketOnMessage;
    socket.onclose = closeWebsocket;
    socket.onopen = openWebsocket;
  } else {
    Notification.error({
      title: "错误",
      message: "您的浏览器不支持websocket，请更换Chrome或者Firefox",
    });
  }
}
 
//建立连接
const openWebsocket = (e) => {
  start();
}
 
const start = ()=> {
  const timeout = store.state?.miaEnv?.heartbeatTimeout || 60 * 1000; //60秒一次心跳
  //开启心跳
  timeoutObj && clearTimeout(timeoutObj);
  serverTimeoutObj && clearTimeout(serverTimeoutObj);
  timeoutObj = setTimeout(function() {
    console.log("心跳HeartBeat",socket.readyState);
    //这里发送一个心跳，后端收到后，返回一个心跳消息
    if (socket.readyState == 1) {
      //如果连接正常
      socket.send("HeartBeat");
    } else {
      console.log("重连");
      //否则重连
      reconnect();
    }
    
    serverTimeoutObj = setTimeout(function() {
      //超时关闭
      socket.close();
    }, timeout);
  }, timeout);
}
 
//重新连接
const reconnect =() => { 
  if (lockReconnect) {
    return;
  }
  lockReconnect = true;
  //没连接上会一直重连，设置延迟避免请求过多
  timeoutnum && clearTimeout(timeoutnum);
  timeoutnum = setTimeout(function() {
    //新连接
    initWebSocket();
    lockReconnect = false;
  }, 1000);
}
 
//重置心跳
const reset =() => {
  //清除时间
  clearTimeout(timeoutObj);
  clearTimeout(serverTimeoutObj);
  //重启心跳
  start();
}
 
const sendWebsocket =(e) =>{
  socket.send(`我发消息了`);
}
 
const webSocketOnError =(e) => {
  initWebSocket();
  reconnect();
  
}
 
//服务器返回的数据
const webSocketOnMessage=(e) => {
  //判断是否登录
  if (store?.state?.loginInfo?.accessToken && store?.state?.loginInfo?.refreshToken) {
    //window自定义事件[下面有说明]
    window.dispatchEvent(
      new CustomEvent("onmessageWS", {
        detail: {
          data: JSON.parse(e?.data),
        },
      })
    );
  }
  reset();
}
 
const closeWebsocket=(e) => {
  reconnect();
}
 
//断开连接
const close =() => {
//WebSocket对象也有发送和关闭的两个方法，只需要在自定义方法中分别调用send()和close()即可实现。
  socket.close();
}
//具体问题具体分析,把需要用到的方法暴露出去
export default { initWebSocket, sendWebsocket, webSocketOnMessage, close };

3.全局注册

import websocket from './util/websocket';
Vue.prototype.$websocket = websocket;

4.使用

// 登陆
loginSuccess(res) {
    this.$websocket.initWebSocket();//websocket连接
    window.addEventListener("onmessageWS", this.getSocketData);//接收websocket连接后台返回的消息
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
    window.onbeforeunload = () => {
        this.$websocket.close();
    }
},
// 登出
logOff() {
    this.$websocket.close();
},

待补充：订阅模式