新活动中心 demo¶

零、目的¶

• 复用本地资源，节省网络流量
• 使用 webview 灵活可控，方便更新活动内容

一、原理¶

1. 客户端完成内置 HTTP 服务器

   • 目的：用于获取本地文件
   • 用法：服务端可以直接使用 http://localhost:16888/{filepath} 方式直接复用客户端本地文件

2. 客户端完成内置 Websocket 服务器

   • 目的：实现 JS 和 Lua 的消息相互传递
   • 用法：服务端构建一个 WebSocket 客户端与内置 WS 服务器连接，然后发送和监听消息即可

二、demo 设计¶

1. 后端 demo (web 游戏)¶

1. 此 demo 基于 cocos creator 2.4.5，游戏内容来自fetch star，当然为了展示，做了一点修改
   • 新增：事件分发，监听、分发消息，包括网络消息
   • 新增：websocket 客户端，实现与 Lua 的双向通信
   • 新增：http 相关 api，获取本地资源
2. demo 完成后可以使用 cocos creator 构建，构建平台选择web-mobile，构建即可
3. 构建完成后，进入构建目录，可以看到如下几个文件/目录：
   • web-mobile： cocos creator 构建生成的平台代码
   • version_control： 基于 Python3 实现的版本控制程序
     • 文件 md5 和路径的映射
     • 每次构建检查 md5 差异，然后自动更新版本
     • 构建完成后会在构建平台目录下生成版本文件manifest.json、在构建根目录下生成版本文件备份manifest_backup.json
     • 由于 cocos creator 每次构建都会删除平台目录下所有文件，因此需要一份备份文件即manifest_backup.json
   • 启动本地服务器.bat： 基于 node.js 的http-server模块实现的 http 服务器
   • 生成文件映射.bat： 调用版本控制程序，生成版本文件
4. 双击生成文件映射.bat，完成版本文件映射
5. 双击启动本地服务器.bat，开启 http 服务器，准备测试

2. 客户端 demo (接入后端实现的 web 游戏)¶

1. 客户端已实现了本地 HTTP 服务器和 WebSocket 服务器，实现可以查看：
   • 引擎层
     • mongoose
     • CynkHttpd
     • lua_cocos2dx_cynk_httpd
   • Lua 层
     • CynkHttpd
2. 客户端进入游戏后，在某一阶段（可控），拉取测试 http 服务器的版本文件
3. 检测版本更新
   • 如果客户端不存在版本文件，将向服务器请求拉取整个平台目录，并缓存到本地；
   • 否则，根据远程版本文件和本地版本文件的比对结果，只会拉取变动的文件
   • 这里有个小问题，当前 demo 的版本文件包含版本和文件映射信息，如果文件映射比较大，每次拉取会占不少网络流量，因此将两者区分开更好（有时间再更新吧）
4. 当版本更新完成之后，就可以创建 webview 用来加载游戏了
   • Windows 现在已经集成了 webview，可以直接在 Windows 上查看网页内容了
   • 后续添加了 webview 加载事件，你可以在事件回调中做一些处理，当然这个 demo 没有用到
   • 使用上和ccexp.WebView没有任何区别，可以安心使用
5. 创建 webview，加载本地缓下来的入口文件即可，参考 newActivityCenter.lua

3. demo 运行过程¶

1. 服务端准备好版本文件，启动本地测试 http 服务器
2. 客户端启动游戏，拉取 web 游戏更新
3. 更新完成后，创建 webview，加载本地缓存好的 web 游戏内容
4. 进入 web 游戏后，web 端会创建 websocket，与本地 WebSocket 服务器建立连接
5. 连接建立之后，web 端会发送一条ready消息给本地 WS 服务器，本地 WS 服务器接收到ready消息，就可以给 web 端发送消息了
6. web 游戏中的Coin文本内容是 WS 服务器发送给 web 的，点击右上角的关闭按钮，web 端会发送close消息给 WS 服务器，Lua 层接收到close消息就会将 webview 关闭