0

I am able to download file and display and get its progress using Node.js. I want to display the progress on browser using socket.io

Can anyone please help me out ...

My code :

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"); 
})

enter image description here

prasun
  • 7,073
  • 9
  • 41
  • 59
dev333
  • 713
  • 2
  • 17
  • 38
  • Actually I've tried downloading a file without using socket.io.Now I'm trying to implement using socket.io.Please check my edited code without using socket.io – dev333 Nov 16 '15 at 12:32
  • With this code,I'm unable to display the progress of download in the browser.So,I'm planning to implement using socket.io – dev333 Nov 16 '15 at 12:34
  • are you downloading file in browser or uploading to Node.js server? – prasun Nov 16 '15 at 12:37
  • Actually,I'm trying to download a file from browser,so that the downloaded file will be in the ubuntu file system.Now I'm trying to display the list of files and directories in the file system along with the status. – dev333 Nov 16 '15 at 12:41
  • The current format of my web page is like this.Now trying to display the download status of a file,whether the download is complete (or) not.If not,show the % of file downloaded in the browser – dev333 Nov 16 '15 at 12:43
  • sorry, I am not getting why would you need to open writestream in that case. Is it that you are downloading file using request and saving file into ubuntu where node.js code is running and at the same time you want to show progress to a client connected via browser – prasun Nov 16 '15 at 12:49
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95236/discussion-between-gangigunta-divya-and-prasun). – dev333 Nov 16 '15 at 12:50
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95325/discussion-between-gangigunta-divya-and-prasun). – dev333 Nov 17 '15 at 10:41

1 Answers1

3

Since, you are already able to download file using Node.js and grab the progress on server side, you can send this info to a socket on client.

//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}));

}

Then, on the client side, you got to update your progressbar using HTML-CSS-JS based on received info. You may want to consider this library for progressbar. Below code snippet uses the suggested library.

<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>
prasun
  • 7,073
  • 9
  • 41
  • 59
  • 1
    Hi Prasun,how can we sen progress to the html page? I had tried with the above code.But,I'm unable to send the progress to html page – dev333 Nov 18 '15 at 07:55
  • once you open the socket, you can send message from server using io.sockets.emit('message', JSON.stringify({size: state.total, received: state.received, percent: state.percent, fileName: fileName})); – prasun Nov 18 '15 at 08:07
  • Ya now its working fine.But regarding progress bar do we need to use 'bootstrap-progressbar' module – dev333 Nov 18 '15 at 08:14
  • you could write your own html or use any thing else, but, this is the one I know of. Once, you get the message from socket.io you would update the same HTML element i.e. $('#progressbar') . Make sure you are receiving the message from server and socket.on('message' ) callback is being fired – prasun Nov 18 '15 at 08:20
  • along with the below js and css files, do I need to use "bootstrap-progressbar.js" file for the progressbar function, $('#progressbar').progressbar({ maximum: 100, step: JSON.parse(data).percent }); – dev333 Nov 18 '15 at 09:00
  • .Does these files files belong to "bootstrap" module – dev333 Nov 18 '15 at 09:06