介紹

WebSocket用於在Web瀏覽器和伺服器之間進行任意的雙向資料傳輸的一種技術。WebSocket協議基於TCP協議實現，包含初始的握手過程，以及後續的多次資料幀雙向傳輸過程。其目的是在WebSocket應用和WebSocket伺服器進行頻繁雙向通訊時，可以使伺服器避免開啟多個HTTP連線進行工作來節約資源，提高了工作效率和資源利用率。

API介紹

1. 建構函式WebSocket(url, protocols)：構造WebSocket物件，以及建立和伺服器連線; protocols可選欄位，代表選擇的子協議
2. 狀態變數readyState: 代表當前連線的狀態，短整型資料，取值為CONNECTING
   (值為0)， OPEN(值為1), CLOSING(值為2), CLOSED(值為3)
3. 方法變數close(code, reason)： 關閉此WebSocket連線。
4. 狀態變數bufferedAmount: send函式呼叫後，被快取並且未傳送到網路上的資料長度
5. 方法變數send(data): 將資料data通過此WebSocket傳送到對端
6. 回撥函式onopen/onmessage/onerror/onclose: 當相應的事件發生時會觸發此回撥函式

程式碼

這裡採用封裝的思想 WBT

var WBT = function (obj) {
    /*
    websocket介面地址
    1、http請求還是https請求 字首不一樣
	2、ip地址host
    3、埠號
    */
    const config = obj ? obj : {}
    const protocol = (window.location.protocol == 'http:') ? 'ws://' : 'wss://';
    const host =  window.location.host;
    const port = ':8087';
    //介面地址url
    this.url = config.ip || protocol + host + port;
    //socket物件
    this.socket;
    //心跳狀態  為false時不能執行操作 等待重連
    this.isHeartflag = false;
    //重連狀態  避免不間斷的重連操作
    this.isReconnect = false;
    //自定義Ws連線函式：伺服器連線成功
    this.onopen = ((e) => {
        this.isHeartflag = true;
    	console.log(e)
    })
    //自定義Ws訊息接收函式：伺服器向前端推送訊息時觸發
    this.onmessage = ((e) => {
        //處理各種推送訊息
// console.log(message)
        this.handleEvent(message)
    })
    //自定義Ws異常事件：Ws報錯後觸發
    this.onerror = ((e) => {
        console.log('error')
       this.isHeartflag = false;
        this.reConnect();
    })
    //自定義Ws關閉事件：Ws連線關閉後觸發
    this.onclose = ((e) => {
        this.reConnect()
        console.log('close')
    })
    //初始化websocket連線
    this.initWs()
}
 

初始化 initWs

//初始化websocket連線 
WBT.prototype.initWs = function () {
	 window.WebSocket = window.WebSocket || window.MozWebSocket;
	 if (!window.WebSocket) { // 檢測瀏覽器支援  			
	     console.error('錯誤: 瀏覽器不支援websocket');
	     return;
	 }
	 var that = this;
	 this.socket = new WebSocket(this.url); // 建立連線並註冊響應函式  
	 this.socket.onopen = function (e) {
	     that.onopen(e);
	 };
	 this.socket.onmessage = function (e) {
	     that.onmessage(e);
	 };
	 this.socket.onclose = function (e) {
	     that.onclose(e);
	     that.socket = null; // 清理  		
	 };
	 this.socket.onerror = function (e) {
	     that.onerror(e);
	 }
	 return this;											
}
 

斷線重連 reConnect

WBT.prototype.reConnect = function () {
    if (this.isReconnect) return;
    this.isReconnect = true;
    //沒連線上會一直重連，設定延遲避免請求過多
    setTimeout(function () {
        this.initWs()
        this.isReconnect = false;
  	 }, 2000);
}	

處理訊息 handle

//處理訊息
WBT.prototype.handleEvent = function (message) {
   	const action = message.action;
    const retCode = message.params.retCode.id;
    //根據action和retCode處理事件
    // console.log(action,retCode)
    if (this.handleAction[action][retCode]) this.handleAction[action][retCode]();
}
//事務處理 根據action
WBT.prototype.handleAction = {
     //登入反饋
   'loginRsp': {
    	'0': function () {
            console.log(0)
        },
        '3': function () {
            console.log(3)
        }
	}
}

傳送訊息-登入login

let defaultParam = {
    action: "loginReq",
    tsxId: "1",
    params:{}
}
WBT.prototype.login = function (params) {
    //ws還沒建立連線（發生錯誤）
    if (!this.isHeartflag) {
    	console.log('連線中……')
      	return;
    }
    let loginParam = defaultParam;
    loginParam.params = params;
    //組裝json資料
    this.socket.send(JSON.stringify(loginParam))
}

使用 index.html

var WS = new WBT()
var b = {
    dc: {
        id: "admin",
        passwd: "21232f297a57a5a743894a0e4a801fc3",
        version: "UDT-0.3.0"
    }
}
//傳送訊息
WS.login(b)