H5即时通讯Websocket

2018-06-24 01:19:58来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

/**
 * Created by admin on 2017/8/19.
 */
// import Vue from 'vue'
// import axios from './HTTP.js'
// Vue.use(axios)
import * as DB from './DBDATA.js'
// import qs from 'qs'
const WebSocketMsg = function (_self, url) {
  let obj = {}
  obj.infoData = DB.INFO_DATA
  obj.ws = null
  obj.lockReconnect = false   // 避免重复连接
  // obj.wsUrl = 'ws://192.168.1.90:8080/service-jcj/websocket'   // 通讯地址
  obj.createWebSocket = function () {      // 通讯开启事件
    try {
      obj.ws = new WebSocket(url)
      obj.initEventHandle()
    } catch (e) {
      obj.reconnect(url)
    }
  }

  obj.initEventHandle = function () {     // 通讯操作事件   开启 消息 关闭 错误
    obj.ws.onclose = function () {
      obj.reconnect(url)      // 通讯重连
      console.log('通讯关闭')
    }
    obj.ws.onerror = function () {
      obj.reconnect(url)       // 通讯重连
      console.log('通讯错误')
    }
    obj.ws.onopen = function () {
      // 心跳检测重置
      obj.heartCheck.reset()      // 心跳检测重置
      obj.heartCheck.start()      // 心跳检测开启
      console.log('通讯开启')
    }
    obj.ws.onmessage = function (event) {
      // 如果获取到消息,心跳检测重置
      // 拿到任何消息都说明当前连接是正常的
      obj.heartCheck.reset()      // 心跳检测重置
      obj.heartCheck.start()      // 心跳检测开启
      console.log('通讯消息')
      console.log(event)
    }
  }
  obj.reconnect = function () {        // 通讯重连
    if (obj.lockReconnect) {        // 如果为真 结束事件 为假 执行后续事件
      return
    }
    obj.lockReconnect = true
    // 没连接上会一直重连,设置延迟避免请求过多
    setTimeout(function () {
      obj.createWebSocket(url)    //  新开启通讯
      obj.lockReconnect = false
    }, 2000)
  }
  // 心跳检测
  obj.heartCheck = {
    timeout: 6000,   // 60秒
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
      clearTimeout(this.timeoutObj)
      clearTimeout(this.serverTimeoutObj)
      return this
    },
    start: function () {
      let that = this
      that.timeoutObj = setTimeout(function () {
        // 这里发送一个心跳,后端收到后,返回一个心跳消息,
        // onmessage拿到返回的心跳就说明连接正常
        obj.ws.send('@')   // 向后端发送消息 如果后端接收  则重置心跳
        that.serverTimeoutObj = setTimeout(function () {  // 如果超过一定时间还没重置,说明后端主动断开了
          obj.ws.close()  // 如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
        }, that.timeout)
      }, that.timeout)
    }
  }
  return obj
}
export default WebSocketMsg

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:词法作用域

下一篇:Vue.js之路由