基於 websocket使用

需求

例：傳送登入請求後及時獲取返回值，然後根據返回值處理接下來的事件，類似http請求，不過需求是要用websocket做到這一點。

思考

我們在websocket 介紹上能夠充分認知到websocket的所有回撥函式都是非同步執行的，也就是說我傳送send(msg)之後我要讀取資訊是在onmessage()裡面讀取，這顯然不符合我們的要求。

解決

dispatch.js

//作為get獲取資料的回撥物件儲存
this.messageList = {};
//自定義Ws訊息接收函式：伺服器向前端推送訊息時觸發
this.onmessage = ((e) => {
    //處理各種推送訊息
    const message = JSON.parse(e.data);
    const eventName = message.action.splice('Rsp','')
    //執行回撥
    this.messageList[eventName](message);
})     

//傳送訊息後回撥
WBT.prototype.sendMsg = function(obj, callback) {    
	const name = obj.action.replace('Req','');
	//儲存事件
	this.messageList[name] = callback;
	this.socket.send(JSON.stringify(obj));
}
 

index.html

let loginParam = {
   	action: "loginReq",
    tsxId: "1",
    params: {
    dc: {
        id: "admin",
        passwd: "21232f297a57a5a743894a0e4a801fc3",
        version: "UDT-0.3.0"
       }
    }
}
function test() {
   WS.sendMsg(loginParam, function (data) {
        console.log(data)
    })
}
 

最後

到這一步就是可以類似ajax發起http請求並及時回撥資料過來。
不過還有最新的 async可以做成類同步形式，更加方便呼叫，不過因為受限瀏覽器版本和我專案實際情況，我就不贅述了，有興趣的可以看一下這篇部落格:es6使用websocket同步等待方法