使用socket实现长连接

我们常用的Ajax请求，是HTTP请求，请求过程是建立连接、客户端发送请求给服务器、服务端返回结果给客户端、关闭连接，这称为短连接。

若想要实现长连接，即一直保持连接，而且服务器甚至可以直接发消息通知客户端，则需要使用socket技术。

代码实现如下：

mounted() {
  this.initWebSocket()
}

socket相关函数如下：

initWebSocket() { // 初始化weosocket
  const wsuri = WS_URL + '/createConnect'
  this.websock = new WebSocket(wsuri + '?token=' + getToken() + '&connectId=' + uuid.v1())
  this.websock.onmessage = this.websocketonmessage
  this.websock.onopen = this.websocketonopen
  this.websock.onerror = this.websocketonerror
  this.websock.onclose = this.websocketclose
},
websocketonopen() { // 连接建立之后执行send方法发送数据
  const data = Object.assign({}, { 'pageSize': 10, 'pageNum': 1 })
  const actions = { 'data': data, 'module': 'getColdAlarmLog' }
  this.websocketsend(JSON.stringify(actions))
},
websocketonerror() { // 连接建立失败重连
  activeToken().then(rspData => {
    if (rspData.data.code === 200) {
      setTimeout(this.initWebSocket(), 15000)
    }
  })
},
websocketonmessage(e) { // 数据接收
  let socketReturnVal = JSON.parse(e.data)
  console.log('socketReturnVal', socketReturnVal)
  if (socketReturnVal == 'alarmFlag') {
    Message.info('监听到新的告警信息')
    this.handleQuery()
  }
},
websocketsend(data) { // 数据发送
  this.websock.send(data)
},
websocketclose(e) { // 关闭
  console.log('断开连接', e)
  activeToken().then(rspData => {
    console.log("正在进行重连1-1")
    if (rspData.data.code === 200) {
      console.log("正在进行重连1-2")
      setTimeout(this.initWebSocket(), 15000)
    }
  })
}

其中，WS_URL的值为ws://localhost:8901

上面的代码需要导入uuid库

"vue-uuid": "^1.1.1"

import { uuid } from 'vue-uuid'

socket技术常用于监控中，即后台产生告警消息，前端接受到消息（onmessage）做出响应。