简易websocket

介绍

在工作中实现人员定位实时更新、实时查看上报信息、音视频通话WEBRTC建立连接等功能时使用到了websockt，故封装一个简易的函数，用于对websocket的地址管理、简化websocket的调用，新增websocket使用场景时也可以更简洁的使用。

基本功能

websocket简易demo，实现了断线重连、控制重连次数、心跳保活、设置心跳时间间隔等功能

属性	类型	介绍
url	String	socket连接地址
relinkTime	Number	重新连接的时间间隔 ,2000 对应2s
relinkLimit	Number	尝试重新连接的次数
heartTime	Number	发送心跳的时间间隔 默认50s发送一次
isReconnect	Boolean	是否开启断线重连

使用示例

XWebSocket({
  url:`url`,// websocket 地址
  relinkTime:2000,// 重新连接的时间间隔
  relinkLimit:10, // 重新连接的次数
  methods:{
  // 接收webscoket传输过来的消息
    message(res){
      let myData = JSON.parse(res.data);
      console.log(myData, "接收的消息");
    }
  }
})

代码

let baseUrl = '/'; // websocket 基础地址

let XWebSocket = null;
// 连接的次数
let relinkLimit = 3
// 连接的时间
let relinkTime = 90000
// 当前连接的计数
let relinkCount = 1
let socketOptions = {
    url: '',
    protocols: [],
}
let handler = {
    open: () => {
    },
    message: () => {
    },
    close: () => {
    },
    reconnect: () => {
    },
    error: () => {
    },
}
// 是否开启断线重连
let isReconnect = true
// 心跳检测定时任务
let heartBeatTimer = null
// 心跳检测发送时间
let heartTime = 50000
export function XWebSocket(param) {
    linkWebSocket(param)
    socketOptions = {...param}
    // 重新连接的次数
    relinkLimit = param['relinkLimit'] || relinkLimit
    // 重新连接的时间
    relinkTime = param['relinkTime'] || relinkTime
    // 心跳检测发送时间
    heartTime = param['heartTime'] || heartTime
    // 是否开启断线重连
    isReconnect = param['isReconnect'] === undefined?isReconnect:param['isReconnect']
    if(param.methods){
        for (let i in param.methods) {
            handler[i] = param.methods[i]
        }
    }

    return XWebSocket
}

function linkWebSocket(param){
    XWebSocket = new WebSocket(baseUrl + param.url);
    XWebSocket.onopen = openHandlerMethod
    XWebSocket.onmessage = messageHandlerMethod
    XWebSocket.onerror = errorHandlerMethod
    XWebSocket.onclose = closeHandlerMethod
}

function openHandlerMethod(e) {
    console.log("开启连接！")
    handler['open'](e)
    // 每次连接成功都重置连接计数
    relinkCount = 1
    // 开启心跳检测
    sendHeartMethod()
}

function messageHandlerMethod(e) {
    handler['message']({data:JSON.parse(e.data),result:e})
    console.log("获取消息")
}

function errorHandlerMethod(e) {
    handler['error'](e)
    console.log("socket 连接错误！")
}

function closeHandlerMethod(e) {
    console.log("socket 连接失败");
    handler['close'](e)
    // 连接失败时关闭心跳检测
    clearInterval(heartBeatTimer)
    if ( isReconnect && relinkCount <= relinkLimit) {
        // 先连接一次连接无效果在连接下一次 增加计数器当超过计数器设定值时不在进行重复调用
        console.log('-------------------------------------------------------------');
        console.log("socket 尝试重新连接" + relinkCount + '次' + relinkLimit + relinkTime);
        setTimeout(() => {
            linkWebSocket(socketOptions)
            relinkCount++
        }, relinkTime * relinkCount)
    } else {
        console.log("socket 尝试重新连接超时");
    }
}

function sendHeartMethod() {
    console.log("心跳检测开启")
    if (XWebSocket && XWebSocket.readyState === 1) {
        heartBeatTimer = setInterval(() => {
            XWebSocket.send("#")
            console.log("心跳检测")
        }, heartTime)
    } else {
        clearInterval(heartBeatTimer)
    }
}