websocket封装及使用

websocket.js封装成utils工具

// websocket实例
let wsObj = null
// ws连接地址
let wsUrl = null
// let userId = null;
// 是否执行重连 true/不执行 ； false/执行
let lockReconnect = false
// 重连定时器
let wsCreateHandler = null
// 连接成功，执行回调函数
let messageCallback = null
// 连接失败，执行回调函数
let errorCallback = null
// 发送给后台的数据
let sendDatas = {}
//后台返回的验证码及文字
export let webData = {}

/**
 * 发起websocket请求函数
 * @param {string} url ws连接地址
 * @param {Object} agentData 传给后台的参数
 * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
 * @param {function} errCallback ws连接错误的回调函数
 */
export const connectWebsocket = (url, successCallback, errCallback ) => {
    wsUrl = url
    createWebSoket()
    messageCallback = successCallback
    errorCallback = errCallback
    // sendDatas = agentData
}

// 手动关闭websocket （这里手动关闭会执行onclose事件）
export const closeWebsocket = () => {
    if (wsObj) {
        writeToScreen('手动关闭websocket')
        wsObj.close() // 关闭websocket
        wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
        // 关闭重连
        lockReconnect = true
        wsCreateHandler && clearTimeout(wsCreateHandler)
        // 关闭心跳检查
        heartCheck.stop()
        //关闭连接切让他为空
        wsObj = null
    }
}

// 创建ws函数
const createWebSoket = () => {
    if (typeof (WebSocket) === 'undefined') {
        writeToScreen('您的浏览器不支持WebSocket,无法获取数据')
        return false
    }
    // const host = window.location.host;
    // userId = GetQueryString("userId");
    // wsUrl = "ws://" + host + "/websoket" + userId;
    if(wsObj == null){
        try {
            wsObj = new WebSocket(wsUrl)
            initWsEventHandle()
        } catch (e) {
            writeToScreen('连接异常，开始重连')
            reconnect()
        }
    }
}

const initWsEventHandle = () => {
    try {
        // 连接成功
        wsObj.onopen = (event) => {
            onWsOpen(event)
            heartCheck.start()
        }

        // 监听服务器端返回的信息
        wsObj.onmessage = (event) => {
            onWsMessage(event)
            heartCheck.start()
        }

        wsObj.onclose = (event) => {
            writeToScreen('onclose执行关闭事件')
            onWsClose(event)
        }

        wsObj.onerror = (event) => {
            writeToScreen('onerror执行error事件,开始重连')
            onWsError(event)
            reconnect()
        }
    } catch (err) {
        writeToScreen('绑定事件没有成功，开始重连')
        reconnect()
    }
}

const onWsOpen = (event) => {
    writeToScreen('CONNECT')
    // // 客户端与服务器端通信
    // wsObj.send('我发送消息给服务端');
    // 添加状态判断，当为OPEN时，发送消息
    if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1
        // 发给后端的数据需要字符串化
        console.log('发送标识', sendDatas)
        wsObj.send(sendDatas)
    }
    if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3
        writeToScreen('wsObj.readyState=3, ws连接异常,开始重连')
        reconnect()
        errorCallback()
    }
}
const onWsMessage = (event) => {
    // let jsonStr = event.data
    writeToScreen('onWsMessage接收到服务器的数据:')
    let jsonStr = JSON.parse(event.data)
    webData = jsonStr
    messageCallback(webData)
}
const onWsClose = (event) => {
    writeToScreen('DISCONNECT')
    // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
    // e.code !== 1000  表示非正常关闭。
    console.log('onclose event: ', event)
    if (event && event.code !== 1000) {
        writeToScreen('非正常关闭')
        errorCallback()
        // 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
        reconnect()
    }
}
const onWsError = (event) => {
    writeToScreen('onWsError: ', event.data)
    errorCallback()
}

const writeToScreen = (massage) => {
    console.log(massage)
}

// 重连函数
const reconnect = () => {
    if (lockReconnect) {
        return
    }
    writeToScreen('3秒后重连')
    lockReconnect = true
    // 没连接上会一直重连，设置延迟避免请求过多
    wsCreateHandler && clearTimeout(wsCreateHandler)
    wsCreateHandler = setTimeout(() => {
        writeToScreen('重连...' + wsUrl)
        createWebSoket()
        lockReconnect = false
        writeToScreen('重连完成')
    }, 3000)
}

// 从浏览器地址中获取对应参数
// eslint-disable-next-line no-unused-vars
const GetQueryString = (name) => {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    // 获取url中 ? 符后的字符串并正则匹配
    let r = window.location.search.substr(1).match(reg)
    let context = ''
    r && (context = r[2])
    reg = null
    r = null
    return context
}

// 心跳检查（看看websocket是否还在正常连接中）
const heartCheck = {
    timeout: 30000,
    timeoutObj: null,
    serverTimeoutObj: null,
    // 重启
    reset() {
        clearTimeout(this.timeoutObj)
        clearTimeout(this.serverTimeoutObj)
        this.start()
    },
    // 停止
    stop() {
        clearTimeout(this.timeoutObj)
        clearTimeout(this.serverTimeoutObj)
    },
    // 开启定时器
    start() {
        this.timeoutObj && clearTimeout(this.timeoutObj)
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
        // 30s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
        this.timeoutObj = setTimeout(() => {
            writeToScreen('心跳检查,发送ping到后台')
            try {
                const datas = { ping: true }
                wsObj.send(JSON.stringify(datas))
            } catch (err) {
                writeToScreen('发送ping异常')
            }
            console.log('内嵌定时器this.serverTimeoutObj: ', this.serverTimeoutObj)
            // 内嵌定时器
            this.serverTimeoutObj = setTimeout(() => {
                writeToScreen('没有收到后台的数据，重新连接')
                reconnect()
            }, 3000)
        }, this.timeout)
    }
}

引用websocket.js至项目中

//websocket连接
import { connectWebsocket, closeWebsocket } from '@/util/websocket'
import { getStore, setStore } from '@/util/store'

mounted() {
    this.userInfo = getStore({ name: 'userInfo' })

    //websocket连接地址
    // let target = 'ws://192.168.1.11:8081/admin';
    let target = 'ws://karts-api.gebiit.cn/smsNoticeWebSocket';
    connectWebsocket(`${target}/${this.userInfo.account}`, (data) => { this.socketData = {...data} }, (err) => { console.log('失败', err) },this.socketData)
  },

在app.vue中监听页面关闭断开连接事件

import {closeWebsocket} from "@/util/websocket"

export default {
  name: "app",
  data() {
    return {
      beforeunloadTime: 0,
      unloadTime: 0
    };
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
    window.addEventListener('unload', e => this.unload(e));
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e));
    window.removeEventListener('unload', e => this.unload(e));
  },
  methods: {
    beforeunloadHandler() {
      this.beforeunloadTime = new Date().getTime()
    },
    unload() {
      this.unloadTime = new Date().getTime()
      window.localStorage.setItem('timer', String(this.unloadTime - this.beforeunloadTime))
      // 本地通过localStorage中的数据看出,关闭事件间隔小于1,刷新则大于8
      if (this.unloadTime - this.beforeunloadTime <= 1) {
        // 执行关闭连接
        closeWebsocket()
      }
    }
  }
};