4,簡単なチャットシステムを実現します.


前言
nodejsゲームサーバーの開発シリーズの文章はnodejs+Typecript+CococococococococosCreator+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となり、クライアントがサーバに接続した後、LoginaReqメッセージを送信し、ログインを要求する.クライアントは、ChartReqメッセージを送信し、サーバが受信した後にブロードキャストすることができる.
メッセージタイプを識別するために、各メッセージの前に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:サーバは、ChartReqを受信した後、すべてのクライアントに直接転送する.この例によれば、すべてのLoginに成功したクライアントに転送されるべきである.2:メッセージ番号は列挙化して、統一的に管理して、登録します.この例では、メッセージ番号を個々の論理機能に分散させ、結合性が高すぎる.メンテナンスに不便で、間違えやすいです.3:メッセージ配信システムを維持する必要があり、各機能モジュールは、メッセージをモニターすることによって、業務ロジックを実現する.4:メッセージの順序化、アンチプログレッシブコードの洗練されていない、さらなる最適化が必要です.