Node实现bigpipe

最新推荐文章于 2018-11-27 07:00:03 发布

iziminy

最新推荐文章于 2018-11-27 07:00:03 发布

阅读量444

点赞数

分类专栏： NodeJs

本文链接：https://blog.csdn.net/zimin1985/article/details/78684974

版权

NodeJs 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

bigpipe.js

var Bigpipe=function(){
    this.callbacks={};
}

Bigpipe.prototype.ready=function(key,callback){
    if(!this.callbacks[key]){
        this.callbacks[key]=[];
    }
    this.callbacks[key].push(callback);
}

Bigpipe.prototype.set=function(key,data){
    var callbacks=this.callbacks[key]||[];
    for(var i=0;i<callbacks.length;i++){
        callbacks[i].call(this,data);
    }
}

app.js

var express = require('express');
var path = require('path');
var http = require('http');
var ejs = require('ejs');
var app = express();

app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.get('/index.html', function (req, res) {
    res.render('index', { title: "测试" }, function (err, str) {
        res.write(str)
    })
    var Pagelets_list ={
        pagelet1:false,
        pagelet2:false
    }
    var data = {is: "true"};
    function is_end(Pagelets) {
        Pagelets_list[Pagelets]=true;
        for (x in Pagelets_list) {
            if(!Pagelets_list[x]){
                return;
            }
        }
        res.end();
        return;
    }

    function Pagelets(Pagelets) {
        res.write('<script>bigpipe.set("' + Pagelets + '",' + JSON.stringify(data) + ');</script>');
        is_end(Pagelets)
    }
    setTimeout(function(){Pagelets("pagelet1");},1000);
    setTimeout(function(){Pagelets("pagelet2");},3000);
});

http.createServer(app).listen(3000);

html前端代码

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>zchq88-bigpipe</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script src="/js/bigpipe.js"></script>
<script>
    var bigpipe=new Bigpipe();
    bigpipe.ready('pagelet1',function(data){
        $("#test1").html("test1 ready");
    })
    bigpipe.ready('pagelet2',function(data){
        $("#test2").html("test2 ready");
    })
</script>
</body>
</html>

iziminy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node实现bigpipe

bigpipe.jsvar Bigpipe=function(){ this.callbacks={};}Bigpipe.prototype.ready=function(key,callback){ if(!this.callbacks[key]){ this.callbacks[key]=[]; } this.callbacks[key
复制链接

扫一扫