實現一個簡單的聊天系統

轉載自：https://blog.csdn.net/iningwei/article/details/100131685

前言
nodejs遊戲服務器開發系列文章以nodejs+Typescript+CocosCreator+WebSocket爲例，搭建服務器和客戶端。

下面我們以一個聊天系統爲例，把客戶端和服務端流程走一遍。

最終的聊天系統已經託管在git上了：https://github.com/iningwei/nodejs-CocosCreator-websocket

proto文件及系統流程
message Role{
    required string roleName=1;    
}

message ChatData{
    required string content=1;
    required string dateTime=2;//時間戳
    required Role sender=3;//發送者
}

//msgID=10001
message LoginReq{
    required Role role=1;
}
//msgID=10002
message LoginRes{
    required int32 result=1;//0爲失敗，1爲成功
}

//msgID=10011
message ChatReq{
    required ChatData chatData=1;
}
//msgID=10012
message ChatRes{
    required int32 result=1;//0爲失敗，1爲成功
    required ChatData chatData=2;
}

該系統的流程是：
客戶端啓動後，本地會爲其隨機roleName,在客戶端連上服務器後，會發送LoginReq消息，請求登錄。
客戶端可以發送ChatReq消息，服務器收到後進行廣播。

爲了能夠識別消息類型，我爲每個消息在前面加了4個字節的消息號。

客戶端代碼如下
    @property(cc.Label)
    nameLbl: cc.Label;
    @property(cc.Node)
    chatContentRoot: cc.Node;
    @property(cc.Node)
    chatItemPrefab: cc.Node;
    @property(cc.EditBox)
    editBox: cc.EditBox;

    private roleName: string;
    private role: proto.Role;
    private ws: WebSocket;
    start() {
        this.roleName = "jack" + Math.floor(Math.random() * 10000);
        this.nameLbl.string = this.roleName;
        this.role = new proto.Role();
        this.role.roleName = this.roleName;

        this.ws = new WebSocket("ws://192.168.2.31:8083");
        this.ws.binaryType = "arraybuffer";

        this.ws.onopen = this.onOpen.bind(this);
        this.ws.onmessage = (event) => {
            // console.log("client rcv:" + event.data);//  event.data若是二進制，爲：ArrayBuffer類型
            this.unSerialize(event.data);
        }
        this.ws.onclose = function (event) {
        }.bind(this);
        this.ws.onerror = function (event) {
        }
    }

    private onOpen(event: MessageEvent) {
        console.log("和服務器連接建立啦");
        this.reqLogin();
    }

    private reqLogin() {
        let loginReq = new proto.LoginReq();
        loginReq.role = this.role;
        console.log("sedMsg:10001, " + JSON.stringify(loginReq.toJSON()));
        let encodedBuf: Uint8Array = proto.LoginReq.encode(loginReq).finish();//編碼後必須調用finish()，否則類型不對
        this.ws.send(this.serialize(10001, encodedBuf));
    }

    private unSerialize(arrayBuf: ArrayBuffer) {
        let dv = new DataView(arrayBuf);
        //獲得消息號
        let msgId = dv.getInt32(0);//TODO:大小端問題。dv.getInt32(0,true);
        //獲得消息體
        let body: Uint8Array = new Uint8Array(arrayBuf, 4);

        let data: any = null;
        switch (msgId) {
            case 10002:
                data = proto.LoginRes.decode(body);
                break;
            case 10012:
                data = proto.ChatRes.decode(body);
                if (data.result === 1) {
                    this.addChatItem((<proto.ChatRes>data).chatData);
                }
                break;
        }

        console.log("rcvMsg: " + msgId + ",  " + JSON.stringify(data.toJSON()));
    }

    private serialize(msgId: number, bodyArray: Uint8Array): ArrayBuffer {
        let totalLen = 4;
        totalLen += (bodyArray.length * 1);//Uint8爲一個字節

        //寫入消息號
        let buf = new ArrayBuffer(totalLen);
        let dataView = new DataView(buf);
        dataView.setInt32(0, msgId);
        let offset = 4;
        //寫入消息體
        for (let i = 0; i < bodyArray.length; i++) {
            const element = bodyArray[i];
            dataView.setUint8(offset, element);
            offset += 1;
        }

        return dataView.buffer;
    }

    public SendChat() {
        let content = this.editBox.string.trim();
        if (content == "") {
            console.log("請輸入聊天文字");
            return;
        }

        let chatReq = new proto.ChatReq();
        chatReq.chatData = new proto.ChatData();
        chatReq.chatData.content = content;
        chatReq.chatData.dateTime = new Date().toTimeString().split(" ")[0];
        chatReq.chatData.sender = this.role;

        let encodedBuf: Uint8Array = proto.ChatReq.encode(chatReq).finish();
        this.ws.send(this.serialize(10011, encodedBuf));

        this.editBox.string = "";
    }

    private addChatItem(data: proto.IChatData) {
        let chatNode = cc.instantiate(this.chatItemPrefab);
        chatNode.parent = this.chatContentRoot;
        chatNode.active = true;

        let str = data.sender.roleName + "   " + data.dateTime + "   " + data.content;
        chatNode.getComponent(cc.Label).string = str;
    }


