事件驱动的移动数据中心 广州舜飞信息科技有限公司 谭荣棉

大型WebApp的数据交互问题 在开发大型的web应用时，都会接触到大量的前端与后端的数据交互的情况。

离线访问 几万行代码，几百个请求，改了一遍…… BOSS 我改…… 前端 我们的App怎么断网了就完全用不了。 要支持离线，能看到访问过的数据！ BOSS 前端 我改…… 离线访问在App开发中必须考虑的一个重要问题，在web开发中一般无需考虑这个问题 大家是否有遇到过下面的情况， 几万行代码，几百个请求，改了一遍……

实时数据 几万行代码，几百个请求，又改了一遍…… 产品 前端 帅哥，银家的数据要有实时性。 要每秒都更新一次数据哦！ 美女的要求，肯定木有问题！ 马上就好！OK是不是秒更了！ (・ω< )★ 为了提高产品的竞争力和用户体验，产品经理会肯定会对数据的实时性提出要求 前端工程师把所有请求的间隔时间缩短，几万。。。。。。 几万行代码，几百个请求，又改了一遍……

几万行代码，几百个请求，又改了一周末…… 变更通讯协议 那个前端…你秒更我怎么优化都不够啊！ 后端 前端 (,,Ծ‸Ծ,,)大哥，你说怎么办…… 缩短请求间隔时间，提高刷新频率，实时数据的要求是实现了 新的问题出现 后端找你吐槽 怎么办 只有改变通讯协议，使用服务器推送技术，WebSocket等方式 几万行代码，几百个请求，又改了一周末……

几万行代码，几百个请求，又改了一通宵…… 全局数据缓存 连接数太多了？ 才1K在线人数就有上万的连接～ 还有好多重复的相同连接呢～ 运维 前端 呵呵，偷懒了没有做缓存， 小的马上给大哥补上缓存功能…… 功能的增加，模块的增加，公共数据的重复查询，网络压力增大 举例一些游戏应用，用户角色数据都是经常使用的，很多模块都需要，没有一个全局的缓存处理，就需要做很多重复的查询，消耗带宽，消耗服务器。 几万行代码，几百个请求，又改了一通宵……

我们的App帅爆了！用户数激增有木有！ 一个服务器撑不住了！按功能做成分布式！ 前端跟进一下！ 数据接口更改困难 广大群众 我们的App帅爆了！用户数激增有木有！ 一个服务器撑不住了！按功能做成分布式！ 前端跟进一下！ 随着用户数越来越多，服务器也越来越多，部署环境也越来越复杂，各种各样的数据交互需求 不断出现，前端开发者需要花越来越多的时间在处理数据交互上，而真正的前端工作花费的 时间比例就越来越少，越来越远离前端工作的真正任务。 《问题文字》 前端 需求总在不断的变化，你是否 已经改得欲仙欲死

我们怎样解决这些问题 我们需要怎样从数据交互中脱离出来 我们需要怎样解决前面例子中各种各样数据交互问题

建立数据中心统一管理所有数据请求 简单的API接口 数据中心统一路由 数据中心统一缓存 数据中心自动进行离线缓存 数据中心服务器端实时数据推送 数据中心支持传输协议灵活切换 我们的答案就是，构建一个数据中心统一管理所有数据请求 接口 - 简单方便的API 路由 – 统一管理调度请求，适应环境 缓存 – 统一缓存公共数据，无需在考虑全局变量的命名，作用域以及业务逻辑的耦合 离线 – 联网时自动缓存离线数据，离线时自动返回缓存数据，无需在业务逻辑中做任何处理 推送 – 开发人员不在需要关心如何实现推送的实现细节，简单的实现实时数据推送的功能 协议 – 数据中心把传输层都包含起来，更换传输协议不再麻烦，也无需变更任何的业务代码

数据中心的好处 简化数据查询的复杂性 把网络传输从业务逻辑中抽离 让我们集中精力在业务模块的开发上

数据中心实现原理

