[技术资料] websocket+protocol buffer 实战

来源：http://div.io/topic/1657

websocket+protocol buffer 实战

1.起因

之前公司的im聊天一直是基于ajax的，先抛开轮询还是long poll不说，但是不论是页面上源源不断的ajax请求还是服务器hold长链都是很蛋疼的事情。
这种架子持续了一年半左右，终于在换了第n+1个产品和另一波后台技术支持的时候，机会来了，在某次新版im立项会议上串通好后台，强烈建议产品延期进行底层改造，websocket就这样开始了。

2.websocket和socket.io的异同

公司有内部编辑用的socket.io项目，正好拿来和websocket做对比。当时做socket.io的时候后台用的node，你会发现，在初始化socket.io的时候参数是'http://.....'而websocket在初始化的时候用的是'ws://....'，socket.io内部对websocket做了兼容处理，也就是他同时支持socket.io以及ajax，会根据不同的情境选择不同的方法来处理，而webesocket连接的时候必须使用ws协议。

简单浏览一下sokcet.io的源码会发现如下的代码片段（图一）

图中可以看出来，sokcet.io对几种机制分别预留了相应的api。

3.protocol buffer

这是是google的一种数据传输格式，体积小巧（欲知详情 https://developers.google.com/protocol-buffers ）。对于我们前端开发者来说，也不过就是一个和后台预定义好的json串，具体怎么预定义，是通过一个后缀名为.proto的文件，前端在调用protocol buffer的时候会预先加载proto文件，生成相应的json串，之后只要是数据传输，用的都是这个json串，形式永远不会改变，所以我们处理起来很方便咯。

如下图，是个超级简单的proto文件的规范（图2）

而最终前端解析出来的json串是酱紫滴（图3）

是不是炒鸡神奇（神奇你妹啊，还有炒鸡是几个意思？），接下来简单剖析一下proto和json的对应关系

4.protocol buffer和json

解析这个proto其实很简单，从主要类入手，这里面主类就是Msg，Msg下面又有三个属性，以第一个为例进行解析：
-第一个参数required说明每次传参都要传过去；
-第二个参数是MsgType,这个参数指的是参数类型，而MsgType这个类型如图二所示，在开始已经定义好，枚举类型：1表示login，2表示loginAck。这时候大家再去看图三，我准备发送的消息的MsgType为1，意思就是我通知后台我要登录了，而接受到的是2，表示loginAck，也就是后台确认你已经登录。就这么简单，注册登录就已经完成了
-第三个参数其实就相当于我们要操作的对象的属性，也就是Msg.msgType我们就可以访问到并且修改了（这里只是举例，其实Msg需要提前实例化并调用protocol buffer内部api进行转换，形成json）

5.protocol buffer和websocket

大家都了解，websocket是通过二进制进行传输的，并且在定义socket的时候会加上socket.binaryType = "arraybuffer"这句话，所以说咯，protocol buffer在json的转换中必须要来回转换为buffer才能进行数据传输，比较人性化的是protocol buffer中提供了相应的decode和toArrayBuffer方法对数据进行二进制转换。

6.尾声

该介绍的都介绍完了，开发就很easy了，sokect和protocol buffer也是可以愉快共存的朋友，开发的时候不要忘了socket的心跳和断线重连哦~
by 乐居小菜