項目目的：

• 開發(fā)一個交互性的小游戲宝惰，限于服務(wù)端經(jīng)驗較少，故開始學(xué)習(xí)leaf框架再沧，客戶端用cocos creator尼夺。
• 網(wǎng)絡(luò)上此類可學(xué)習(xí)案例較少，故想一邊學(xué)習(xí)炒瘸，一邊分享給后學(xué)者淤堵，謹(jǐn)以此勉勵自己！

環(huán)境搭建：

• golang 環(huán)境搭建和cocos creator的環(huán)境搭建網(wǎng)上教程很多顷扩，不再贅述,golang IDE可使用Goland拐邪。

• leaf框架地址：https://github.com/name5566/leaf.git

• leaf入門教程：https://github.com/name5566/leaf/blob/master/TUTORIAL_ZH.md

• example gihub地址：
  ????server:https://github.com/ddkgo/LeafServerExample.git
  ????client:https://github.com/ddkgo/LeafServerCocosClient.git

• LeafServerExample搭建：
  獲取:
  git clone https://github.com/ddkgo/LeafServerExample.git
  設(shè)置 LeafServerExample目錄到 GOPATH 環(huán)境變量后獲取 Leaf：
  go get github.com/name5566/leaf
  獲取protobuf支持：
  go get github.com/golang/protobuf/proto

正文：

server接收和處理消息:

1.創(chuàng)建一個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() {
    // 向當(dāng)前模塊（game 模塊）注冊Test消息處理函數(shù) 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 )
    // 消息的發(fā)送者
    a := args[1].(gate.Agent)

    // 輸出收到的消息的內(nèi)容
    log.Debug("hello %v", m.GetTest ())

    retBuf :=&msg.Test {
        Test : *proto.String("client"),
    }
    // 給發(fā)送者回應(yīng)一個 Test 消息
    a.WriteMsg(retBuf)
}

client接收和處理消息:

獲取protobufjs,在LeafServerCocosClient目錄下:
npm install protobufjs

1.proto編譯成靜態(tài)文件:

把lobby.proto 復(fù)制到LeafServerCocosClient node_modules.bin文件夾下,把proto文件編譯成靜態(tài)文件使用:

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.創(chuàng)建websocket并連接:

新建netControl類:

import  * as onfire from "./libs/onfire/onfire.js"; //處理事件的類庫          
import netConfig from './NetConfig.js'

export default class netControl {

    private _sock:WebSocket = null  //當(dāng)前的webSocket的對象
    
    connect(){
        if(this._sock ==null || this._sock.readyState!==1){
            //當(dāng)前接口沒有打開
            //重新連接
            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進(jìn)行判斷着饥，如果重連成功則斷開循環(huán)
            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[]轉(zhuǎn)int
     * 相當(dāng)于二進(jìn)制加上4位。同時惰赋，使用|=號拼接數(shù)據(jù)贱勃，將其還原成最終的int數(shù)據(jù)
     * @param uint8Ary Uint8Array類型數(shù)組
     * @return int數(shù)字
     */
    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 中，默認(rèn)的 Protobuf Processor 將一個完整的 Protobuf 消息定義為如下格式：

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

所以在發(fā)送消息時需要加上頭部id:

sendMessage(xyName:string,data:{}){
        let protocolId = netConfig.ProtocolId[xyName];
        let message = msg[xyName].create(data);
        let buffer  = msg[xyName].encode(message).finish();
        //leaf 前兩位為協(xié)議序號谤逼，故需包裝一下
        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 前兩位為協(xié)議序號贵扰，需要解一下啊協(xié)議序號
            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 前兩位為協(xié)議序號，需要解一下啊協(xié)議序號
            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)

參數(shù)
Object object

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

截圖:

server:

client:

goland build setting:

參考:

在 Leaf 中使用 Protobuf