FlatBuffers在JavaScript中的使用筆記

在使用flatbuffers工作之前，你首先需要創建一個schema文件。這個schema文件定義了所有你想序列化的數據結構。

1.創建schema文件xone.fbs。

namespace xone.genflat;

table LoginRequest{
msgID:int=1;
username:string;
password:string;
}

table LoginResponse{
msgID:int=2;
uid:string;
}



//root_type非必須。

//root_type LoginRequest;
//root_type LoginResponse;

在你寫完schema文件后，下一步是使用flatc編譯它。（創建flat編譯的方法見 "創建flatc，FlatBuffer的編譯器"。）

2.編譯寫好的schema文件。

執行命令： flatc -s xone.fbs  會生成對應的xone_generated.js文件。

schema文件里所有定義的table，struct，union 在編譯后的generated.js文件中都會有對應的操作方法。例如GetRootAsTabelName，etc。

3.創建 FlatBuffers

第一步是引入對應的庫文件還有剛剛編譯后的xone_generated.js文件。

var flatbuffers = require('/js/flatbuffers').flatbuffers;
var xone = require('./xone_generated').xone; //Generated by `flatc`.

現在已經可以在程序中創建一些buffers了。我們首先需要創建一個FlatBufferBuilder的實例builder，之后都是對這個builder進行操作。

 var builder = new flatbuffers.Builder(1);
 var username = builder.createString("zlh");
 var password = builder.createString("xxx");
 xone.genflat.LoginRequest.startLoginRequest(builder) 
 xone.genflat.LoginRequest.addUsername(builder,username)
 xone.genflat.LoginRequest.addPassword(builder,password)
 xone.genflat.LoginRequest.addMsgID(builder,5)
 var req = xone.genflat.LoginRequest.endLoginRequest(builder)
 builder.finish(req) //創建結束時記得調用這個finish方法。    

4.通過WebSocket發送創建好的buffers。

因為websocket只支持ArrayBuffer和String。所以要將生成后的buffers轉化為ArrayBuffer再通過webSocket發送。

//builder有對應的asUint8Array方法可以將內容轉為ArrayBuffer。
NetManager.sendMessage(builder.asUint8Array())     

因為網絡發送一般還需要有一個消息ID，所以可以進行一下操作。

var buf = builder.dataBuffer()
//我們暫且將msgId約定為兩個字節
var temp1 = new ArrayBuffer(buf.bytes().length + 2)
var newbuf = new Uint8Array(temp1)
//假設msgid為257，將msgid轉為2個字節的byte數組
var mId = this.intTobyte2(257)
//將msgid放到buf的頭兩個字節字節中
newbuf.set([b[0],b[1]],0)
//將之前生成的buffer追加到后邊
newbuf.set(builder.asUint8Array(),2)

//通過網絡發送出去  
NetManager.sendMessage(newbuf.buffer)

這樣后端服務器在接收到消息后，就可以進行拆分。取出頭兩個字節作為msgId，根據msgId做對應的處理。例如收到257時表示前段傳過來的是LoginRequest請求，則將buffer[2:]內容作為LoginRequest進行解析。

從網絡收到buffer后：

receiveMessage:function(message){
    //轉為可操作的buffer(ArrayBuffer不可直接操作，不需通過視圖操作)
    var buf = new Uint8Array(message)
    //取出前兩個字節並進行解析
    var msgId = new Uint8Array(message,0,2)
    var id = this.byte2Toint(msgId)
    console.log('msgId:'+id)

    //假設收到的msgId為257 則取出之后的buffer按照LoginResponse進行解析
    var data = new Uint8Array(message,2,buf.length-2)
    var b = new flatbuffers.ByteBuffer(data) //這步不要忘記
    var loginRes = xone.genflat.LoginResponse.getRootAsLoginResponse(b)
    console.log("msgID:"+loginRes.msgID());        
    console.log("uid:"+loginRes.uid());
}