即时通讯Websocket实现流程

1.这里使用的Websocket版本 1.0.34

2.代码:

import WebSocket from 'websocket'
var webSocket = null
var againTime = null
export const initWebsocket = () => {
  webSocket = WebSocket.w3cwebsocket('后端提供的接口')
  return new Promise(resolve => {
    if (window.WebSocket) {
      webSocket.onopen = () => {
        webSocket.send('大屏连接成功')
        clearTimeout(againTime)
      }
      webSocket.onmessage = e => {
        clearTimeout(againTime)
        //监听接口返回的状态和数据
        resolve({ type: 'message', data: e })
      }
      webSocket.onerror = () => {
        clearTimeout(againTime)
        changeWebSocket()
      }
      webSocket.onclose = () => {
        changeWebSocket()
      }
    } else {
      alert('浏览器不支持web')
    }
  })
}

//重连webSocket
const changeWebSocket = () => {
  if (againTime) {
    clearTimeout(againTime)
  }
  againTime = setInterval(() => {
    if (!navigator.onLine) {
      return
    }
    //判断连接状态
    if (!(webSocket.readyState == 0)) {
      initWebsocket()
    }
  }, 3000)
}

3.调用webscoket

initWebsocket().then(res => {
    console.log(res)  
})