google protobuf_websoket解析protobuf协议

自己团队（腾讯/看点/搜索）长期招聘web前端、c++后台、搜索/推荐算法，欢迎来撩，lucaspei@tencent.com。

---------------------------------------------------------------------

由于业务需要，需要用websoket并使用protobuf协议，在网上找了很多，资料很少。

总结下来前端要解析protobuf主要有两种方式：

1.把proto文件通过工具生成js文件，然后加上依赖运行，代表库：https://github.com/google/protobuf

2.直接在线加载proto文件，实时解析数据，代表库：https://github.com/dcodeIO/protobuf.js

方式二我没用过，但性能肯定没有第一种好，再就是据说有一些坑，我这里主要讲一下第一种方式。

最主要的步骤为：

1. 书写proto协议文件，比如名为user.proto；
2. 使用谷歌官方的工具把proto文件生成对应的js文件，user_pb.js；
3. 通过browserify把user_pb,js加上依赖后打包生成im.js；
4. 把二进制的ArrayBuffer数据反序列化，deserializeBinary(BINARY_DATA)

测试步骤一，书写proto，并命名为user.proto

syntax 

测试步骤二，转化proto文件为对应的js：

在https://github.com/google/protobuf/releases这里下载转化工具

把刚刚写的user.proto放到bin目录下去，然后敲命令：protoc.exe --js_out=import_style=commonjs,binary:. user.proto，这样就会在同目录下生成一个叫user_pb.js的js文件，大概长这样：

测试步骤三，打包user_pb.js为前端可用的带依赖的js文件：

全局安装browserify，tnpm install -g browserify

新建一个目录，里面放一个package.json，

，然后执行tnpm install安装google-protobuf依赖，把第二部生成的user_pb.js文件放到这个目录下来：

，然后通过cmd执行browserify user_pb.js -o im.js，最后就会在这个目录下生成一个im.js文件，到此为止，转化proto文件完成。

-----------------------------------------------------------------------------------------------

然后可以自己写一个server来测试一下，server的代码如下（由于只是测试用途，代码比较简单粗暴）：

然后添加前端的页面index.html

切记：一定要加上ws.binaryType = 'arraybuffer'这一句

最后发送消息看下：

解析成功，大功告成。

PS: 两年前的文章， ctr c/v 过来的