webscoket.js封装使用

1，建立webscoket.js，进行封装

import store from '../store/index.js'// 不引用一下的话，vuex存储会报错
let webpackIp = 'ws://1111111111111111'
let wsConnectionOrder = {
  $wsOrder: null,
  lockReturn: false,
  timeout: 60 * 1000 * 5,
  timeoutObj: null,
  timeoutNum: null,
  // 初始化webSocket长连接
  initWebSocket: function () {
    let user_id = JSON.parse(localStorage.getItem('user_id'))
    console.log('webpackid有了么----' + user_id)
    let wsuri = webpackIp + '?channel=' + user_id
    this.$wsOrder = new WebSocket(wsuri)
    this.$wsOrder.onopen = this.wsOpen
    this.$wsOrder.onclose = this.wsClose
    this.$wsOrder.onmessage = this.wsMsg
    this.$wsOrder.onerror = this.wsError
  },
  // 打开websocket
  wsOpen: function (e) {
    // 开始websocket心跳
    console.log('-----------------------------建立ghzchcgsdjkcgsdku-----------------------------------')
    wsConnectionOrder.startWsHeartbeat()
    console.log('orderws success')
  },
  wsClose: function (e) {
    wsConnectionOrder.reconnect()
  },
  wsMsg: function (e) {
    console.log('----------------------接收ghzchcgsdjkcgsdku------------------------')
    console.log(e)
    // 服务端发送来的消息存到vuex（先存储消息再重置心跳）
    store.commit('scoketData', {
      scoket: e.data
    })
    // 每次接收到服务端消息后 重置websocket心跳
    wsConnectionOrder.resetHeartbeat()
  },
  wsError: function (e) {
    wsConnectionOrder.reconnect()
  },
  // 重启websocket
  reconnect: function () {
    console.log('重启函数')
    let _this = this
    if (_this.lockReturn) {
      return
    }
    _this.lockReturn = true
    _this.timeoutNum && clearTimeout(_this.timeoutNum)
    _this.timeoutNum = setTimeout(function () {
      _this.initWebSocket()
      _this.lockReturn = false
    }, 1000)
  },
  // 开启websocket
  startWsHeartbeat: function () {
    let _this = this
    _this.timeoutObj && clearInterval(_this.timeoutObj)
    _this.timeoutObj = setInterval(function () {
      // 发送消息给服务端
      _this.$wsOrder.send('')
      // 判断websocket当前状态
      if (_this.$wsOrder.readyState !== 1) {
        _this.reconnect()
      }
    }, _this.timeout)
  },
  // 重置websocket心跳
  resetHeartbeat: function () {
    let _this = this
    clearInterval(_this.timeoutObj)
    _this.startWsHeartbeat()
  }
}
// 抛出websocket对象
export default {
  wsConnectionOrder
}

// import { store } from '../store/index.js'
// let webpackIp = 'ws://10.31.0.184:5679'
// // let webpackIp = 'ws://10.31.0.21:5678'
// let scoket = {
//   reconnect () { // 重新连接
//     var that = this
//     if (that.lockReconnect) {
//       return
//     }
//     that.lockReconnect = true
//     // 没连接上会一直重连，设置延迟避免请求过多
//     that.timeoutnum && clearTimeout(that.timeoutnum)
//     that.timeoutnum = setTimeout(function () {
//       // 新连接
//       that.initWebSocket()
//       that.lockReconnect = false
//     }, 5000)
//   },
//   initWebSocket () { // 初始化weosocket
//     let wsuri = ''
//     let user_id = JSON.parse(localStorage.getItem('user_id'))
//     console.log('webpackid有了么----' + user_id)
//     wsuri = webpackIp + '?channel=' + user_id
//     console.log(wsuri)
//     this.websock = new WebSocket(wsuri)
//     this.websock.onopen = this.websocketonopen
//     this.websock.onmessage = this.websocketonmessage
//     this.websock.onerror = this.websocketonerror
//   },
//   websocketonopen () { // 连接建立之后执行send方法发送数据
//     console.log('-----------------------------建立ghzchcgsdjkcgsdku-----------------------------------')
//     // 开启心跳
//     // this.start()
//     // let user_id = JSON.parse(localStorage.getItem('user_id'))
//     // this.websocketsend(JSON.stringify(user_id))
//   },
//   websocketonerror () { // 连接建立失败重连
//     this.initWebSocket()
//     // 重连
//     // this.reconnect()
//   },
//   websocketonmessage (e) { // 数据接收
//     console.log(this)
//     let that = this
//     console.log(that)
//     console.log('-----------------------------接收ghzchcgsdjkcgsdku-----------------------------------')
//     console.log(e)
//     store.commit('scoketData', {
//       scoket: e
//     })
//   },
//   websocketsend (Data) { // 数据发送
//     console.log('-----------------------------发送ghzchcgsdjkcgsdku-----------------------------------')
//     this.websock.send(Data)
//   },
//   websocketclose (e) { // 关闭
//     console.log('断开连接', e)
//   },
//   start () {
//     // console.log('开启心跳');
//     const self = this
//     let _num = 3
//     self.timeoutObj && clearTimeout(self.timeoutObj)
//     self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
//     self.timeoutObj = setTimeout(function () {
//       // 这里发送一个心跳，后端收到后，返回一个心跳消息，
//       if (self.websock.readyState === 1) { // 如果连接正常
//         // console.log(self.websock);
//         self.websock.send(heartCheck)
//       } else { // 否则重连
//         self.reconnect()
//       }
//       self.serverTimeoutObj = setTimeout(function () {
//         // 超时关闭
//         _num--
//         // 计算答复的超时次数
//         if (_num === 0) {
//           self.websocketclose()
//         }
//       }, self.timeout)
//     }, self.timeout)
//   },
//   reset () {
//     // console.log('重置心跳');
//     var that = this
//     // 清除时间
//     clearTimeout(that.timeoutObj)
//     clearTimeout(that.serverTimeoutObj)
//     // 重启心跳
//     that.start()
//   }
// }
// export default {
//   scoket
// }

