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

移动开发 2018-08-19 15:13:53 阅读次数: 0

项目目的：

  • 开发一个交互性的小游戏，限于服务端经验较少，故开始学习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

猜你喜欢

转载自blog.csdn.net/ouzhengai/article/details/81050692
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022