WebSocket 原理、使用、封装

ws.binaryType = 'blob'
ws.onmessage = function (e) {
  if (e.data instanceof Blob) {
    console.log('Blob message received', e.data)
    var blob = new Blob(e.data)
  }
}

ws.binaryType = 'arraybuffer'
ws.onmessage = function (e) {
  if (e.data instanceof ArrayBuffer) {
    console.log('ArrayBuffer Message Received', +e.data) // e.data即ArrayBuffer类型
    var a = new Uint8Array(e.data)
  }
}

const WebSocket = require('ws').Server
const port = 8000

// 创建服务器
const server = new WebSocket({ port }, () => {
  console.log('websocket 服务开启')
})

// 建立连接
server.on('connection', handleConnection)

function handleConnection(ws) {
  console.log('websocket 服务连接')
  ws.on('message', handleMessage)
  ws.on('close', handleClose)
  ws.on('error', handleError)
}

// 注意：因为这里用到this的指向，因此用普通的函数
function handleMessage(data) {
  const { mode, msg } = JSON.parse(data)
  switch (mode) {
    case 'MESSAGE':
      console.log('---User message---')
      this.send(JSON.stringify(JSON.parse(data)))
      break
    case 'HEART_BEAT':
      console.log('---HeartBeat message---')
      this.send(JSON.stringify(JSON.parse(data)))
      break
    default:
      break
  }
}

function handleClose(e) {
  console.log('websocket 服务关闭', e)
  this.send(
    JSON.stringify({
      mode: 'MESSAGE',
      msg: 'websocket 服务关闭'
    })
  )
}

function handleError(e) {
  console.log('websocket 服务错误', e)
}

const WS_MODE = {
  MESSAGE: 'MESSAGE', // 普通消息
  HEART_BEAT: 'HEART_BEAT' // 心跳
}

class MyWebSocket extends WebSocket {
  constructor(url) {
    super(url)
    this.wsUrl = url

    this.init()
  }

  static create(url) {
    return new MyWebSocket(url)
  }

  init() {
    this.bindEvent()
  }

  bindEvent() {
    this.addEventListener('open', this.handleOpen, false)
    this.addEventListener('close', this.handleClose, false)
    this.addEventListener('error', this.handleError, false)
    this.addEventListener('message', this.handleMessage, false)
  }

  handleOpen() {
    console.log('---Client is connected---')
  }

  handleClose() {
    console.log('---Client is closed---')
  }

  handleError(e) {
    console.log('---Client is error---', e)
  }

  handleMessage(data) {
    const { mode, msg } = this.receiveMsg(data)

    switch (mode) {
      case WS_MODE.MESSAGE:
        console.log('---接受服务端消息---', msg)
        break
      case WS_MODE.HEART_BEAT:
        console.log('---HEART_BEAT---')
      default:
        break
    }
  }

  receiveMsg({ data }) {
    return JSON.parse(data)
  }

  sendMsg(data) {
    if (this.readyState === WebSocket.OPEN) {
      this.send(JSON.stringify(data))
    } else {
      console.log('websocket 未连接，请稍后再试！')
    }
  }
}

export default MyWebSocket

// ...
let connections = new Set()

server.on('connection', handleConnection)

function handleConnection(ws) {
  console.log('websocket 服务连接')
  // ...
  connections.add(ws)
  ws.on('pong', () => {
    console.log('pong received')
  })
  ws.ping()
}

setInterval(() => {
  connections.forEach(socket => {
    socket.ping()
    console.log('ping~~')
  })
}, 5000)

// ...

const HEART_BEAT_INTERVAL = 30000 // 心跳检测间隔
const RECONNECT_TIMEOUT = 3000 // 3s后重连

const WS_MODE = {
  MESSAGE: 'MESSAGE', // 普通消息
  HEART_BEAT: 'HEART_BEAT' // 心跳
}

class MyWebSocket extends WebSocket {
  constructor(url, wsReConnect) {
    super(url)
    this.wsUrl = url
    this.heartBeatTimer = null
    this.reconnectingTimer = null
    this.isReConnecting = false // 判断是否已经开启了重连
    this.wsReConnect = wsReConnect

    this.init()
  }

  static create(url, wsReConnect) {
    return new MyWebSocket(url, wsReConnect)
  }

  init() {
    this.bindEvent()
  }

  bindEvent() {
    this.addEventListener('open', this.handleOpen, false)
    this.addEventListener('close', this.handleClose, false)
    this.addEventListener('error', this.handleError, false)
    this.addEventListener('message', this.handleMessage, false)
  }

  handleOpen() {
    console.log('---Client is connected---')
    // 开启心跳检测
    this.startHeartBeat()
  }

  handleClose() {
    console.log('---Client is closed---')

    // 取消心跳检测定时器和重新连接定时器
    if (this.heartBeatTimer) {
      clearInterval(this.heartBeatTimer)
      this.heartBeatTimer = null
    }
    if (this.reconnectingTimer) {
      clearTimeout(this.reconnectingTimer)
      this.reconnectingTimer = null
    }

    // 重连
    this.reconnect()
  }

  handleError(e) {
    console.log('---Client is error---', e)

    // 重连
    this.reconnect()
  }

  handleMessage(data) {
    const { mode, msg } = this.receiveMsg(data)

    switch (mode) {
      case WS_MODE.MESSAGE:
        console.log('---接受服务端消息---', msg)
        break
      case WS_MODE.HEART_BEAT:
        console.log('---HEART_BEAT---')
      default:
        break
    }
  }

  receiveMsg({ data }) {
    return JSON.parse(data)
  }

  sendMsg(data) {
    if (this.readyState === 1) {
      this.send(JSON.stringify(data))
    } else {
      console.log('websocket 未连接，请稍后再试！')
    }
  }

  startHeartBeat() {
    this.heartBeatTimer = setInterval(() => {
      if (this.readyState === WebSocket.OPEN) {
        this.sendMsg({
          mode: WS_MODE.HEART_BEAT,
          msg: WS_MODE.HEART_BEAT
        })
      }
    }, HEART_BEAT_INTERVAL)
  }

  reconnect() {
    // 因为 handleError 和 handleClose 都会触发重连
    // 当连接错误时会触发两次重连，所以这要判断只执行一次
    if (this.isReConnecting) return
    this.isReConnecting = true
    // 没连接上会一直重连，用定时器设置延迟避免请求过多
    this.reconnectingTimer = setTimeout(() => {
      this.wsReConnect()
      this.isReConnecting = false
    }, RECONNECT_TIMEOUT)
  }
}

export default MyWebSocket