摘要：為了體現(xiàn)前后端分離，提高開發(fā)效率的精髓。轉(zhuǎn)發(fā)消息服務(wù)器將收到的來(lái)自于發(fā)送方消息中的值作為要轉(zhuǎn)發(fā)的目標(biāo)接收方，在服務(wù)器自身維護(hù)的對(duì)象中找到接收方的這個(gè)連接，然后將發(fā)送方的標(biāo)識(shí)作為轉(zhuǎn)發(fā)給接收方。

簡(jiǎn)單的描述一下需求場(chǎng)景：應(yīng)用需要進(jìn)行客戶端到客戶端的通信，websocket 就能很好的進(jìn)行這一操作，目前 網(wǎng)易云信的 IM 等功能也是利用 websocket 進(jìn)行的。

對(duì)前端開發(fā)人員來(lái)說(shuō)，目前能夠提供 mock 服務(wù)的第三方工具還是比較多的，基本上，與后臺(tái)開發(fā)人員約定好請(qǐng)求路徑、請(qǐng)求字段和響應(yīng)字段之后就能前后臺(tái)獨(dú)立開發(fā)了。

但 websocket 服務(wù)器與 http 服務(wù)器最大的區(qū)別就是 websocket 服務(wù)器必須得一直提供服務(wù)，否則客戶端之間就無(wú)法進(jìn)行通信。

為了體現(xiàn)前后端分離，提高開發(fā)效率的精髓?？隙ㄊ遣荒芟劝堰壿嬋棵懞昧酥笤倥c后臺(tái)聯(lián)調(diào)的，便決定與后臺(tái)約定好了接口名和數(shù)據(jù)形式之后，用 nodejs 寫一個(gè)簡(jiǎn)單的 websocket 通信服務(wù)。

websocket 用的比較多的應(yīng)該就是傳輸文本（簡(jiǎn)單點(diǎn)說(shuō)就是字符串），所以，這個(gè)字符串?dāng)y帶著接收方的用戶標(biāo)識(shí)（toId），其他的信息（比如消息類型 type 和 消息內(nèi)容 data 等），通常的做法是 JSON.stringfy() 之后轉(zhuǎn)成字符串，服務(wù)端將發(fā)送方的用戶標(biāo)識(shí)（fromId）、其他的信息（比如發(fā)送過(guò)來(lái)的消息類型 type 和 消息內(nèi)容 data）等信息轉(zhuǎn)發(fā)給接收方，接收方接收到字符串之后再 JSON.parse() 進(jìn)行下一步操作。

用下面這張圖描述一下我希望 websocket 服務(wù)器能提供給客戶端的功能。

websocket 提供的方法中常用的有：new、onopen、onclose、onerror、onmessage、send

毫無(wú)疑問(wèn)，對(duì)前端開發(fā)人員來(lái)說(shuō)需要與業(yè)務(wù)邏輯相結(jié)合、重點(diǎn)關(guān)注的方法就是以下三個(gè)：

在連接 websocket 服務(wù)器時(shí)傳遞自己的 id

const ws = new WebSocket(`ws://localhost:8080/websocketServer/${id}`);

發(fā)送消息（字符串）給服務(wù)器，服務(wù)器再轉(zhuǎn)發(fā)給目標(biāo)

const msgObj = {
    toId: 666,
    type: "hello",
    data: "message......"
};
const msgStr = JSON.stringfy(msgObj);
ws.send(msgStr);

由于 send 不能接收對(duì)象或者數(shù)組類型的數(shù)據(jù)，每次都得寫一個(gè)臨時(shí)的對(duì)象，再調(diào)用 JSON.stringfy() 方法轉(zhuǎn)成字符串。

那就封裝一個(gè)符合自己業(yè)務(wù)場(chǎng)景的方法，簡(jiǎn)化開發(fā)過(guò)程中實(shí)現(xiàn)發(fā)送功能的步驟。

// 在原型對(duì)象上增加的 sendTo 方法
if ( ! WebSocket.prototype.sendTo ) {
    WebSocket.prototype.sendTo = function(toId, type, data) {
        const msg = JSON.stringify({ toId, type, data });
        this.send(msg);
    }
}

// 調(diào)用形式
ws.sendTo(toId, type, data);

接收消息，通常會(huì)根據(jù)消息中 type 的不同值：

自己做點(diǎn)什么

給對(duì)方一個(gè)響應(yīng)（調(diào)用 sendTo 方法）

ws.onmessage = function(msg) {
    const { fromId, type, data } = JSON.parse(msg);
    switch (type) {
        case "message":
            // 自己做點(diǎn)什么
            break;
        
        case "hello":
            // 返回一個(gè)消息
            this.sendTo(fromId, "response", "response data");
    }
}

最后簡(jiǎn)單的封裝一下初始化方法，方便在不同的地方使用。

const wsUrl = "ws://localhost:8080/";
const wsPath = "socketServer/";
// 生成實(shí)例
let ws = null;
const connect = async () => {
    ws = await connectWS(uid, messageHandle);
    // ...
    // ...
    // 連接成功之后做點(diǎn)什么
}

function connectWS(uid, msgHandle) {
    if ( ! WebSocket.prototype.sendTo ) {
        WebSocket.prototype.sendTo = function(toId, type, data) {
            const msg = JSON.stringify({ toId, type, data });
            this.send(msg);
        }
    }
    
    return new Promise((resolve, reject) => {
        const ws = new WebSocket(`${wsUrl}${wsPath}${uid}`);
        ws.onopen = () => {
            console.log("open");
            resolve(ws);
        };
        ws.onclose = () => {
            console.log("close");
        };
        ws.onerror = () => {
            console.log("error");
        };
        ws.onmessage = (msg) => {
            msgHandle(JSON.parse(msg.data));
        };
    });
}
// 接收消息的處理函數(shù)
function messageHandle(msgData) {
    const { fromId, type, data } = msgData;
    switch (type) {
        case "":
            break;
        default:
            break;
    }
}

常用的 nodejs-websocket 和 express-ws 兩個(gè)框架，都需要自身維護(hù)一個(gè)對(duì)象來(lái)記錄每個(gè) websocket 連接是哪個(gè)用戶，從而實(shí)現(xiàn)消息轉(zhuǎn)發(fā)。

以 express-ws 為例：

首先，服務(wù)端要記錄當(dāng)前連接的用戶，以便轉(zhuǎn)發(fā)消息的時(shí)候能夠正確發(fā)送給目標(biāo)。

服務(wù)器將收到的來(lái)自于發(fā)送方消息中的 toId 值作為要轉(zhuǎn)發(fā)的目標(biāo)（接收方），在服務(wù)器自身維護(hù)的對(duì)象中找到接收方的這個(gè)連接，然后將發(fā)送方的標(biāo)識(shí)作為 fromId 轉(zhuǎn)發(fā)給接收方。

const express = require("express");
const express_ws = require("express-ws");
const app = express();
const wsObj = {};
express_ws(app);

app.ws("/socketServer/:uid", (ws, req) => {
    const uid = req.params.uid;
    wsObj[uid] = ws;
    ws.onmessage = (msg) => {
        let { toId, type, data} = JSON.parse(msg.data);
        const fromId = uid;
        if (fromId != toId && wsObj[toId]) {
            // wsObj[toId]   表示 接收方 與服務(wù)器的那條連接
            // wsObj[fromId] 表示 發(fā)送方 與服務(wù)器的那條連接
            wsObj[toId].send(JSON.stringify( { fromId, type, data } ))
        }
    }
});

app.listen(8080);