??砥礪前行，不負(fù)余光，永遠(yuǎn)在路上??
前言
這是一次繼前文websocket的一個(gè)更新：小程序中使用websocket，區(qū)分房間、空間 現(xiàn)在遇到了一個(gè)需求是小程序接入 io-game 的websocket 和unity 游戲端同時(shí)使用一個(gè)websocket，io-game那邊收發(fā)websocket消息都是采用 Protobuf 處理的。
一、如何在小程序websocket中使用 Protobuf 發(fā)送buffer
參考項(xiàng)目：https://github.com/Zhang19910325/protoBufferForWechat/tree/master
二、使用過程遇到的坑（版本問題）
1、需要注意下Protobuf版本 使用 protobufjs@6.8.6最好，我在使用的時(shí)候安裝7.多 莫名奇妙 pbjs 用不起
cnpm install -g protobufjs@6.8.6
然后執(zhí)行pbjs即可
2、websocket中發(fā)送 buffer
支持string和arraybuffer類型，所以把Uint8Array直接轉(zhuǎn)換為arraybuffer
new Uint8Array([...buffer]).buffer
三、完整步驟
1、下載protoBufferForWechat 導(dǎo)入到項(xiàng)目中
git clone https://github.com/Zhang19910325/protoBufferForWechat.git
2、安裝pbjs工具6.8.6
cnpm install -g protobufjs@6.8.6
//or
yarn add globle protobufjs@6.8.6
3、驗(yàn)證是否安裝成功
執(zhí)行pbjs出現(xiàn)如下信息即可
protobuf.js v6.7.0 CLI for JavaScript
Translates between file formats and generates static code.
-t, --target Specifies the target format. Also accepts a path to require a custom target.
json JSON representation
json-module JSON representation as a module
proto2 Protocol Buffers, Version 2
proto3 Protocol Buffers, Version 3
static Static code without reflection (non-functional on its own)
static-module Static code without reflection as a module
-p, --path Adds a directory to the include path.
-o, --out Saves to a file instead of writing to stdout.
--sparse Exports only those types referenced from a main file (experimental).
Module targets only:
-w, --wrap Specifies the wrapper to use. Also accepts a path to require a custom wrapper.
default Default wrapper supporting both CommonJS and AMD
commonjs CommonJS wrapper
amd AMD wrapper
es6 ES6 wrapper (implies --es6)
closure A closure adding to protobuf.roots where protobuf is a global
--dependency Specifies which version of protobuf to require. Accepts any valid module id
-r, --root Specifies an alternative protobuf.roots name.
-l, --lint Linter configuration. Defaults to protobuf.js-compatible rules:
eslint-disable block-scoped-var, no-redeclare, no-control-regex, no-prototype-builtins
--es6 Enables ES6 syntax (const/let instead of var)
Proto sources only:
--keep-case Keeps field casing instead of converting to camel case.
Static targets only:
--no-create Does not generate create functions used for reflection compatibility.
--no-encode Does not generate encode functions.
--no-decode Does not generate decode functions.
--no-verify Does not generate verify functions.
--no-convert Does not generate convert functions like from/toObject
--no-delimited Does not generate delimited encode/decode functions.
--no-beautify Does not beautify generated code.
--no-comments Does not output any JSDoc comments.
--force-long Enfores the use of 'Long' for s-/u-/int64 and s-/fixed64 fields.
--force-number Enfores the use of 'number' for s-/u-/int64 and s-/fixed64 fields.
--force-message Enfores the use of message instances instead of plain objects.
usage: pbjs [options] file1.proto file2.json ... (or pipe) other | pbjs [options] -
4、轉(zhuǎn)換proto文件
例如：我的Req_LoginVerify.proto文件
syntax = "proto3";
// {classComment}
message Req_LoginVerify {
// 用戶id
int64 userId = 1;
// 場次id
int64 sessionId = 2;
// 房間總?cè)藬?shù)
int32 roomCountNum = 3;
}
運(yùn)行之后會生成一個(gè) Req_LoginVerify.json文件
pbjs -t json Req_LoginVerify.proto > Req_LoginVerify.json
內(nèi)容為：
{
"nested": {
"Req_LoginVerify": {
"fields": {
"userId": {
"type": "int64",
"id": 1
},
"sessionId": {
"type": "int64",
"id": 2
},
"roomCountNum": {
"type": "int32",
"id": 3
}
}
}
}
}
但此時(shí)的json文件我們不能直接使用，不過我們可以將json對象取出放到小程序項(xiàng)目當(dāng)中去，比如在小程序項(xiàng)目中新建一個(gè)Req_LoginVerify.js，內(nèi)容為
module.exports = {
"nested": {
"Req_LoginVerify": {
"fields": {
"userId": {
"type": "int64",
"id": 1
},
"sessionId": {
"type": "int64",
"id": 2
},
"roomCountNum": {
"type": "int32",
"id": 3
}
}
}
}
}
5、最后使用
注意我的文件結(jié)構(gòu)：
var protobuf = require('../../weichatPb/protobuf.js');
var loginConfig = require('../../proto/Req_LoginVerify');//加載awesome.proto對應(yīng)的json
var Login = protobuf.Root.fromJSON(loginConfig);
var LoginMsg = Login.lookupType("Req_LoginVerify");//這就是我們的Message類
文章來源：http://www.zghlxwxcb.cn/news/detail-617155.html
6、websocket中發(fā)送buffer
sendSocketMessage: function () {
if (this.data.socketOpen) {
var payload = {
userId: 1,
sessionId: 12,
roomCountNum: 6
};
var message = LoginMsg.create(payload);
var buffer = LoginMsg.encode(message).finish();
console.log("buffer", buffer);
wx.sendSocketMessage({
data: new Uint8Array([...buffer]).buffer
})
}
},
7、處理服務(wù)端返回的buffer
wx.onSocketMessage(function (res) {
console.log('接收到服務(wù)器發(fā)送的原始數(shù)據(jù):', res.data)
var deMessage = LoginMsg.decode(res.data);
console.log("解析buffer之后的數(shù)據(jù)", deMessage);
})
四、小程序中的效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-617155.html
到了這里，關(guān)于微信小程序websocket使用protobuf，發(fā)送arraybuffer的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
