leaf 和cocos creator 游戏实战（一）使用protobuf完成通讯

项目目的：

  • 开发一个交互性的小游戏，限于服务端经验较少，故开始学习leaf框架，客户端用cocos creator。
  • 网络上此类可学习案例较少，故想一边学习，一边分享给后学者，谨以此勉励自己！

环境搭建：

正文：

server接收和处理消息:

1.创建一个lobby.proto:
syntax = "proto3";
package msg;

message Test {
    string Test = 2;
}

编译 lobby.proto 文件（对此不了解？请先阅读《在 Golang 中使用 Protobuf》一文）得到 lobby.pb.go 文件,命令如下：
        protoc --go_out=. lobby.proto
将lobby.pb.go 放在LeafServerExample src/msg文件夹下。

2.编辑 msg.go 文件:
package msg

import (
    "github.com/name5566/leaf/network/protobuf"
)
// 使用 Protobuf 消息处理器
var Processor = protobuf.NewProcessor()

func init() {
    Processor.Register(&Test {})
}
3.接下来处理 Test 消息的路由:

将 Test 消息路由到 game 模块中。打开 LeafServerExample gate/router.go，敲入如下代码：

package gate

import (
    "server/msg"
    "server/game"
)

func init() {
    // 这里指定消息 Test路由到 game 模块
    msg.Processor.SetRouter(&msg.Test {}, game.ChanRPC)
}
4.处理消息:

在 game 模块中处理 Test 消息了。打开 LeafServerExample game/internal/handler.go，敲入如下代码：

package internal

import (
    "server/msg"
    "reflect"
    "github.com/name5566/leaf/gate"
    "github.com/name5566/leaf/log"
    "github.com/golang/protobuf/proto"
)

func init() {
    // 向当前模块（game 模块）注册Test消息处理函数 handleHello
    handler(&msg.Test {}, handleHello)
}

func handler(m interface{}, h interface{}) {
    skeleton.RegisterChanRPC(reflect.TypeOf(m), h)
}

func handleHello(args []interface{}) {
    // 收到的 Test 消息
    m := args[0].(*msg.Test )
    // 消息的发送者
    a := args[1].(gate.Agent)

    // 输出收到的消息的内容
    log.Debug("hello %v", m.GetTest ())

    retBuf :=&msg.Test {
        Test : *proto.String("client"),
    }
    // 给发送者回应一个 Test 消息
    a.WriteMsg(retBuf)
}

client接收和处理消息:

获取protobufjs,在LeafServerCocosClient目录下:
npm install protobufjs

1.proto编译成静态文件:

把lobby.proto 复制到LeafServerCocosClient node_modules.bin文件夹下,把proto文件编译成静态文件使用:

pbjs -t static-module -w commonjs -o protocol.js lobby.proto
pbts -o protocol.d.ts protocol.js

把protocol.js 和protocol.d.ts拷贝到LeafServerCocosClient assets\script\protocol文件夹中.

2.创建websocket并连接:

新建netControl类:

import  * as onfire from "./libs/onfire/onfire.js"; //处理事件的类库          
import netConfig from './NetConfig.js'

export default class netControl {

    private _sock:WebSocket = null  //当前的webSocket的对象
    
    connect(){
        if(this._sock ==null || this._sock.readyState!==1){
            //当前接口没有打开
            //重新连接
            this._sock = new WebSocket(netConfig.host+":"+netConfig.port);
            this._sock.onopen = this._onOpen.bind(this);
            this._sock.onclose = this._onClose.bind(this);
            this._sock.onmessage = this._onMessage.bind(this);
            this._sock.binaryType = "arraybuffer";
        }
        return this;
    }

    _onOpen(){
        onfire.fire("onopen");
    }
    _onClose(err){
        onfire.fire("onclose",err);
        let self = this;
        let reVar = setInterval(function(){
            // 先对重连过后的Websocket进行判断，如果重连成功则断开循环
            if(self._sock.readyState == 1){
                clearInterval(reVar);
            }
            self._sock = new WebSocket(netConfig.host+":"+netConfig.port);
        }, 5000)    //每5秒尝试一次重连
    }
    _onMessage(obj){
        onfire.fire("onmessage",obj)
    }

    send(msg){
        if(this._sock.readyState == 1){
            this._sock.send(msg);
        }
    }

    protoBufAddtag(tag: number,buffer: Uint8Array){
        let addtag_buffer=new Uint8Array(buffer.length+2);
        let tagBinary = this.IntToUint8Array(tag,16);
        let tagUnit8 = new Uint8Array(tagBinary);

        addtag_buffer.set(tagUnit8,0);
        addtag_buffer.set(buffer.subarray(0,buffer.length),2);

        return addtag_buffer;
    }

    parseProtoBufId(obj: MessageEvent) :{id:number,data:Uint8Array}  {
        let arrayBuffer:ArrayBuffer = obj.data;
        let dataUnit8Array = new Uint8Array(arrayBuffer);
        let id = this.Uint8ArrayToInt(dataUnit8Array.slice(0,2));
        console.log("receive message id = "+id);
        dataUnit8Array = dataUnit8Array.slice(2);
        
        return {id: id,data:dataUnit8Array};
    }

