如何使用 socket.io 在浏览器中显示使用 Node.js 下载的文件的下载进度

Question

我可以使用 Node.js 下载文件并显示并获取其进度。我想使用 socket.io 在浏览器上显示进度

谁能帮帮我...

我的代码：

var request = require('request');
var progress = require('request-progress');

var DOWNLOAD_DIR = '/usr/local/';
var file_name = 'googlenew.png' 


//displays progress on download on console
var callback = function(state){
    console.log('received size in bytes', state.received);
    console.log('total size in bytes', state.total);
    console.log('percent', state.percent);

} 

progress(request('https://www.google.com/images/srpr/logo3w.png'), {
    throttle:0,   
    delay: 0       
})
.on('progress', callback) 

.pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
.on('error', function (err) {
 console.log("error");  
})
.on('close', function (err){
console.log("Download Complete"); 
})

Answer 1

由于您已经能够使用 Node.js 下载文件并在服务器端获取进度，因此您可以将此信息发送到客户端上的套接字。

//get connected
var chat = io.of("/socket").on('connection',onSocketConnected);

function onSocketConnected(socket){
   console.log("connected :"+socket.id);  
}

//in your existing callback function of progress
//send info to client 
var callback = function(state){
    console.log('received size in bytes', state.received);
    console.log('total size in bytes', state.total);
    console.log('percent', state.percent);
    io.sockets.emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: fileName}));

} 

然后，在客户端，您必须根据收到的信息使用 HTML-CSS-JS 更新进度条。您可能需要考虑使用this library 来获取进度条。下面的代码 sn-p 使用了建议的库。

<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />

<div id="progressbar">
</div>

<script>
  var socket = io('http://localhost');
  socket.on('connect', function(){});
  socket.on('message', function(data){
    $('#progressbar').progressbar({
    maximum: 100,
    step: JSON.parse(data).percent
    });
  });
  socket.on('disconnect', function(){});
</script>