摘要：前段時間因工作業務需要，簡單了解了一下的概念和前端的使用。總結如下概念是一種協議，通過客戶端和服務器之間的長久的通信，使客戶端和服務器之間可以隨時交換數據。說明建立在協議之上與協議有著良好的兼容性。

前段時間因工作業務需要，簡單了解了一下Websocket的概念和前端的使用。總結如下：

Websocket是一種協議，通過客戶端和服務器之間的長久的TCP通信，使客戶端和服務器之間可以隨時交換數據。

由于http協議只能由客戶端發起通信，如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"：每隔一段時候，就發出一個詢問，了解服務器有沒有新的信息。最典型的場景就是聊天室。Websocket在解決這樣的需求上非常方便。

建立在 TCP 協議之上

與 HTTP 協議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器

數據格式比較輕量，性能開銷小，通信高效

可以發送文本，也可以發送二進制數據

沒有同源限制，客戶端可以與任意服務器通信

協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。

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封裝
 * @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...