个人中心
gpt4 book ai didi

javascript - NodeJS - 使用 Core NodeJS 和原始 Node 解决方案的带有进度条的文件上传

转载 作者：IT老高 更新时间：2023-10-28 23:08:24 25 4
gpt4 key购买 nike

Ryan Dahl 说他发明了 NodeJS 来解决文件上传进度条问题 (https://youtu.be/SAc0vQCC6UQ)。使用 2009 年推出 Node 时可用的技术，所以在 Express 和更高级的客户端 JavaScript 库自动告诉您进度更新之前，NodeJS 究竟是如何解决这个问题的？

现在尝试仅使用 Core NodeJS，我了解请求流，我可以查看标题，获取总文件大小，然后获取每个数据 block 的大小，告诉我百分比完全的。但是后来我不明白如何将这些进度更新流式传输回浏览器，因为浏览器似乎直到 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');
});

文件选择器.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++);
};

最佳答案

首先，您的代码确实有效； Node 发送分 block 响应，但浏览器只是在等待更多信息才显示它。

更多信息请访问 Node Documentation :

The first time response.write() is called, it will send the buffered header information and the first body to the client. The second time response.write() is called, Node assumes you're going to be streaming data, and sends that separately. That is, the response is buffered up to the first chunk of body.

如果你将 content-type 设置为 html 像 response.setHeader('Content-Type', 'text/html; charset=UTF-8');，它会让 chrome 渲染内容，但这只有在我使用一系列带有 response.write 调用的 set timeout 调用时才奏效；当我尝试使用您的代码时，它仍然没有更新 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 请求。这是多任务处理。看到他在 this video 14 分钟后谈论它——甚至说，“所以这就是它的工作原理……”。几分钟后，他提到了一种 iframe 技术，并将长轮询与简单的 ajax 请求区分开来。他说他想编写一个针对这些类型的行为进行优化的服务器。

无论如何，这在当时并不常见。大多数网络服务器软件一次只能处理一个请求。如果他们访问数据库、调用 web 服务、与文件系统交互或类似的事情，进程将只是等待它完成，而不是在等待时处理其他请求。

如果您想同时处理多个请求，则必须启动另一个线程或使用负载平衡器添加更多服务器。

另一方面，Nodejs 通过非阻塞 IO 非常有效地利用了主进程。 Node 不是第一个这样做的，但它在非阻塞 IO 领域的不同之处在于它所有的默认方法都是异步的，你必须调用“同步”方法来做错误 事情。它有点强制用户做正确的事情。

另外，应该注意的是，选择 javascript 的原因是因为它已经是一种在事件循环中运行的语言；它是制造来处理异步代码的。您可以使用匿名函数和闭包，这使得异步操作更易于维护。

我还想提一下，使用 Promise 库还可以让编写异步代码更加简洁。例如，查看 bluebirdjs --它有一个很好的“promisify”方法，可以将对象原型(prototype)上具有回调签名 (function(error, params){}) 的函数转换为返回一个 Promise。

关于javascript - NodeJS - 使用 Core NodeJS 和原始 Node 解决方案的带有进度条的文件上传，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31529013/

25 4 0
文章推荐： javascript - 部署后如何强制客户端重新加载？
文章推荐： android - 在 EditText 上输入键，按两次 onKey
文章推荐： android - 在 Sherlock 操作栏中显示不确定的进度
文章推荐： javascript - 将对象保存在模块中并从不同的模块访问它
IT老高
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com