服務端
import * as WebSocket from "ws"
import proto = require("./pb/proto");

const server = new WebSocket.Server({ port: 8083 });
server.on("listening", () => {
    console.log("服務器啓動完畢！開始偵聽");
});

server.on("connection", function connection(ws, req) {
    const ip = req.connection.remoteAddress;
    console.log(ip + " 連接上服務器");
    ws.on("message", (data) => {
        console.log("received:%s,類型：%s", data, (typeof data));

        //雖然客戶端那邊傳的時候是ArrayBuffer類型，但是經過調試到這裏data類型爲buffer，需要轉換爲ArrayBuffer
        let arrayBuf: ArrayBuffer = toArrayBuffer(data);
        let r = unSerialize(arrayBuf);
        if (r.msgId === 10001) {
            let loginRes = new proto.LoginRes();
            loginRes.result = 1;
            console.log("sedMsg:10002, " + JSON.stringify(loginRes.toJSON()));
            let encodedBuf: Uint8Array = proto.LoginRes.encode(loginRes).finish();
            ws.send(serialize(10002, encodedBuf));
        }
        else if (r.msgId === 10011) {
            let chatRes = new proto.ChatRes();
            chatRes.result = 1;
            chatRes.chatData = (<proto.ChatReq>(r.data)).chatData;
            console.log("sedMsg:10012, " + JSON.stringify(chatRes.toJSON()));
            let encodedBuf: Uint8Array = proto.ChatRes.encode(chatRes).finish();
            server.clients.forEach(function each(client) {
                client.send(serialize(10012, encodedBuf));
            });
        }
    });
});

function unSerialize(arrayBuf: ArrayBuffer): { msgId: number, data: any } {
    let dv = new DataView(arrayBuf);
    //獲得消息號
    let id = dv.getInt32(0);//TODO:大小端問題。dv.getInt32(0,true);
    //獲得消息體
    let body: Uint8Array = new Uint8Array(arrayBuf, 4);

    let result: any = null;
    switch (id) {
        case 10001:
            result = proto.LoginReq.decode(body);
            break;
        case 10011:
            result = proto.ChatReq.decode(body);
            break;
    }
    console.log("rcvMsg: " + id + ",  " + JSON.stringify(result.toJSON()));

    return { msgId: id, data: result };
}

function serialize(msgId: number, bodyArray: Uint8Array): ArrayBuffer {
    let totalLen = 4;
    totalLen += (bodyArray.length * 1);//Uint8爲一個字節

    //寫入消息號
    let buf = new ArrayBuffer(totalLen);
    let dataView = new DataView(buf);
    dataView.setInt32(0, msgId);
    let offset = 4;
    //寫入消息體
    for (let i = 0; i < bodyArray.length; i++) {
        const element = bodyArray[i];
        dataView.setUint8(offset, element);
        offset += 1;
    }
    return dataView.buffer;
}

//Buffer轉ArrayBuffer
function toArrayBuffer(buf) {
    var ab = new ArrayBuffer(buf.length);
    var view = new Uint8Array(ab);
    for (var i = 0; i < buf.length; ++i) {
        view[i] = buf[i];
    }
    return ab;
}

//ArrayBuffer轉Buffer
function toBuffer(ab) {
    var buf = new Buffer(ab.byteLength);
    var view = new Uint8Array(ab);
    for (var i = 0; i < buf.length; ++i) {
        buf[i] = view[i];
    }
    return buf;
}

總結
上述演示了一個聊天系統的基礎實現流程。在不考慮斷線重連等情況下，仍然還有很多需要優化的地方。

比如：

1：服務器在收到ChatReq後是直接轉發給所有連上的客戶端。根據本實例，應該是轉發給所有Login成功的客戶端。
2：消息號應該枚舉化，統一管理，註冊。本例中分散的把消息號寫到各個邏輯功能中，耦合性太高。不利於維護，且容易出錯。
3：需要維護一個消息分發系統，各個功能模塊通過對消息進行監聽，來實現業務邏輯。
4：消息的序列化，反序列化代碼不夠簡練，需要進一步優化。