### 前言
傳統http短連接拉取接收數據太浪費資源，tcp每次都得建立連接，三次握手，釋放，只能單向通信，定時輪詢。
而websocket可以建立長連接，后一直保持，節約服務器資源，跟每臺客戶機只維持一個連接就行。
節省流量 不需要頻繁地發起關閉tcp連接，可以雙向通信，
協議以及數據格式自己算了算，瀏覽器、app、物聯網多種設備一套接口通用，省略HTTP上不多余的信息，
基于以上原因，開發一套socket框架來代替http ajax模式，同時保持跟http一樣容易上手
### 目的
用websocket實現Ajax回調效果，所有接口請求用websocket進行，
想要使websocket發送的消息實現跟ajax回調消息那種效果，發送出去，然后回調函數里收到服務器發送來的消息
### 難點
websocket與http不同的之處在于，http發的請求是同步的，瀏覽器發起請求會同步等待服務器返回，而socket是發送完了就結束了，不管服務器又沒返回，而且先發地數據不一定先收到，不按順序返回，
難點就在于發送數據在ws.send函數里，而接收數據在ws.onmessage里，數據不能互通
### 原理
解決方法
發送消息的時候把回調函數存到一個數組中，數組下標用唯一鍵名避免沖突，鍵名要發送給服務器，服務器返回數據的時候要帶上，
收到服務器消息時，取出鍵名去調用數組中對應的回調函數，把數據傳入回調函數執行回調操作
這樣就實現了跟ajax一樣的效果
### 實現
代碼示例
socket.js
`
//websocket地址
let host = "ws://localhost:8282";
let ws = null;
let socketOpen = false;
let callbackArr = [];
let msgArr = [];
//心跳時間
let heartCheckTime = 45000;
//重連嘗試次數
let reconnectTime = 0;
function wsConnect() {
ws = new WebSocket(host);
// 打開socket連接
ws.onopen = e => {
socketOpen = true;
console.log('連接成功');
//待發送消息隊列
if (msgArr.length) {
for (let i in msgArr) {
sendMsg(msgArr[i].data, msgArr[i].callback)
}
msgArr = []
}
// 心跳
heartCheck()
};
// socketClose
ws.onclose = e => {
console.log('連接已斷開', e);
socketOpen = false;
reconnect();
};
//連接發生錯誤
ws.onerror = e => {
console.log('連接發生錯誤', e);
socketOpen = true;
reconnect();
};
//接收消息
ws.onmessage = e => {
// 按api保存回調
let callBackData = JSON.parse(e.data);
let key = callBackData.key;
if (!key) return;
callbackArr[key](callBackData)
}
}
// 發送消息
function send(data, callback) {
callbackArr[data.key] = callback
// console.log('發送消息',data)
if (socketOpen) {
ws.send(JSON.stringify(data))
} else {
// 未開啟，加入隊列
msgArr.push({data, callback});
wsConnect();
}
}
// 心跳檢測
function heartCheck() {
if (socketOpen) {
setInterval(() => {
ws.send('ping')
console.log("發送ping", heartCheckTime)
}, heartCheckTime);
}
}
// 重連
function reconnect() {
if (!socketOpen && reconnectTime <= 10) {
setTimeout(() => {
wsConnect()
reconnectTime++
console.log('重新連接', reconnectTime)
}, 2000)
}
}
module.exports.send = send
`
