最近接觸到 websocket，由於之前並沒有使用過，所以網上百度一番，最後還是看了一遍 websocket的介紹

上面文章原理上的都說的很明白，所以我就提取出我自己要用的小 demo 來，下面分別是屬性，事件，方法的介紹，為了方便查看故將上面介紹中的順便拿過來。

屬性

readyState (只讀屬性 readyState 表示連接狀態)

0 - 表示連接尚未建立。

1 - 表示連接已建立，可以進行通信。

2 - 表示連接正在進行關閉。

3 - 表示連接已經關閉或者連接不能打開。

事件

Socket.onopen 連接建立時觸發

Socket.onmessage 客戶端接收服務端數據時觸發

Socket.onerror 通信發生錯誤時觸發

Socket.onclose 連接關閉時觸發

方法

Socket.send() 使用連接發送數據

Socket.close() 關閉連接

這樣我們就可以一邊看著下面代碼，也可以看著這些方法事件等來修改 demo。

var ws
var url = "ws://xxxx"
function WebSocketTest() {
  if ("WebSocket" in window) {
    // 打開一個 web socket
    ws = new WebSocket(url);
    ws.onopen = function() {
      
 
// 根據後臺要求拼接好對應的 json 數據(不一定是 json, 看後臺規定)
      var json={
        "test": "test"
      }
      console.log(‘WebSocket 第‘ + n + ‘次請求‘)
      // Web Socket 已連接上，使用 send() 方法發送數據
      ws.send(JSON.stringify(json));
      console.log(‘已連接上 WebSocket‘)
      // 模擬斷開 => 可以開啟下面代碼模擬服務器斷開時重新請求連接的效果
      // setTimeout(function(){
 

      //   ws.onclose()
      // }, 8000)
    };
    ws.onmessage = function (ev) {
      var json = ev.data;
      console.log(‘這裏是接收到服務器發送的數據：‘ + json)
    };
    ws.onclose = function() {
      // 關閉 websocket
      console.log("連接已關閉...")
      // 當監聽到 websocket 連接斷開時,重新連接
      reconnect()
    };
  } else {
     // 瀏覽器不支持 WebSocket
     alert("您的瀏覽器不支持 WebSocket!");
   }
}
var timer = null
// 重新連接
function reconnect () {
  try {
    // 將上一次的定時器清除
    timer && clearTimeout(timer)
    // 這裏將嘗試連接
    WebSocketTest()
  } catch {
    // 當連接失敗時延遲3秒後再次重新請求連接
    timer = setTimeout(function (){
      reconnect()
    }, 3000)
  }
}
// 頁面關閉時觸發
window.onunload = function () {
  if (ws) {
    ws.close()
  }
}
// 頁面刷新時觸發
window.onbeforeunload = function () {
  if (ws) {
    ws.close()
  }
}

websocket的實踐