WebSocket的使用

什么是WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

如何实现

废话不多说，直接上连接函数的代码

getWebSocket() {
    var socket;
    //如果浏览器支持WebSocket
    if (window.WebSocket) {
        //参数就是与服务器连接的地址
        socket = new WebSocket("ws://192.168.xxx.xxx:xxxx/ws");
        const self = this
        //客户端收到服务器消息的时候就会执行这个回调方法
        socket.onmessage = function(event) {
            console.log('客户端收到服务器消息的时候就会执行这个回调方法', event.data)
            const k = JSON.parse(event.data)
            if(k.code == 200) {

            }else {
                self.indexcode = k.indexcode
                self.errList = event.data
            }
            console.log('json', k)
        }
        //连接建立的回调函数
        socket.onopen = function(event) {
            console.log('连接建立的回调函数', event)
            if (!window.WebSocket) {
                return;
            }
            //当websocket状态打开
            if (socket.readyState == WebSocket.OPEN) {
                var json = {
                	id: "user001"
                };
                var jsonstr = JSON.stringify(json);
                socket.send(jsonstr);
            } else {
                alert("连接没有开启");
            }
        }

        //连接断掉的回调函数
        socket.onclose = function(event) {
            // var ta = document.getElementById("responseText");
            // ta.value = ta.value + "\n" + "连接关闭";
        }
    } else {
        alert("浏览器不支持WebSocket！");
    }
},

在需要时调用函数和后端连接即可，连接成功后就可以进行调用函数收发数据

附赠一个websocket的class封装

class VueSocket {
  /**
   * @param {string} url
   * @param {function} commit,
   * @param {function} handleData
   */
  constructor(url, commit, handleData = null) {
    this.url = url
    this.commit = commit
    this.distributeData = handleData

    this.ws = null // WebSocket对象
    this.heartbeatTimer = null
    this.errorResetTimer = null // 错误重连轮询器
    this.disconnectSource = '' // 断开来源 'close' 'error'
    this.disconnectNumber = 0 // 重连次数
    this.errorDispatchOpen = true // 开启错误调度
    this.closeSocket = false
    this.init()
  }

  /**
    * @description 错误调度
    * @param {string} type 断开来源 => 'close' | 'error
    * @returns {function}
    */
  static errorDispatch(type) {
    return () => {
      if (this.disconnectSource === '' && this.errorDispatchOpen) {
        this.disconnectSource = type
      }

      console.log(`[Disconnected] WebSocket disconnected from ${type} event`)

      // socket断开处理
      if (this.disconnectSource === type && !this.closeSocket) {
        this.errorResetTimer && clearTimeout(this.errorResetTimer)
        VueSocket.handleDisconnect()
      }
    }
  }
  /**
   * @description 重连尝试
   * @returns {undefined}
   */
  static handleDisconnect() {
    // 重连4次宣布失败
    if (this.reconnectNumber >= 4) {
      this.reconnectNumber = 0
      this.disconnectSource = ''
      this.errorResetTimer = null
      this.errorDispatchOpen = false
      this.ws = null
      console.log('[failed] WebSocket connect failed')
    }
    // 重连尝试
    this.errorResetTimer = setTimeout(() => {
      this.init()
      this.reconnectNumber++
      console.log(`[socket reconnecting ${this.reconnectNumber} times...]`)
    }, this.reconnectNumber * 1000)
  }
  /**
   * @description 事件轮询器
   * @param {number | string} 开始条件 事件
   * @param {number | string} outerCondition 停止条件
   * @param {number} time
   * @param {function} callback
   */
  eventPoll(event, outerCondition, time, callback) {
    let currentCondition
    const timer = setInterval(() => {
      if (currentCondition === outerCondition) {
        clearInterval(timer)
        callback && callback()
      }
      currentCondition = event.call(this)
    }, time)
  }
  /**
   * @description 初始化连接，开始订阅消息
   * @param {function} callback
   */
  init(callback) {
    // 如果已经手动关闭socket，则不允许初始化
    if (this.closeSocket) {
      throw new Error('[Error] WebSocket has been closed.')
    }

    // 清除心跳检测计时器
    this.heartbeatTimer && clearTimeout(this.heartbeatTimer)
    this.ws = new WebSocket(this.url)

    this.ws.onopen = () => {
      callback && callback()
      this.reconnectNumber = 0
      this.disconnectSource = ''
      this.errorResetTimer = null
      this.errorDispatchOpen = true
      // 订阅消息
      this.subscribe()
      // 开启心跳侦测
      this.heartbeatDetect()
      console.log('[Open] Connected')
    }

    this.ws.onclose = VueSocket.errorDispatch('close')
    this.ws.onerror = VueSocket.errorDispatch('error')
  }

  /**
   * @description 订阅器
   */
  subscribe() {
    this.ws.onmessage = (res) => {
      if (res.data) {
        const data = JSON.parse(res.data)
        // 根据任务类型，分发数据
        try {
          this.distributeData && this.distributeData(data, this.commit)
        } catch (e) {
          console.log(e)
        }
      }
      // 收到消息关闭上一个心跳定时器并启动新的定时器
      this.heartbeatDetect()
    }
  }

  /**
   * @description 发布器（组件发消息的）
   * @param {String} data
   * @param {Function} callback
   */
  emit(data, callback) {
    const state = this.getSocketState()
    if (state === this.ws.OPEN) {
      this.ws.send(JSON.stringify(data))
      callback && callback()
      this.heartbeatDetect()
    } else if (state === this.ws.CONNECTING) {
      // 连接中轮询
      this.eventPoll(this.getSocketState, this.ws.OPEN, 500, () => {
        this.ws.send(JSON.stringify(data))
        callback && callback()
        this.heartbeatDetect()
      })
    } else {
      this.init(() => {
        this.emit(data, callback)
      })
    }
  }

  /**
   * @description 获取当前socket
   */
  getSocketState() {
    return this.ws.readyState
  }
  /**
   * @description 手动连接
   */
  open() {
    if (!this.closeSocket) {
      throw new Error('[Error] WebSocket is connected')
    }
    this.heartbeatTimer = null
    this.reconnectNumber = 0
    this.disconnectSource = null
    this.errorDispatchOpen = true
    this.closeSocket = false
    this.init()
  }
  /**
   * @description 手动关闭连接
   */
  close() {
    this.heartbeatTimer && clearTimeout(this.heartbeatTimer)
    this.errorResetTimer && clearTimeout(this.errorResetTimer)
    this.closeSocket = true
    this.ws.close()
  }
  /**
   *  @description 心跳侦测
   */
  heartbeatDetect() {
    this.heartbeatTimer && clearTimeout(this.heartbeatTimer)
    this.heartbeatTimer = setTimeout(() => {
      const state = this.getSocketState()
      if (state === WebSocket.OPEN || state === WebSocket.CONNECTING) {
        const heart = { socketType:'heart' }
        this.ws.send(JSON.stringify(heart))
        this.heartbeatDetect()
      } else {
        this.init()
      }
    }, 5000)
  }
}

export default VueSocket

最后

以上就是webSocket的使用方法，看完有帮助的小伙伴点个赞再走吧