前言

Websocket是一種用于在服務器和客戶端之間實作高效的雙向通信的機制，通過WebSocket，其目的是在應用和服務器進行頻繁雙向通信時，可以使服務器避免打開多個HTTP連接進行作業來節約資源，提高了作業效率和資源利用率，

WebSocket相關

1. 建構式

WebSocket(url,protocols)構造函器會回傳一個 WebSocket 物件，

url指WebSocket服務器將回應的URL，
protocols可選欄位，代表選擇的子協議，

2. 常用屬性

• WebSocket.url是一個只讀屬性，對應建構式創建WebSocket實體物件時的URL，
• WebSocket.readyState回傳當前WebSocket 的鏈接狀態，只讀，對應值為整型，如下：
  • 0 (WebSocket.CONNECTING) 正在鏈接中
  • 1 (WebSocket.OPEN) 已經鏈接并且可以通訊
  • 2 (WebSocket.CLOSING) 連接正在關閉
  • 3 (WebSocket.CLOSED) 連接已關倍訓者沒有鏈接成功
• WebSocket.onopen屬性定義建立連接并可以通訊時觸發的回呼函式，也就是readyState 變為1時呼叫;
• WebSocket.onmessage該屬性定義一個當收到來自服務器的訊息時觸發的回呼函式，
• WebSocket.onerror定義一個發生錯誤時執行的回呼函式，此事件的事件名為"error"，
• WebSocket.onclose屬性回傳一個事件監聽器，這個事件監聽器將在 WebSocket 連接的readyState 變為3時被呼叫，

websocket封裝

websocket.js代碼如下：

/* websocket.js */
// 判斷字串是否是JSON格式
function isJSON(str) {
  if (typeof str === 'string') {
    try {
      const obj = JSON.parse(str);
      if (typeof obj === 'object' && obj) {
        return true;
      }
      return false;
    } catch (e) {
      console.log('error：' + str + '!!!' + e);
      return false;
    }
  }
  return false;
}
class Socket {
  /**
   * 建構式
   * @param {object} params 建構式引數
   */
  constructor(params) {
    window.WebSocket = window.WebSocket || window.MozWebSocket;
    if (!window.WebSocket) { // 檢測瀏覽器支持
      console.error('錯誤: 瀏覽器不支持websocket');
      return;
    }
    this.websocket = null;
    this.params = params;
    this.socketInit(params);
  }

  /**
   * 初始化socket
   * @param {string}   url     WebSocket服務器將回應的URL,必傳，
   * @param {function} onopen  open事件的回呼函式
   * @param {function} onclose close事件的回呼函式
   * @param {function} one rror error事件的回呼函式
   * @param {function} onclose close事件的回呼函式
   */
  socketInit({
    url, onopen, onmessage, one rror, onclose,
  }) {
    if (url !== undefined) {
      this.websocket = new WebSocket(url);
      // 用于指定連接成功后的回呼函式，
      this.websocket.onopen = (e) => {
        console.log('連接成功', e);
        if (typeof onopen === 'function') {
          onopen(e);
        }
      };
      // 用于指定當從服務器接受到資訊時的回呼函式，
      this.websocket.onmessage = (e) => {
        console.log('接收資料', e);
        if (typeof onmessage === 'function') {
          const res = isJSON(e.data) ? JSON.parse(e.data) : e.data;
          onmessage(res);
        }
      };
      // 用于指定連接關閉后的回呼函式，
      this.websocket.onclose = (e) => {
        console.log('連接關閉', e);
        if (typeof onclose === 'function') {
          onclose(e);
        }
      };
      // 用于指定連接失敗后的回呼函式，
      this.websocket.onerror = (e) => {
        console.log('連接例外', e);
        if (typeof one rror === 'function') {
          onerror(e);
        }
      };
    }
  }

  // 發送訊息
  send(message) {
    // readyState 1 表示已經鏈接并且可以通訊
    if (!this.websocket || this.websocket.readyState !== 1) {
      console.log('請確認websocket是否已經鏈接并且可以通訊');
      return;
    }
    this.websocket.send(JSON.stringify(message));
  }

  // 手動關閉socket
  close() {
    if (!this.websocket) {
      console.log('websocket 不可用');
      return;
    }
    this.websocket.close();
  }
}
export default Socket;

使用方式

代碼如下（示例）：

import Socket from '@/utils/websocket';

let websocket;
const params = {
  url: 'ws://127.0.0.1:8081',
  onopen: () => {
  	// 建立連接時發送相關資料 
  	const token = "xxxx"
  	websocket.send(token);
  },
  onmessage: (res) => {
    // 接收資料后的業務代碼
  },
  onclose: () => {
    // 連接關閉時觸發的回呼函式
  },
};
websocket = new Socket(params);

業務處理完可以手動關閉連接

websocket.close();