基于 React 同构直出的 Sonic 使用示例。React 同构直出使用 Redux/Next.js/Koa2 实现。

目录- 技术栈- 快速开始 - 安装 - 启动 - 脚本- 项目架构 - 目录结构 - 原理- 技术支持- License

§ 技术栈

• React
• Redux
• Next.js
• Koa2
• ES6

§ 快速开始

推荐升级到 node 8.x + npm 5.x 环境。

⊙ 安装

1. git clone https://github.com/Tencent/VasSonic.git <my-project-name>
2. cd <my-project-name>/sonic-react
3. npm install  # 安装项目依赖

⊙ 启动

1. npm run build
2. npm start

手机端安装 Android 或 iOS 测试用应用程序。（下载）

然后将手机与服务器连接在同一局域网下，查看服务器 ip 配置手机代理，并设置测试链接地址为 http://服务器ip:3000/demo

⊙ 脚本

§ 项目架构

⊙ 目录结构

1. .
2. ├── components               # demo 页面视图组件
3. ├── containers               # demo 页面容器组件
4. ├── pages                    # Next.js 用于存放每个页面入口组件的目录
5. │   └── demo.js              # demo 页面入口 js
6. ├── redux                    # Redux 相关模块
7. │   └── duck.js              # ducks 模式组织 redux 模块
8. ├── static                   # Next.js 用于存放静态资源的目录
9. └── server.js                # 服务入口 js

⊙ 原理

我们不去深究 React 直出以及示例中拼图游戏逻辑的实现，主要来说明下示例中是如何在 React 项目中使用 Sonic 的，流程图如下所示：

• 服务端拦截 React 渲染出来的HTML字符串，添加 HTML 注释标签来帮助 Sonic 区分模板和数据块。数据块需要通过 <!— sonicdiff-moduleName —> <!— sonicdiff-moduleName-end —> 来标记，剩下的部分称为模版。示例中代码实现如下：

1. /**
2. * 添加 Sonic 所需的 HTML 注释标签
3. *
4. * 举例:
5. * <!DOCTYPE html>                                                 <!DOCTYPE html>
6. * <html>                                                          <html>
7. * <head></head>                                                   <head></head>
8. * <body>                                                          <body>
9. * … …                                                             … …
10. * <div id="root" data-sonicdiff="firstScreenHtml">      =>        <!-- sonicdiff-firstScreenHtml -->
11. *     … …                                                         <div id="root" data-sonicdiff="firstScreenHtml">
12. * </div>                                                              … …
13. * … …                                                             </div>
14. * <script>                                                        <!-- sonicdiff-firstScreenHtml-end -->
15. *     __NEXT_DATA__=xxx                                           … …
16. * </script>                                                       <!-- sonicdiff-initState -->
17. * </body>                                                         <script>
18. *                                                                     __NEXT_DATA__=xxx
19. *                                                                 </script>
20. *                                                                 <!-- sonicdiff-initState-end -->
21. *                                                                 </body>
22. *
23. * @param html {string} 原始 HTML 字符串
24. * @returns {string} 添加注释标签后的 HTML 字符串
25. */
26. function formatHtml(html) {
27. const $ = cheerio.load(html);
28. $('*[data-sonicdiff]').each(function(index, element) {
29. let tagName = $(this).data('sonicdiff');
30. return $(this).replaceWith('<!--sonicdiff-' + tagName + '-->' + $(this).clone() + '<!--sonicdiff-' + tagName + '-end-->');
31. });
32. html = $.html();
33. html = html.replace(/<script\s*>\s*__NEXT_DATA__\s*=([\s\S]+?)<\/script>/ig, function(data1) {
34. return '<!--sonicdiff-initState-->' + data1 + '<!--sonicdiff-initState-end-->';
35. });
36. return html;
37. }

• 服务端使用 sonic_differ 模块对数据进行处理后输出给浏览器。