数据中心基本架构 数据中心 数据 中心 客户 端部 分 数据 中心 服务 端部 分 客户端应用 服务器端 Internet 网络 网络传输

········ 客户端部分框架模型 与服务端 部分交互 扩展接口层 核心接口层 事件绑定表 消息事件 回调模块 本地消息转发模块 数据缓存管理层 数据离线管理层 发送URI映射模块 接收URI映射模块 服务器调度模块 服务器实例管理 实例1 实例2 实例N 实例3 ········ 与服务端 部分交互 会话标识 传输协议层

unbind() - 取消绑定消息事件触发函数 send() - 发送消息事件 setSessionId() – 设置会话ID 核心接口层 bind() - 绑定消息事件触发函数 unbind() - 取消绑定消息事件触发函数 send() - 发送消息事件 setSessionId() – 设置会话ID 这里说明一下为何要选择事件驱动的方式来做这个数据中心 HTML5中出现的WebSocket已经给出了一个很明显的信号，那就是服务器端需要有主动推送消息的能力 如果还是按照http的请求-响应的方式来做的话，我们就没有办法统一接口，没有办法去支持服务器推送的功能， 因为这里没有请求者，服务器的推送无法判断应该交给哪个模块去处理。 在ajax的请求中就给了我们一个很强烈的事件机制的感觉，请求的返回都是类似事件响应的方式回调处理函数的 同时javascript的运行机制，也非常适合做成事件驱动的形式。

参数格式：bind(uri, callback[, count]) uri参数指明callback回调函数是由什么URI消息地址触发的 callback(message, uri) message是消息的主体，具体由发送方确定 uri消息message的URI count回调次数，默认不限制回调次数，指定时，回调函数被触发达到指定次数是，绑定事件会自动取消

unbind – 取消绑定监听事件 参数格式：unbind(uri[, callback]) uri参数指明要取消的监听事件的URI消息地址 callback是可选参数，带上该参数时，只取消对应uri上的对应callback。否则会取消所有对应uri上监听事件记录

send – 发送消息事件 参数格式：send(uri, message) uri参数是消息的URI名称 message是消息的内容，可以是任意结构和类型的变量，直接传入绑定事件的callback函数的第一个参数 send()会把uri、message以及一个唯一的消息ID组合成一个消息结构，交给下一层处理。

setSessionId – 设置会话ID 数据中心需要根据会话ID来判断连接是否否正常有效的连接 会话ID的获取是通过普通的HTTP请求等与服务端的用户验证结果获得 服务端对应的会话ID又验证服务端设置到数据中心的服务端部分

