摘要：前段時(shí)間因工作業(yè)務(wù)需要，簡(jiǎn)單了解了一下的概念和前端的使用?？偨Y(jié)如下概念是一種協(xié)議，通過(guò)客戶端和服務(wù)器之間的長(zhǎng)久的通信，使客戶端和服務(wù)器之間可以隨時(shí)交換數(shù)據(jù)。說(shuō)明建立在協(xié)議之上與協(xié)議有著良好的兼容性。

前段時(shí)間因工作業(yè)務(wù)需要，簡(jiǎn)單了解了一下Websocket的概念和前端的使用。總結(jié)如下：

Websocket是一種協(xié)議，通過(guò)客戶端和服務(wù)器之間的長(zhǎng)久的TCP通信，使客戶端和服務(wù)器之間可以隨時(shí)交換數(shù)據(jù)。

由于http協(xié)議只能由客戶端發(fā)起通信，如果服務(wù)器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時(shí)候，就發(fā)出一個(gè)詢問(wèn)，了解服務(wù)器有沒(méi)有新的信息。最典型的場(chǎng)景就是聊天室。Websocket在解決這樣的需求上非常方便。

建立在 TCP 協(xié)議之上

與 HTTP 協(xié)議有著良好的兼容性。默認(rèn)端口也是80和443，并且握手階段采用 HTTP 協(xié)議，因此握手時(shí)不容易屏蔽，能通過(guò)各種 HTTP 代理服務(wù)器

數(shù)據(jù)格式比較輕量，性能開(kāi)銷小，通信高效

可以發(fā)送文本，也可以發(fā)送二進(jìn)制數(shù)據(jù)

沒(méi)有同源限制，客戶端可以與任意服務(wù)器通信

協(xié)議標(biāo)識(shí)符是ws（如果加密，則為wss），服務(wù)器網(wǎng)址就是 URL。

WebSocket構(gòu)造函數(shù): 新建WebSocket實(shí)例后，會(huì)創(chuàng)建客戶端與服務(wù)端的WebSocket連接
let ws = new WebSocket(url)

WebSocket實(shí)例的當(dāng)前狀態(tài)：

    ws.readyState // 0: "CONNECTING",表示正在連接
                  // 1: "OPEN", 表示連接成功，可以通信了
                  // 2: "CLOSING", 表示連接正在關(guān)閉
                  // 3: "CLOSED", 表示連接已經(jīng)關(guān)閉，或者打開(kāi)連接失敗。

WebSocket實(shí)例的事件：

    ws.onopen = function () {} // 指定連接成功后的回調(diào)函數(shù)
    ws.onclose = function () {} // 指定連接關(guān)閉后的回調(diào)函數(shù)
    ws.onmessage = function () {} // 指定收到服務(wù)器數(shù)據(jù)后的回調(diào)函數(shù)
    ws.onerror = function () {} // 指定報(bào)錯(cuò)時(shí)的回調(diào)函數(shù)

WebSocket實(shí)例向后臺(tái)推送消息的方法：
ws.send(message)

/* WebSocket封裝
 * @param url: WebSocket接口地址與攜帶參數(shù)必填
 * @param onOpenFunc: WebSocket的onopen回調(diào)函數(shù)，如果不需要可傳null
 * @param onMessageFunc: WebSocket的onmessage回調(diào)函數(shù)，如果不需要可傳null
 * @param onCloseFunc: WebSocket的onclose回調(diào)函數(shù)，如果不需要可傳null
 * @param onErrorFunc: WebSocket的onerror回調(diào)函數(shù)，如果不需要可傳null
 * @param heartMessage: 發(fā)送后臺(tái)的心跳包參數(shù),必填 (給服務(wù)端的心跳包就是定期給服務(wù)端發(fā)送消息)
 * @param timer: 給后臺(tái)傳送心跳包的間隔時(shí)間，不傳時(shí)使用默認(rèn)值3000毫秒
 * @param isReconnect: 是否斷掉立即重連，不傳true時(shí)不重連
*/
function useWebSocket (url, onOpenFunc, onMessageFunc, onCloseFunc, onErrorFunc, heartMessage, timer, isReconnect) {
  let isConnected = false // 設(shè)定已鏈接webSocket標(biāo)記
  // websocket對(duì)象
  let ws = null
  // 創(chuàng)建并鏈接webSocket
  let connect = () => {
    // 如果未鏈接webSocket，則創(chuàng)建一個(gè)新的webSocket
    if (!isConnected) {
      ws = new WebSocket(url)
      isConnected = true
    }
  }
  // 向后臺(tái)發(fā)送心跳消息
  let heartCheck = () => {
    ws.send(JSON.stringify(heartMessage))
  }
  // 初始化事件回調(diào)函數(shù)
  let initEventHandle = () => {
    ws.addEventListener("open", (e) => {
      console.log("onopen", e)
      // 給后臺(tái)發(fā)心跳請(qǐng)求，在onmessage中取得消息則說(shuō)明鏈接正常
      heartCheck()
      // 如果傳入了函數(shù)，執(zhí)行onOpenFunc
      if (!onOpenFunc) {
        return false
      } else {
        onOpenFunc(e)
      }
    })
    ws.addEventListener("message", (e) => {
      console.log("onmessage", e)
      // 接收到任何后臺(tái)消息都說(shuō)明當(dāng)前連接是正常的
      if (!e) {
        console.log("get nothing from service")
        return false
      } else {
        // 如果獲取到后臺(tái)消息，則timer毫秒后再次發(fā)起心跳請(qǐng)求給后臺(tái)，檢測(cè)是否斷連
        setTimeout(() => {
          heartCheck()
        }, !timer ? 3000 : timer)
      }
      // 如果傳入了函數(shù)，執(zhí)行onMessageFunc
      if (!onMessageFunc) {
        return false
      } else {
        onMessageFunc(e)
      }
    })
    ws.addEventListener("close", (e) => {
      console.log("onclose", e)
      // 如果傳入了函數(shù)，執(zhí)行onCloseFunc
      if (!onCloseFunc) {
        return false
      } else {
        onCloseFunc(e)
      }
      if (isReconnect) { // 如果斷開(kāi)立即重連標(biāo)志為true
        // 重新鏈接webSocket
        connect()
      }
    })
    ws.addEventListener("error", (e) => {
      console.log("onerror", e)
      // 如果傳入了函數(shù)，執(zhí)行onErrorFunc
      if (!onErrorFunc) {
        return false
      } else {
        onErrorFunc(e)
      }
      if (isReconnect) { // 如果斷開(kāi)立即重連標(biāo)志為true
        // 重新鏈接webSocket
        connect()
      }
    })
  }
  // 初始化webSocket
  (() => {
    // 1.創(chuàng)建并鏈接webSocket
    connect()
    // 2.初始化事件回調(diào)函數(shù)
    initEventHandle()
    // 3.返回是否已連接
    return ws
  })()
}

// WebSocket函數(shù)使用實(shí)例
useWebSocket( url, // url
              null, // onopen回調(diào)
              (e) => { // onmessage回調(diào)
                let res = JSON.parse(e.data) // 后端返回的數(shù)據(jù)
                console.log(res)
              },
              null, // onclose回調(diào)
              null, // onerror回調(diào)
              { // 心跳包消息
                "action": "9999",
                "eventType": "100",
                "requestId": ""
              },
              null, // 傳送心跳包的間隔時(shí)間
              true // 斷掉立即重連
)   

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