1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/**
 * @desc webSocket
 * @param {Object} callbackSet 回调集合，用于接收到消息返回到相关页面
 */

const WBT = function (callbackSet) {
  const protocol = window.location.protocol == 'http:' ? 'ws://' : 'wss://'
  const host = window.location.host
  // 接口地址url
  this.url = protocol + host + '/websocket/katsuki' //ws://xxx.com/websocket/katsuki
  // socket对象
  this.socket = null
  // 重连延迟
  this.socketTime = null
  // 重连状态 避免不间断的重连操作
  this.isReconnect = false
  // 断开连接
  this.isClose = false

  // 心跳包，到时间断开重连来保持长链接
  this.heartCheck = {
    timeout: 120000,
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
      clearTimeout(this.timeoutObj)
      clearTimeout(this.serverTimeoutObj)
      return this
    },
    start: function (ws) {
      const self = this
      this.serverTimeoutObj = setTimeout(() => {
        let token = window.localStorage.getItem('token')
        let send = { topic: 'katsuki-websocket', tags: 'HELLO', token: token, param: '' }
        if (ws) {
          ws.send(JSON.stringify(send))
          self.timeoutObj = setTimeout(function () {
            ws.close()
          }, self.timeout)
        }
      }, this.timeout)
    },
  }

  // 自定义ws连接函数：服务器连接成功
  this.onopen = (e) => {
    this.heartCheck.reset().start(this.socket)
    console.log('Socket连接已经打开')
  }
  // 自定义ws消息接收函数：服务器向前端推送消息时触发
  this.onmessage = (msg) => {
    this.heartCheck.reset().start(this.socket)
    try {
      let value = JSON.parse(msg.data)
      if (value instanceof Object && value.actionCode) {
        this.handleEvent(value, callbackSet)
      }
    } catch (error) {
      console.error('获取信息失败', error)
    }
  }
  // 自定义ws异常事件：ws报错后触发
  this.onerror = () => {
    console.log('error')
    this.reConnect()
  }
  // 自定义ws关闭事件：ws连接关闭后触发
  this.onclose = () => {
    if (!this.isClose) {
      this.heartCheck.reset()
      this.reConnect()
      console.log('reConnect')
    }
  }

  this.shutDown = () => {
    this.isClose = true
    this.heartCheck.reset()
    this.socket.close()
    console.log('Socket连接已断开')
  }

  this.initWs()
}

// 初始化websocket连接
WBT.prototype.initWs = function () {
  window.WebSocket = window.WebSocket || window.MozWebSocket
  // 检测浏览器支持
  if (!window.WebSocket) {
    console.error('错误: 浏览器不支持websocket')
    return
  }
  // 这里是用户登录才触发socket，根据需要做判断
  let token = window.localStorage.getItem('token')
  if (token) {
    this.socket = new WebSocket(this.url)

    this.socket.onopen = (e) => {
      let send = { topic: 'katsuki-websocket', tags: 'HELLO', token: token, param: '' }
      this.socket.send(JSON.stringify(send))
      this.onopen(e)
    }
    this.socket.onmessage = (msg) => {
      this.onmessage(msg)
    }
    this.socket.onerror = (e) => {
      this.onerror(e)
    }
    this.socket.onclose = (e) => {
      this.onclose(e)
    }
    return this
  } else {
    this.reConnect()
  }
}

// 断线重连
WBT.prototype.reConnect = function () {
  if (this.isReconnect) return
  if (this.socketTime) {
    clearTimeout(this.socketTime)
  }
  this.isReconnect = true
  // 没连上会一直重连，设置延迟避免请求过多
  this.socketTime = setTimeout(() => {
    this.initWs()
    this.isReconnect = false
  }, 2000)
}

// 处理消息
WBT.prototype.handleEvent = function (value, callbackSet) {
  const action = value.actionCode // 和后台约定的处理
  // 根据 action和actionCode处理事件
  if (this.handleAction[action]) this.handleAction[action](value, callbackSet)
}

WBT.prototype.handleAction = {
  // 某消息接收成功
  'katsuki-success': (value, callbackSet) => {
    const param = value ? JSON.parse(value.actionParam) : null
    callbackSet.functionName(param) // 将参数传递到页面
  },
}

export { WBT }

// 调用
import { WBT } from '@/utils/socket'
const socket = new WBT(cb)