Как показать ход загрузки в браузере с помощью 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 на основе полученной информации. Вы можете рассмотреть эту библиотеку для прогрессбар. Ниже фрагмент кода использует предложенную библиотеку.

<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>