前端Websocket的使用

前段时间因工做业务须要，简单了解了一下Websocket的概念和前端的使用。总结以下：

概念：

Websocket是一种协议，经过客户端和服务器之间的长久的TCP通讯，使客户端和服务器之间能够随时交换数据。

使用场景：

因为http协议只能由客户端发起通讯，若是服务器有连续的状态变化，客户端要获知就很是麻烦。咱们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。Websocket在解决这样的需求上很是方便。

说明：

• 创建在 TCP 协议之上
• 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，而且握手阶段采用 HTTP 协议，所以握手时不容易屏蔽，能经过各类 HTTP 代理服务器
• 数据格式比较轻量，性能开销小，通讯高效
• 能够发送文本，也能够发送二进制数据
• 没有同源限制，客户端能够与任意服务器通讯
• 协议标识符是ws（若是加密，则为wss），服务器网址就是 URL。

API介绍：

• WebSocket构造函数: 新建WebSocket实例后，会建立客户端与服务端的WebSocket链接
  let ws = new WebSocket(url)
• WebSocket实例的当前状态：

ws.readyState // 0: 'CONNECTING',表示正在链接
                  // 1: 'OPEN', 表示链接成功，能够通讯了
                  // 2: 'CLOSING', 表示链接正在关闭
                  // 3: 'CLOSED', 表示链接已经关闭，或者打开链接失败。

• WebSocket实例的事件：

ws.onopen = function () {} // 指定链接成功后的回调函数
    ws.onclose = function () {} // 指定链接关闭后的回调函数
    ws.onmessage = function () {} // 指定收到服务器数据后的回调函数
    ws.onerror = function () {} // 指定报错时的回调函数

• WebSocket实例向后台推送消息的方法：
  ws.send(message)

WebSocket应用实例

/* WebSocket封装
 * @param url: WebSocket接口地址与携带参数必填
 * @param onOpenFunc: WebSocket的onopen回调函数，若是不须要可传null
 * @param onMessageFunc: WebSocket的onmessage回调函数，若是不须要可传null
 * @param onCloseFunc: WebSocket的onclose回调函数，若是不须要可传null
 * @param onErrorFunc: WebSocket的onerror回调函数，若是不须要可传null
 * @param heartMessage: 发送后台的心跳包参数,必填 (给服务端的心跳包就是按期给服务端发送消息)
 * @param timer: 给后台传送心跳包的间隔时间，不传时使用默认值3000毫秒
 * @param isReconnect: 是否断掉当即重连，不传true时不重连
*/
function useWebSocket (url, onOpenFunc, onMessageFunc, onCloseFunc, onErrorFunc, heartMessage, timer, isReconnect) {
  let isConnected = false // 设定已连接webSocket标记
  // websocket对象
  let ws = null
  // 建立并连接webSocket
  let connect = () => {
    // 若是未连接webSocket，则建立一个新的webSocket
    if (!isConnected) {
      ws = new WebSocket(url)
      isConnected = true
    }
  }
  // 向后台发送心跳消息
  let heartCheck = () => {
    ws.send(JSON.stringify(heartMessage))
  }
  // 初始化事件回调函数
  let initEventHandle = () => {
    ws.addEventListener('open', (e) => {
      console.log('onopen', e)
      // 给后台发心跳请求，在onmessage中取得消息则说明连接正常
      heartCheck()
      // 若是传入了函数，执行onOpenFunc
      if (!onOpenFunc) {
        return false
      } else {
        onOpenFunc(e)
      }
    })
    ws.addEventListener('message', (e) => {
      console.log('onmessage', e)
      // 接收到任何后台消息都说明当前链接是正常的
      if (!e) {
        console.log('get nothing from service')
        return false
      } else {
        // 若是获取到后台消息，则timer毫秒后再次发起心跳请求给后台，检测是否断连
        setTimeout(() => {
          heartCheck()
        }, !timer ? 3000 : timer)
      }
      // 若是传入了函数，执行onMessageFunc
      if (!onMessageFunc) {
        return false
      } else {
        onMessageFunc(e)
      }
    })
    ws.addEventListener('close', (e) => {
      console.log('onclose', e)
      // 若是传入了函数，执行onCloseFunc
      if (!onCloseFunc) {
        return false
      } else {
        onCloseFunc(e)
      }
      if (isReconnect) { // 若是断开当即重连标志为true
        // 从新连接webSocket
        connect()
      }
    })
    ws.addEventListener('error', (e) => {
      console.log('onerror', e)
      // 若是传入了函数，执行onErrorFunc
      if (!onErrorFunc) {
        return false
      } else {
        onErrorFunc(e)
      }
      if (isReconnect) { // 若是断开当即重连标志为true
        // 从新连接webSocket
        connect()
      }
    })
  }
  // 初始化webSocket
  (() => {
    // 1.建立并连接webSocket
    connect()
    // 2.初始化事件回调函数
    initEventHandle()
    // 3.返回是否已链接
    return ws
  })()
}

// WebSocket函数使用实例
useWebSocket( url, // url
              null, // onopen回调
              (e) => { // onmessage回调
                let res = JSON.parse(e.data) // 后端返回的数据
                console.log(res)
              },
              null, // onclose回调
              null, // onerror回调
              { // 心跳包消息
                "action": "9999",
                "eventType": "100",
                "requestId": ""
              },
              null, // 传送心跳包的间隔时间
              true // 断掉当即重连
)

参考地址： http://www.ruanyifeng.com/blo...