bigpipe nodejs-优快云博客

本文展示了如何使用Node.js实现网页的渐进加载，通过创建多个HTTP服务器实例，根据用户请求动态加载内容，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Created with JetBrains WebStorm.
 * User: zhangyi
 * Date: 13-4-23
 * Time: 上午10:57
 * To change this template use File | Settings | File Templates.
 */
var http = require('http');
var sys = require('sys');
var url = require("url");

http.createServer(function(request, response) {

    response.writeHead(200, {"Content-Type" : "text/html"});
    response.write("<!Doctype html><html><head>");
    response.write("<style type='text/css'>div{border:2px solid #4F81BD; margin:30px; padding: 10px;}</style>");
    response.write("<script type=\"text/javascript\">function arrived(id,text) { var b=document.getElementById(id); b.innerHTML = text; }</script>");
    response.write("</head><body><div>Progressive Loading");
    for(var i = 0; i < 6; i++) {
        response.write("<div id='" + i + "'>Loading...</div>");
    }
    response.write("</div>");


    var down = 6;
    for (i = 0; i < 6; i++) {
        var proxy = http.createClient(2000, "localhost");
        var proxyRequest = proxy.request("GET", "/?id=" + i, {"host" : "localhost"});

        proxyRequest.addListener('response', function (proxyResponse) {
            --down;
            proxyResponse.addListener('data', function(chunk) {
                response.write(chunk, 'binary');
            });
            proxyResponse.addListener('end', function() {
                if(down == 0) {
                    response.end();
                }
            });
        });
        proxyRequest.end();
    }
    response.write("</body></html>");

}).listen(8080);

http.createServer(function(request, response) {

    var delay = Math.round(Math.random() * 8000);
    /*
    var params = url.parse(request.url, true);
    var delay = params.query.id * 3000; console.log(delay);
    */
    setTimeout(function() {
        var params = url.parse(request.url, true);
        var id = params.query.id;
        response.writeHead(200, {"Content-Type" : "text/html"});
        var content = "<span>Content of Module " + id + "</span>";
        response.write("<script>" +
            "arrived('" + id + "', '" + content + "');" +
            "</script>");
        response.end();
    }, delay);
}).listen(2000);

原文：http://www.cnblogs.com/meteoric_cry/archive/2013/04/23/3037384.html