Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > Node.js对接Hybrid框架VasSonic教程

    Node.js对接Hybrid框架VasSonic教程

    HTML5 herman 3539浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

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

    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 {
        //other Sonic status.
        return result.data
    }
});

    前端如何使用

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

    <html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>业余草 Sonic php 实例：www.xttblog.com</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>
    //步骤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教程是一样的。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » Node.js对接Hybrid框架VasSonic教程

    相关文章推荐