zoukankan      html  css  js  c++  java
  • H5即时通讯Websocket

    /**
     * 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
  • 相关阅读:
    Devexpress GridView 数据格式化显示
    贝叶斯算法
    贝叶斯算法
    科普 | 7 个步骤入门区块链
    科普 | 7 个步骤入门区块链
    漫画:Spring Boot、Java多线程、分布式、Java架构的高级架构师进阶之路
    漫画:Spring Boot、Java多线程、分布式、Java架构的高级架构师进阶之路
    ARP协议工作原理[同网段及跨网段]
    ARP协议工作原理[同网段及跨网段]
    过滤DataTable数据的Select()方法
  • 原文地址:https://www.cnblogs.com/webSciprt/p/8319918.html
Copyright © 2011-2022 走看看