|
2017-07-12 20:14来源:Gad-腾讯游戏开发者平台 原标题：腾讯GAD 程序老司机：LOL新版客户端LCU架构探析 在做LOL竞技场项目（项目总结）的时候，发现WEB页面可以直接调用客户端里面的接口和数据，这使我很好奇，决心花点时间再研究下这个实现的大致原理，拓展一下思路和知识面，也为后续这种内嵌客户端的项目开发积累经验，然后在得到多位大牛的帮助下，最后才有了这篇浅显的分析，希望能抛砖引玉，如果你了解得更深入，也可以消息我，一起探讨。 原作者：springwang 初探：入口首先我们来看下，在我做的页面里调用客户端接口的代码： 首先是请求接口 其次是等待结果返回 从上面的实现我们大致可以判断，这里是通过window的postMessag消息机制来进行数据通讯的，我们再继续往下分析下 RClientWindowMessenger 的定义，看能否证实一下，该对象是在一个JS文件中定义的对象，而sendMessage的定义如下： 如果我们把上面sendMessage调用和实现的代码组合到一起看，其实就是我们在自己的页面里面调用顶层的window对象来发送一条消息，具体如下： 而数据也是通过消息从客户端传送回来的，而RClientWindowMessenger.addMessageListener的实现就比较简单了，就是实现一个事件分发，把对应事件请求结果分发给事情处理器，如下： 到这里我们只是了解了我们的页面向客户端请求数据使用的是window.postMessage消息机制，但是我们并不了解客户端是怎么接收到这个消息，并处理再返回对应结果的，咱接着往下深入看看。 二探：架构从上面我们大概能知道我们的页面是嵌入到一个父级页面里面的，因为使用了top，为了证实这个，我在LOL的客户端测试过，在我们的页面里，判断top==window=false,这说明top是存在的另外一个页面，然后我就猜想，top里面应该隐藏了很多的实现逻辑。为了继续深入，我找了负责对接LOL新版LCU客户端的同事，从他们那里了解了到了更多的信息，这更多信息就得了解下riot为啥会有LCU客户端，是为了解决什么问题？并且是怎么解决的呢？这个答案在LCU架构大神自己分享的文章里面我找到了答案，有三个原因： 在博客里大神提到LCU之前的客户端是08年使用AdobeAir实现的，但是随着时间发展，这个框架遇到了下面几个最突出的问题： 第一、H5和JS实现桌面Client端应该有很成熟的方案，并且这能带来额外的好处，比如标准化的流程，开发工具和开发者。 第二、玩家想要在退出游戏的时候保持登录态，接收好友请求或者游戏邀请，而air资源占用较高，有些人会把进程杀掉 第三、随着项目扩大，当很多team都想为客户端增加功能的时候，冲突问题越来越严重 为了解决上面的三个问题，直播，大神设计了超级腻害的架构（当然中间也躺了很多坑，具体可以去文末参考资料看英文原文），就是利用H5+JS来渲染前端UI，然后C++来处理业务逻辑和后端通信，而前端UI接收事件，通过websocket跟后端的C++模块通信。 通过上图我们可以看到，H5部分是运行在CEF（Chromium Embedded Framework）容器里的，这里的CEF你可以简单的理解为就是一个Webview，只不过它比Webview更加灵活，开奖，可深度定制，因为它是Google大大开源的，是chrome浏览器实现的内核版本，能实现HTML,JS,CSS的解析，而C++部分还是native实现。 看完上面我们就能知道，这不就是一个CS架构哇，前端UI利用H5技术，后端跑着一堆C++的Microservice，对的没错，大神自己也说这就是一个CS架构，那这个架构是如何解决上面遇到的三个问题的呢？ 首先：基于CEF, 使用标准规范的H5+JS实现UI展示和变换逻辑，轻松解决问题1。 (责任编辑：本港台直播) |