其次：游戏时，可以直接关闭CEF进程，只保留后端C++微服务，内存占用20M（最新版本实测30M），登录态保留在微服务中，并能实现tip提示，而CEF UI完全可以通过从微服务拉取数据重建。完美解决问题2。

最后：多人协作的问题，这里大神设计还是相当巧妙的，H5和C++层都设计成了插件机制，能无限扩展，而不会互相冲突，其次还可以按需加载，一劳永逸的解决了问题3。

对于CEF本身和C++的MicroService实现部分我们这里就不去详细深入介绍了（水太深），我感兴趣的还是前端部分，所以这里主要是探究下在CEF里面运行的前端组件部分的实现思路。

首先我们想象中的前端组件就是html，js和css的文件组合，但是在LCU客户端这里还不太一样，安装完LOL游戏客户端后，在安装目录 LeagueClient\Plugins 下面有一堆文件夹，分别是以rcp-be- 或者 rcp-fe- 开头的，如下图

be 代表的是C++的MicroService组件，而fe就是我们要研究的前端组件实现了，打开fe的一个目录，我们可以看到一般有2个文件

1.deion.json 模块描述信息

2.assets.wad 包含完整组件文件（不过这里都是压缩过的）

接下来我们要看下wad里面都是什么东东，发现一般的解压缩软件无法解压，然后搜索在github上找到了解压wad文件的node工具包，解压完就看到我们熟悉的内容了html，js和json，图片等资源，我这里先打开rcp-fe-lol-home组件，这个是LCU打开加载的首页，如下图：

在解压完的根目录了，有个928200cf91a315ce.min.js文件，这个就是主窗口的js打包压缩文件，我们可以用编辑器打开格式化一下，还是可以大致分析出很多我们需要的信息，在这个js里，我们发现了主窗口容器常用的消息定义：

容器接收：

rcp-fe-lol-home-loaded：告知框架首页加载完毕

rcp-fe-lol-home-data-request：请求当前账号和环境信息

rcp-fe-lol-home-session-request：请求当前登录token

rcp-fe-lol-home-champ-game-data-request：请求指定英雄和皮肤的详细信息

rcp-fe-lol-home-open-store：请求打开商店

rcp-fe-lol-home-play-sound：请求播放声音

容器发送

rcp-fe-lol-home-hide：主窗口隐藏

rcp-fe-lol-home-show：主窗口显示

rcp-fe-lol-home-settings-changed：游戏配置更新

rcp-fe-lol-home-data-response：返回当前账号和环境信息

rcp-fe-lol-home-session-response：返回当前登录的token

rcp-fe-lol-home-champ-game-data-response：返回指定英雄和皮肤的相信信息

…

除了上面的消息定义，我还找到基础关键的代码实现

1、首先是iframe创建：

2、给iframe发送消息

3、消息通讯

上图我们可以看到上面常见的几个消息，这里接受到消息后，会有相应的处理，然后处理结束后，会把结果再通过消息返回，下面我们分析下几个消息的处理细节：

消息处理分析

rcp-fe-lol-home-data-request

我们可以看到此消息的hanlder内部是直接调用了f.getClientData方法，然后得到结果t，通过response消息返回，f不用管，下面我们看下getClientData方法的实现：

上面通过字段名称，我们可以了解到是直接返回了账户和系统相关的信息。同样的rcp-fe-lol-home-session-request也是类似的，接下来我们分析下一个比较有用的消息。

rcp-fe-lol-home-champ-game-data-request