    IntToUint8Array (num: number, Bits: number) :number[]{
        let resArry = [];
        let xresArry = [];
        let binaryStr:string = num.toString(2);
        for(let i=0;i<binaryStr.length;i++)
            resArry.push(parseInt(binaryStr[i]));

        if (Bits) {
            for(let r = resArry.length; r < Bits; r++) {
                resArry.unshift(0);
            }
        }

        let  resArryStr= resArry.join("");
        for(let j=0;j<Bits;j+=8)
            xresArry.push(parseInt(resArryStr.slice(j,j+8),2));

        return xresArry;
    }

    /**
     * Uint8Array[]转int
     * 相当于二进制加上4位。同时，使用|=号拼接数据，将其还原成最终的int数据
     * @param uint8Ary Uint8Array类型数组
     * @return int数字
     */
    Uint8ArrayToInt(uint8Ary:Uint8Array){
        let retInt:number =0;
        for(let i= 0;i<uint8Ary.length;i++)
            retInt|=(uint8Ary[i] << (8*(uint8Ary.length-i-1)));

        return retInt;
   }
}

由于在 Leaf 中，默认的 Protobuf Processor 将一个完整的 Protobuf 消息定义为如下格式：

-------------------------
| id | protobuf message |
-------------------------

所以在发送消息时需要加上头部id:

sendMessage(xyName:string,data:{}){
        let protocolId = netConfig.ProtocolId[xyName];
        let message = msg[xyName].create(data);
        let buffer  = msg[xyName].encode(message).finish();
        //leaf 前两位为协议序号，故需包装一下
        let addtag_buffer = this.netControl.protoBufAddtag(protocolId,buffer);

        this.netControl.send(addtag_buffer.buffer);
        console.log("sendToWS");
    }

  sendHello(name: string){
        this.sendMessage("Test",{ Test:name });
        console.log("sendHello");
    }

接收到leaf返回的消息时:

  onMessage(obj: MessageEvent){
        if(obj.data instanceof ArrayBuffer){
            //leaf 前两位为协议序号，需要解一下啊协议序号
            let retdata = this.netControl.parseProtoBufId(obj);  
            let id = retdata.id;
            let data = retdata.data;
            this.netMessageCtrl.dealMessage(id,data);
        }
    }

同样的前两位是leaf自动加上的id,需要处理下:

    parseProtoBufId(obj: MessageEvent) :{id:number,data:Uint8Array}  {
        let arrayBuffer:ArrayBuffer = obj.data;
        let dataUnit8Array = new Uint8Array(arrayBuffer);
        let id = this.Uint8ArrayToInt(dataUnit8Array.slice(0,2));
        console.log("receive message id = "+id);
        dataUnit8Array = dataUnit8Array.slice(2);
        
        return {id: id,data:dataUnit8Array};
    }

具体Lobby 类:

import netControl from "./NetControl"
import  * as onfire from "./libs/onfire/onfire"
import NetMessageCtrl from './NetMessageCtrl';
const {ccclass, property} = cc._decorator

@ccclass
export default class Lobby extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property(cc.Node)
    regNode: cc.Node = null;

    @property(cc.Node)
    loginNode: cc.Node = null;

    @property(cc.Node)
    PersistRootNode: cc.Node = null;

    @property
    text: string = 'hello';

    private msssageFire
    private netControl:netControl = null
    private netMessageCtrl:NetMessageCtrl = null

    onLoad(){
        this.netControl = new netControl();
        this.netMessageCtrl = new NetMessageCtrl(this.netControl);    

        cc.game.addPersistRootNode(this.PersistRootNode);
    }

    start () {
        // init logic
        this.label.string = this.text;

        this.netControl.connect();
        this.msssageFire=onfire.on("onmessage",this.onMessage.bind(this));
    }

    onMessage(obj: MessageEvent){
        if(obj.data instanceof ArrayBuffer){
            //leaf 前两位为协议序号，需要解一下啊协议序号
            let retdata = this.netControl.parseProtoBufId(obj);  
            let id = retdata.id;
            let data = retdata.data;
            this.netMessageCtrl.dealMessage(id,data);
        }
    }
    
    onDestroy(){
        onfire.un(this.msssageFire);
    
    }

    onBtnSendHello(){
        this.netMessageCtrl.sendHello("ddk");
    }

    onBtnRegister(){
        this.regNode.active = true;
    }

    onBtnLogin(){
        this.loginNode.active = true;
    }
    
}
3.微信支持：

wx.sendSocketMessage(Object object)

参数
Object object

属性 类型 默认值 是否必填 说明 支持版本
data string/ArrayBuffer 是 需要发送的内容
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

微信的websocket消息不支持Uint8Array,那我们就改变下：
this._sock.binaryType = "arraybuffer"

截图:

server:
client:
goland build setting:

参考:

在 Leaf 中使用 Protobuf

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容

  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    passiontim阅读 15,394评论 2赞 45
  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    wgl0419阅读 6,263评论 1赞 9
  • KAFKA介绍（分布式架构）
    介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能，但具有自己独特的设计。这个...
    ITsupuerlady阅读 189评论 0赞 1