节点强大和简单的进度条
如果我看看节点强大的文档,我可以阅读:
"Event: 'progress' (bytesReceived, bytesExpected) Emitted after each incoming chunk of data that has been parsed. Can be used to roll your own progress bar."
我想知道如何实现我自己的进度条我的意思是如何读取信息客户端? 我很困惑。 它是否在POST开始之后启动的轮询GET实现,或者在上传时是否可以从POST请求中读取信息?
如果我看看这个:
http.createServer(function(req, res) { if (req.url == '/upload' && req.method.toLowerCase() == 'post') { // parse a file upload var form = new formidable.IncomingForm(); form.parse(req, function(err, fields, files) { res.writeHead(200, {'content-type': 'text/plain'}); res.write('received upload:\n\n'); res.end(sys.inspect({fields: fields, files: files})); }); return; }
看起来像/ upload url正在处理POST请求并返回一些res.write('received upload:\ n \ n');
我的问题是谁可以阅读
res.write('received upload:\n\n');
你不需要重写onPart
钩子!
只需在每个窗体progress
事件callback调用中通过套接字广播消息,如下所示:
form.on('progress', function(bytesReceived, bytesExpected) { var progress = { type: 'progress', bytesReceived: bytesReceived, bytesExpected: bytesExpected }; socket.broadcast(JSON.stringify(progress)); });
比在客户端侦听套接字消息。
一个很好的select可以使用socket.io
请记住覆盖onPart
钩子。
incomingForm.onPart = function(part) { part.addListener('data', function() { // send back to the client the status }); }
xhr.upload.onprogress
说,你正在通过AJAX上传东西,那么你只需要在客户端绑定一个callback到xhr.upload.onprogress
:
xhr.upload.onprogress = (e) => { if (e.lengthComputable) { console.log(`${e.loaded} out of ${e.total} bytes have been uploaded`) } }
没有要求在服务器端。 看到这里的注射点的完整列表。 和教程在这里 。