// import { store } from '../store/index.js'
// import store from '../store/index.js'
// let Socket = ''
// let setIntervalWesocketPush = null
// /**
//  * 建立websocket连接
//  * @param {string} url ws地址
//  */
// const initWebSocket = url => {
//   Socket && Socket.close()
//   if (!Socket) {
//     console.log('建立websocket连接')
//     let webpackIp = 'ws://10.31.0.184:5679'
//     let user_id = JSON.parse(localStorage.getItem('user_id'))
//     let url = webpackIp + '?channel=' + user_id
//     Socket = new WebSocket(url)
//     Socket.onopen = onopenWS
//     Socket.onmessage = onmessageWS
//     Socket.onerror = onerrorWS
//     Socket.onclose = oncloseWS
//   } else {
//     console.log('websocket已连接')
//   }
// }

// /** 打开WS之后发送心跳 */
// const onopenWS = () => {
//   console.log('-----------------------------建立ghzchcgsdjkcgsdku-----------------------------------')
//   sendPing()
// }

// /** 连接失败重连 */
// const onerrorWS = () => {
//   Socket.close()
//   clearInterval(setIntervalWesocketPush)
//   console.log('连接失败重连中')
//   if (Socket.readyState !== 3) {
//     Socket = null
//     initWebSocket()
//   }
// }

// /** WS数据接收统一处理 */
// const onmessageWS = e => {
//   console.log('-----------------------------接收ghzchcgsdjkcgsdku-----------------------------------')
//   console.log(this)
//   console.log(e)
//   store.commit('scoketData', {
//     scoket: e.data
//   })
// }

// /**
//  * 发送数据但连接未建立时进行处理等待重发
//  * @param {any} message 需要发送的数据
//  */
// const connecting = message => {
//   setTimeout(() => {
//     if (Socket.readyState === 0) {
//       connecting(message)
//     } else {
//       Socket.send(JSON.stringify(message))
//     }
//   }, 1000)
// }

// /**
//  * 发送数据
//  * @param {any} message 需要发送的数据
//  */
// const sendWSPush = message => {
//   if (Socket !== null && Socket.readyState === 3) {
//     Socket.close()
//     initWebSocket()
//   } else if (Socket.readyState === 1) {
//     Socket.send(JSON.stringify(message))
//   } else if (Socket.readyState === 0) {
//     connecting(message)
//   }
// }

// /** 断开重连 */
// const oncloseWS = () => {
//   clearInterval(setIntervalWesocketPush)
//   console.log('websocket已断开....正在尝试重连')
//   if (Socket.readyState !== 2) {
//     Socket = null
//     initWebSocket()
//   }
// }
// /** 发送心跳
//  * @param {number} time 心跳间隔毫秒 默认5000
//  * @param {string} ping 心跳名称 默认字符串ping
//  */
// const sendPing = (time = 5000, ping = 'ping') => {
//   clearInterval(setIntervalWesocketPush)
//   Socket.send(ping)
//   setIntervalWesocketPush = setInterval(() => {
//     Socket.send(ping)
//   }, time)
// }
// export default {
//   initWebSocket
// }

2，main.js中引入

import wsConnectionOrder from './api/webscoket'
Vue.prototype.$scoket = wsConnectionOrder

3，在需要使用的页面，需要调用哪个方法，直接调用

　　

this.$scoket.wsConnectionOrder.initWebSocket()