Node.js实现的BigPipe

简介: 以前用PHP实现过,详情点击这里查看《Nginx中的PHP的缓冲问题》 无论用java、.net还是python都是可以实现bigpipe的…   拿那篇文章中的php显示页做示例: 先输出页面的主体结构: 然后按顺序更新页面的内容: 2s后输出header 4s后...

以前用PHP实现过,详情点击这里查看《Nginx中的PHP的缓冲问题》

无论用java、.net还是python都是可以实现bigpipe的…

 

拿那篇文章中的php显示页做示例:

先输出页面的主体结构:

然后按顺序更新页面的内容:

2s后输出header

4s后输出content

6s后输出footer

从加载到显示共消耗约13s (2 + 4 + 6 + 1 ~= 13s),符合预期结果

这个示例的源码(可复制至本地直接运行):

/**
* Created with JetBrains WebStorm.
* User: Meteoric_cry
* Date: 13-4-13
* Time: 上午11:10
* To change this template use File | Settings | File Templates.
*/

var http = require('http');

var server = http.createServer(function(req, res) {

res.writeHead(200, {
'Content-Type' : 'text/html',
'Transfer-Encoding' : 'chunked'
});

res.write([
'<!DOCTYPE html>',
'<html>',
'<head>',
'<meta charset="utf-8">',
'<title>Node.js Bigpipe Demo</title>',
'<style type="text/css">',
' * {margin: 0; padding:0;}',
' body {background-color:#fff;}',
' div{border:2px solid #4F81BD; margin:30px; padding: 10px;}',
' p {word-wrap:break-wrod; word-break:break-all; color: #666;}',
' .red {color: #f00;}',
' .blue {color:blue;}',
' .green {color:green;}',
'</style>',
'<script>',
'var g_startTime = new Date();',
'var g_renderArr = []',
'function render(nodeID,html){',
' g_renderArr.push(new Date())',
' document.getElementById(nodeID).innerHTML=html;',
'}',
'</script>',
'</head>',
'<body>',
'<div id="header"><p>Loading...</p></div>',
'<div id="content"><p>Loading...</p></div>',
'<div id="footer"><p>Loading...</p></div>'
].join('\r\n'));

function out_header() {
res.write("<script type='text/javascript'>render('header', '<p><span class=\"blue\">111111</span></p>');</script>\r\n");

setTimeout(out_content, 4 * 1000);
}

function out_content() {
res.write("<script type='text/javascript'>render('content', '<p><span class=\"red\">222222</span></p>');</script>\r\n");

setTimeout(out_footer, 6 * 1000);
}

function out_footer() {
res.write("<script type='text/javascript'>render('footer', '<p><span class=\"green\">333333</span></p>');</script>\r\n");

setTimeout(out_end, 1 * 1000);
}

function out_end() {

res.write([
'<script>',
'var str = [',
' "start:" + g_startTime.toGMTString(),',
' "header:" + g_renderArr[0].toGMTString() + "-" + (g_renderArr[0] - g_startTime) / 1000,',
' "content:" + g_renderArr[1].toGMTString() + "-" + (g_renderArr[1] - g_renderArr[0]) / 1000,',
' "footer:" + g_renderArr[2].toGMTString() + "-" + (g_renderArr[2] - g_renderArr[1]) / 1000,',
' "end:" + new Date().toGMTString() + "-" + (new Date() - g_renderArr[2]) / 1000 + "-" + (new Date() - g_startTime) / 1000',
'].join("\\n");',
'alert(str);',
'</script>'
].join(''));

res.end("\r\n</body></html>");
}

setTimeout(out_header, 2 * 1000);


}).listen(3002);

 

 

上面是将界面的显示顺序固定写死了,下面将展示一个灵活的动态界面:

先输出6个内容容器,然后构建6个客户端请求,当收到请求数据时直接返回给客户端。如果你需要让界面的内容按顺序显示,只需要修改,返回的delay值,比如按索引值的大小进行修改

   1: var params = url.parse(request.url, true);
   2: var delay = params.query.id * 3000; console.log(delay);

 

这个示例的完整源码:

/**
* 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);
 
上面的示例中并没有像第一个例子一样,显示输出header信息('Transfer-Encoding' : 'chunked'),而浏览器,在response里却看到了,猜测是node.js在输出的时候内部加上去的。
 
 
相比php,node.js内部实现并没有“缓冲池”的功能,都是直接输出,很简单吧…
 
 
本文参考:
目录
相关文章
|
2月前
|
JSON JavaScript 前端开发
❤Nodejs 第九章(token身份认证和express-jwt的安装认识)
【4月更文挑战第9天】Node.js第九章介绍了Token身份认证,特别是JWT(JSON Web Token)作为跨域认证的解决方案。JWT由Header、Payload和Signature三部分组成,用于在客户端和服务器间安全传输用户信息。前端收到JWT后存储在localStorage或sessionStorage中,并在请求头中发送。Express-JWT是一个中间件,用于解析JWT。基本用法包括设置secret和algorithms。注意安全问题,避免混合使用不同算法以防止降级攻击。
72 0
|
1月前
|
前端开发
windows10 安装node npm 等前端环境 并配置国内源
windows10 安装node npm 等前端环境 并配置国内源
64 3
|
2月前
|
移动开发 JavaScript 前端开发
为了学习vue3,安装nvm进行node的多版本管理
为了学习vue3,安装nvm进行node的多版本管理
99 2
|
2月前
|
资源调度 jenkins 持续交付
jenkins 自动安装nodejs16.16.0版本报错处理
jenkins 自动安装nodejs16.16.0版本报错处理
170 0
|
7天前
|
JavaScript Ubuntu Shell
Ubuntu上安装任意版本nodejs方法
通过以上步骤,您可以在Ubuntu系统上灵活地安装和管理不同版本的Node.js。这种方法让开发者能够根据不同项目的需要选择合适的Node.js版本,同时也使版本切换变得非常方便。而且,nvm能够为每个项目独立管理依赖,从而确保不同项目之间的环境隔离,增强了开发环境的稳定性和可维护性。
33 2
|
16天前
|
Web App开发 JavaScript 前端开发
Node.js介绍 , 安装与使用
【7月更文挑战第6天】Node.js介绍 , 安装与使用
28 5
|
19天前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
48 3
|
26天前
|
Dart JavaScript 前端开发
npm install node-sass 安装失败的解决方案:利用国内镜像加速安装
npm install node-sass 安装失败的解决方案:利用国内镜像加速安装
234 1
|
28天前
|
JavaScript Linux
Linux安装nodejs
Linux安装nodejs
163 2
|
29天前
|
JavaScript Ubuntu Linux
蓝易云 - linux中安装nodejs,卸载nodejs,更新nodejs,git
请根据自己的Linux发行版和版本选择合适的命令。
156 2