Sample Code var DC = new EventDataCenter({ server:{ “/”:”http://foo.bar/api/”, “/api/”:”http://localhost/api/” }, router:{ “/hello/”:”/api” cache:{ “/hello/”:300 } }); DC.setSessionId(“session_id”); DC.bind(“/hello/world”, function(msg,uri){…}); DC.send(“/hello/world”, {action:”say”});

消息事件回调模块 根据返回消息的URI确定要触发要的监听函数 如果没有找到则在上一层的URI上寻找 模块还负责处理监听计数，触发一次监听计数减1，计数回到0则自动移除监听函数 监听函数参数格式 callback(message, uri) message - 接收到的消息对象 uri - 当前消息uri名称

本地消息转发模块 消息URI 以 local: 开头的消息 消息会直接发送到消息回调模块 可以实现本地模块间的通讯 Sample Code: var DC = new EventDataCenter({…}); DC.bind(“/event”, function(msg){ alert(msg); }); DC.send(“local:/event”, “local Message”)

数据缓存管理层 配置信息的cache部分说明哪些部分的消息URI需要缓存，还有缓存的有时间 需要缓存的消息交给下一层处理前都会检查缓存中是否有记录 请求和响应是如何关联的 服务器的响应都要求附带客户端请求的消息记录中的消息ID，也就是send()生成的唯一ID 在收到响应消息的时候，就可以根据响应消息的原消息ID进行关联

网络离线时自动从本地静态存储中寻找对应的请求记录返回 网络正常时，请求交给下层处理，本在消息返回时更新本地本地静态存储的记录 数据离线管理层 网络离线时自动从本地静态存储中寻找对应的请求记录返回 网络正常时，请求交给下层处理，本在消息返回时更新本地本地静态存储的记录 可以使用多种静态存储技术 请求和响应是如何关联的 与数据缓存一样，都是通过消息ID来对应

URI映射功能 通过匹配替换的方式，可以动态的修改发送到服务器端URI名称 有字符串头部匹配的方式 正则匹配的方式

服务器调度模块与服务器连接实例 根据配置信息的server配置，把不同的URI地址转发到不同的服务器地址上，支持分布式应用 数据中心针对所有服务器配置均建立一个连接实例，连接实例自行维护与每个服务器的长效连接以及接受处理服务器的推送信息

传输层协议层 只实现网络传输相关的处理 不处理任何逻辑和应用事务 业务逻辑无关方便的进行替换变更

扩展接口层 可选的，不一定需要 兼容之前的接口使用习惯 把常用的请求封装一个有意思的名称 全局的加载状态控制 响应消息资料拦截转换格式

········ 服务端部分框架模型 与客户端部分交互 用户实例队列 服务应用接口模块 其他服务器的反向代理转发 会话标识与实例管理 核心接口层 事件绑定表 消息事件 回调模块 用户实例队列 会话实例 ········ 发送 队列 接收 队列 传输协议层 与客户端部分交互

unbind() - 取消绑定消息事件触发函数 send() - 发送消息事件 createSession() – 创建会话获得会话ID 核心接口层(Server) bind() - 绑定消息事件触发函数 unbind() - 取消绑定消息事件触发函数 send() - 发送消息事件 createSession() – 创建会话获得会话ID 这里说明一下为何要选择事件驱动的方式来做这个数据中心 HTML5中出现的WebSocket已经给出了一个很明显的信号，那就是服务器端需要有主动推送消息的能力 如果还是按照http的请求-响应的方式来做的话，我们就没有办法统一接口，没有办法去支持服务器推送的功能， 因为这里没有请求者，服务器的推送无法判断应该交给哪个模块去处理。 在ajax的请求中就给了我们一个很强烈的事件机制的感觉，请求的返回都是类似事件响应的方式回调处理函数的 同时javascript的运行机制，也非常适合做成事件驱动的形式。

参数格式：bind(uri, callback) uri参数指明callback回调函数是由什么URI消息地址触发的 bind – 绑定监听事件(Server) 参数格式：bind(uri, callback) uri参数指明callback回调函数是由什么URI消息地址触发的 callback带有两个参数回调函数 callback(event,session) event是事件消息对象 属性message – 客户端消息的主体 属性id – 客户端消息ID 属性uri – 事件URI名称 session是对应的客户端会话ID

session_id接受消息的客户端会话ID uri参数是消息的URI名称 message是消息的内容，可以是任意结构和类型的变量 send – 发送消息事件(Server) 参数格式： send(session_id, uri, message[, event]) session_id接受消息的客户端会话ID uri参数是消息的URI名称 message是消息的内容，可以是任意结构和类型的变量 event是对应的客户端调用事件，用来给客户端部分做消息关联，主动推送的消息可以忽略

createSession – 创建会话 创建用户会话ID 通过会话来识别验证用户

Sample Code var DC = new ServerDataCenter(); DC.bind(“/api/world”,funcion(evt，sid){ // 查询数据 // 响应客户端 DC.send(sid，“/api/world”, “你好,App”, evt); }); // 实时数据推送 function pushdata(){ DC.send(recv_sid, “/push”, “push data”); } setInterval(pushdata, 1000);

谢谢观赏 广州舜飞信息科技有限公司

关于我们

广州舜飞信息科技有限公司 2011年5月成立 追求技术创新 Openjs – 前端开源框架 欢迎技术交流，更欢迎优秀人才加入

联系方式 谭荣棉 Email：tanrongmian@sunteng.com QQ：553828185