• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Node.js对接Hybrid框架VasSonic教程

JAVA web前端中文站 2年前 (2017-08-10) 1855次浏览 已收录 0个评论

腾讯由于有微信小程序等需要快速打开 H5 的场景,因此加速 H5 首屏打开效率就成了研发的重任。根据这两天腾讯发布的 VasSonic 来看,打开的效率确实提高了不少。本文将结合nodejs来对 VasSonic 框架进行对接。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

VasSonic 配合node.js,需要依赖 nodejs 的版本等信息。具体看下面的 3 条依赖:

  1. nodejs 的节点版本> 7.0。因为代码中使用了 async/await 语法。
  2. 安装 sonic_differ 模块
  3. 导入 sonic_differ 模块

安装 sonic_differ 模块

 npm install sonic_differ --save

导入 sonic_differ 模块

 const differ = require('sonic_differ');

在 Sonic 模式下从服务器截取和处理数据。

首先,像下面的代码一样创建一个 Sonic 缓存结构。

 let sonic = {     
 buffer: [],     write: function (chunk, encoding) {         
 let buffer = chunk;         
 let ecode = encoding || 'utf8';         
 if (!Buffer.isBuffer(chunk)) {             
 buffer = new Buffer(chunk, ecode);         }         
 sonic.buffer.push(buffer);     } };

在从服务器截取数据并使用 sonic_differ 模块进行处理

 response.on('data', (chunk, encoding) => {     
 sonic.write(chunk, encoding) }); 
 response.on('end', () => {     
 let result = differ(ctx, Buffer.concat(sonic.buffer));     
 sonic.buffer = [];     
 if (result.cache) {         
 //304 Not Modified, return nothing.         
 return ''     } else {         
 //www.lisa33xiaoq.net    other Sonic status.         
 return result.data     } });

前端如何使用

这里是一个简单的演示,演示如何使用 Sonic 为前端。

 <html> 
 <head>     
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">     
 <title>web 前端中文站 Sonic php 实例:www.lisa33xiaoq.net</title>     
 <script type="text/javascript">                          
 //通过 JavaScript 界面与移动客户端进行交互以获取 Sonic 差异数据。            
 function getDiffData(){                 
 window.sonic.getDiffData();             }            
 //步骤 3:处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。               
 function getDiffDataCallback(result){                 
 var sonicStatus = 0;                  
 /** *声音状态:* 0:无法从手机客户端获取任何数据。* 1:手机客户端首次使用 Sonic。
 /* 2:移动客户端重新加载整个网站。* 3:网站将通过本地刷新动态更新。*/
 /* 4:移动客户端的 Sonic 请求收到 304 响应代码,没有任何修改。      * /                  
 sonicUpdateData = {};                 
 var result = JSON.parse(result);                 
 if(result['code'] == 200){                     
 sonicStatus = 3;                     
 sonicUpdateData = JSON.parse(result['result']);} else if (result['code'] == 1000) {                     
 sonicStatus = 1;} else if (result['code'] == 2000) {                     
 sonicStatus = 2; } else if(result['code'] == 304) { 
 sonicStatus = 4; }                 
 handleSonicDiffData(sonicStatus, sonicUpdateData);}             
 //步骤 3:处理来自移动客户端的响应,包括 Sonic 响应代码和差异数据。              
 function handleSonicDiffData(sonicStatus, sonicUpdateData){                 
 if(sonicStatus == 3){                      
 //网站将被动态更新,并在本地刷新模式下运行一些 JavaScript。                     
 var html = '';                     
 var id = '';                     
 var elementObj = '';                     
 for(var key in sonicUpdateData){                         
 id = key.substring(1,key.length-1);                         
 html = sonicUpdateData[key];                         
 elementObj = document.getElementById(id+'Content');                         
 elementObj.innerHTML = html;}}}</script> </head> 
 <body>
 <html>
 <head></head>
 <body>//web 前端中文站
 //步骤 1:通过插入不同的注释锚来指定模板和数据。 
 <div id="data1Content"> 
 <!--sonicdiff-data1--> 
 <p id="partialRefresh"></p> 
 <!--sonicdiff-data1-end--> 
 </div> 
 <div id="data2Content"> 
 <!--sonicdiff-data2--> 
 <p id="data2">here is the data</p> 
 <!--sonicdiff-data2-end--> 
 <p id="pageRefresh"></p> 
 </div> 
 <div id="data3">data3</div> //步骤 2:通过 Javascript 界面从移动客户端接收 diff 数据。 
 <script type="text/javascript"> window.function(){ getDiffData(); } </script> 
 </body>
 </html>

上面的前端用法和 php 对接Hybrid 框架VasSonic 教程是一样的。

相关参考

有关node.js下 Koa 的学习有一个系列的学习教程,大家可以参考着以下资料,循序渐进地掌握Koa 框架知识。

1.NODE.JS KOA 框架 的基本用法

2.NODE.JS KOA 框架 的路由用法

3.NODE.JS KOA 框架 的中间件用法

4.NODE.JS KOA 框架 的 COOKIES、表单、文件上传功能详解

5.NODE.JS KOA 框架 的错误处理

6.闲谈 NODE.JS 的 KOA 框架和 EXPRESS 框架

7.NODE.JS 对接 HYBRID 框架 VASSONIC 教程

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Node.js 对接 Hybrid 框架 VasSonic 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址