1. server.use(async (ctx, next) => {
2. await next();

4. // 只拦截 html 请求
5. if (!ctx.response.is('html')) {
6. return;
7. }

9. // 非 sonic 模式不做特殊处理
10. if (!ctx.request.header['accept-diff']) {
11. ctx.body = ctx.state.resHtml;
12. return;
13. }

15. // 使用 sonic_differ 模块对数据进行处理
16. let sonicData = sonicDiff(ctx, formatHtml(ctx.state.resHtml));

18. if (sonicData.cache) {
19. // sonic 模式：完全缓存
20. ctx.body = '';
21. } else {
22. // 其它 sonic 状态
23. ctx.body = sonicData.data;
24. }
25. });

• 前端在执行到 componentDidMount() 阶段时，通过 js 调用终端接口来获取 sonic 状态和数据，根据终端返回的不同状态，来决定如何渲染页面。

1. componentDidMount() {
2. // 获取客户端返回的 sonic 状态和数据，根据终端返回数据做出相应的处理
3. this.getSonicData((status, sonicUpdateData) => {
4. switch (status) {
5. // sonic 状态：数据更新
6. case 3:
7. // 使用客户端返回的数据更新页面 Store
8. let initState = sonicUpdateData['{initState}'] || '';
9. initState.replace(/<!--sonicdiff-initState-->\s*<script>\s*__NEXT_DATA__\s*=([\s\S]+?)module=/ig, function(matched, $1) {
10. window.__NEXT_DATA__ = JSON.parse($1);
11. });
12. this.props.initImgArr(window.__NEXT_DATA__.props.initialState.gameArea);
13. break;
14. default:
15. break
16. }
17. // 展示 sonic 状态
18. this.props.setSonicStatus(status);
19. });
20. }

22. getSonicData(callback) {
23. let sonicHadExecute = 0;   // 判断回调是否触发过的标识
24. const timeout = 3000;      // 终端接口 3s 内没有响应，触发超时逻辑

26. // 调用终端接口通知客户端进行 sonic 处理逻辑
27. window.sonic && window.sonic.getDiffData();

29. function sonicCallback(data) {
30. if (sonicHadExecute === 0) {
31. sonicHadExecute = 1;
32. callback(data['sonicStatus'], data['sonicUpdateData']);
33. }
34. }

36. setTimeout(function() {
37. if (sonicHadExecute === 0) {
38. sonicHadExecute = 1;
39. callback(0, {});
40. }
41. }, timeout);

43. // 终端调用 getDiffDataCallback 方法将数据传递给页面
44. window['getDiffDataCallback'] = function (sonicData) {
45. /**
46. * Sonic 状态:
47. * 0: 异常
48. * 1: 首次加载（首次和正常页面逻辑一样，前端无需特殊处理）
49. * 2: 模板更新（当模版发生变化时，终端会自动刷新当前页面，前端也无需特殊处理）
50. * 3: 数据更新（sonic页面模版没有变化，只有数据块发生变化，终端会返回变化的数据块名称和内容，前端只需要把变化的内容替换到页面即可）
51. * 4: 完全缓存（sonic页面模版和数据都没有变化，页面无需任何处理）
52. */
53. let sonicStatus = 0;
54. let sonicUpdateData = {};  // 数据更新时终端返回的数据
55. sonicData = JSON.parse(sonicData);
56. switch (parseInt(sonicData['srcCode'], 10)) {
57. case 1000:
58. sonicStatus = 1;
59. break;
60. case 2000:
61. sonicStatus = 2;
62. break;
63. case 200:
64. sonicStatus = 3;
65. sonicUpdateData = JSON.parse(sonicData['result'] || '{}');
66. break;
67. case 304:
68. sonicStatus = 4;
69. break;
70. }
71. sonicCallback({ sonicStatus: sonicStatus, sonicUpdateData: sonicUpdateData });
72. };
73. }

§ 技术支持

遇到其他问题，可以：

• 通过demo来理解 sample。
• 联系我们。

§ License

VasSonic is under the BSD license. See the LICENSE file for details.