守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 301|回复: 0

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

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-3 16:14:19 | 显示全部楼层 |阅读模式

    来源: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的源码会发现如下的代码片段(图一)

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

    3.protocol buffer

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

    如下图,是个超级简单的proto文件的规范(图2)

    proto文件

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

    proto解析
    是不是炒鸡神奇(神奇你妹啊,还有炒鸡是几个意思?),接下来简单剖析一下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 乐居小菜

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 00:38 , Processed in 0.044389 second(s), 36 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表