Hel*_*ope 13 javascript file-upload http node.js
Ryan Dahl说他发明了NodeJS来解决文件上传进度条问题(https://youtu.be/SAc0vQCC6UQ).使用2009年推出Node时可用的技术,因此在Express和更高级的客户端javascript库自动告诉您进度更新之前,NodeJS究竟是如何解决这个问题的呢？
现在尝试使用Core NodeJS,我理解请求流,我可以查看标题,获取总文件大小,然后获取每个数据块的大小,告诉我完成的百分比.但后来我不明白如何将这些进度更新流回浏览器,因为在request.end()之前浏览器似乎没有更新.
我再次想要了解NodeJS最初如何解决此进度更新问题.WebSockets尚未出现,因此您无法打开与客户端的WebSocket连接,并将进度更新流回浏览器.是否有另一种客户端JavaScript技术被使用？
这是我到目前为止的尝试.进度更新将流式传输到服务器端控制台,但只有在响应流收到response.end()后,浏览器才会更新.
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(request, response){
response.writeHead(200);
if(request.method === 'GET'){
fs.createReadStream('filechooser.html').pipe(response);
}
else if(request.method === 'POST'){
var outputFile = fs.createWriteStream('output');
var total = request.headers['content-length'];
var progress = 0;
request.on('data', function(chunk){
progress += chunk.length;
var perc = parseInt((progress/total)*100);
console.log('percent complete: '+perc+'%\n');
response.write('percent complete: '+perc+'%\n');
});
request.pipe(outputFile);
request.on('end', function(){
response.end('\nArchived File\n\n');
});
}
});
server.listen(8080, function(){
console.log('Server is listening on 8080');
});
FileChooser.html的:
<!DOCTYPE html>
<html>
<body>
<form id="uploadForm" enctype="multipart/form-data" action="/" method="post">
<input type="file" id="upload" name="upload" />
<input type="submit" value="Submit">
</form>
</body>
</html>
这是一次更新的尝试.浏览器现在显示进度更新,但我很确定这不是Ryan Dahl最初为生产方案提出的实际解决方案.他是否使用长轮询？那解决方案会是什么样子？
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(request, response){
response.setHeader('Content-Type', 'text/html; charset=UTF-8');
response.writeHead(200);
if(request.method === 'GET'){
fs.createReadStream('filechooser.html').pipe(response);
}
else if(request.method === 'POST'){
var outputFile = fs.createWriteStream('UPLOADED_FILE');
var total = request.headers['content-length'];
var progress = 0;
response.write('STARTING UPLOAD');
console.log('\nSTARTING UPLOAD\n');
request.on('data', function(chunk){
fakeNetworkLatency(function() {
outputFile.write(chunk);
progress += chunk.length;
var perc = parseInt((progress/total)*100);
console.log('percent complete: '+perc+'%\n');
response.write('<p>percent complete: '+perc+'%');
});
});
request.on('end', function(){
fakeNetworkLatency(function() {
outputFile.end();
response.end('<p>FILE UPLOADED!');
console.log('FILE UPLOADED\n');
});
});
}
});
server.listen(8080, function(){
console.log('Server is listening on 8080');
});
var delay = 100; //delay of 100 ms per chunk
var count =0;
var fakeNetworkLatency = function(callback){
setTimeout(function() {
callback();
}, delay*count++);
};
Joh*_*Fun 10
首先,你的代码确实在工作; 节点发送分块响应,但浏览器只是等待更多,然后再费心去显示它.
节点文档中的更多信息:
第一次调用response.write()时,它会将缓冲的头信息和第一个主体发送到客户端.第二次调用response.write()时,Node假定您将要传输数据,并单独发送.也就是说,响应被缓冲到第一块体.
如果你将content-type设置为类似html response.setHeader('Content-Type', 'text/html; charset=UTF-8');,它会使chrome渲染内容,但是当我使用一系列设置超时调用并且内部有response.write调用时,这只是诀窍; 当我尝试使用你的代码时,它仍然没有更新dom,所以我挖得更深......
麻烦的是,浏览器在它认为合适的时候才能呈现内容,所以我设置代码来发送ajax请求以检查状态:
首先,我更新了服务器,只是将其状态存储在一个全局变量中,并打开一个"checkstatus"端点来读取它:
var http = require('http');
var fs = require('fs');
var status = 0;
var server = http.createServer(function (request, response) {
response.writeHead(200);
if (request.method === 'GET') {
if (request.url === '/checkstatus') {
response.end(status.toString());
return;
}
fs.createReadStream('filechooser.html').pipe(response);
}
else if (request.method === 'POST') {
status = 0;
var outputFile = fs.createWriteStream('output');
var total = request.headers['content-length'];
var progress = 0;
request.on('data', function (chunk) {
progress += chunk.length;
var perc = parseInt((progress / total) * 100);
console.log('percent complete: ' + perc + '%\n');
status = perc;
});
request.pipe(outputFile);
request.on('end', function () {
response.end('\nArchived File\n\n');
});
}
});
server.listen(8080, function () {
console.log('Server is listening on 8080');
});
然后,我更新了filechooser.html以使用ajax请求检查状态:
<!DOCTYPE html>
<html>
<body>
<form id="uploadForm" enctype="multipart/form-data" action="/" method="post">
<input type="file" id="upload" name="upload"/>
<input type="submit" value="Submit">
</form>
Percent Complete: <span id="status">0</span>%
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var $status = $('#status');
/**
* When the form is submitted, begin checking status periodically.
* Note that this is NOT long-polling--that's when the server waits to respond until something changed.
* In a prod env, I recommend using a websockets library with a long-polling fall-back for older broswers--socket.io is a gentleman's choice)
*/
$('form').on('submit', function() {
var longPoll = setInterval(function () {
$.get('/checkstatus').then(function (status) {
$status.text(status);
//when it's done, stop annoying the server
if (parseInt(status) === 100) {
clearInterval(longPoll);
}
});
}, 500);
});
</script>
</html>
请注意,尽管我没有结束响应,但服务器仍然能够处理传入的状态请求.
所以为了回答你的问题,Dahl被一个flickr应用程序所吸引,他看到上传了一个文件并进行了长时间轮询以检查它的状态.他被处理的原因是服务器能够处理这些ajax请求,同时继续处理上传.这是多任务处理.看到他在这段视频中正好谈了14分钟 - 甚至说,"所以这就是它的运作方式......".几分钟后,他提到了一种iframe技术,并将长轮询与简单的ajax请求区分开来.他表示他想编写一个针对这些类型的行为进行优化的服务器.
无论如何,这在当时并不常见.大多数Web服务器软件一次只能处理一个请求.如果他们去了一个数据库,叫了一个Web服务,互动与文件系统,或类似的东西,该过程将只是坐着等待它完成,而不是处理其他请求,同时它等待着.
如果要同时处理多个请求,则必须启动另一个线程或使用负载均衡器添加更多服务器.
另一方面,Nodejs通过执行非阻塞IO来非常有效地使用主进程.Node并不是第一个这样做的人,但是在非阻塞IO领域中它的区别在于它的所有默认方法都是异步的,你必须调用"sync"方法来做错事.这有点迫使用户做正确的事情.
此外,应该注意,选择javascript的原因是因为它已经是一个在事件循环中运行的语言; 有人提出处理异步代码.您可以使用匿名函数和闭包,这使异步操作更容易维护.
我还想提一下,使用promise库还可以使编写异步代码更加清晰.例如,检查出bluebirdjs --IT有一个很好的"promisify"的方法,将转换一个对象的原型,有回调签名功能(功能(错误,则params){}),而不是返回一个承诺.
| 归档时间： |
|
| 查看次数： |
10288 次 |
| 最近记录： |