title: How to link app.js to html page,so that I should display the progress bar in the browser using socket.io
body: <p>I'm unable to link the index.html page to app.js.I'm trying to send the progress to index.html.But,I'm failing here.How can I overcome this issue?Can anyone please help me out ...</p>
  
  <p>My index.html :</p>
  
  <pre><code>&lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="bootstrap.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="bootstrap.css" /&gt;
  
  &lt;div id="progressbar"&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    var socket = io('http://localhost:8085');
    socket.on('connect', function(){});
    socket.on('message', function(data){
      $('#progressbar').progressbar({
      maximum: 100,
      step: JSON.parse(data).percent
      });
    });
    socket.on('disconnect', function(){});
  &lt;/script&gt;
  </code></pre>
  
  <p>My app.js :</p>
  
  <pre><code>  var fs = require('fs');
  var request = require('request');
  var progress = require('request-progress');
  var DOWNLOAD_DIR = '/usr/local/';
  var file_name = 'googlenew.png' 
  
  var routes = require('./routes/index');
  var users = require('./routes/users');
  
  var app = express ();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  http.listen(8085, function(){
      console.log('listening on *:8085');
  });
  
  app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
  });
  
  io.on('connection', function (socket) {
  
    console.log("connected :"+socket.id);  
  
  });
  
  
  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: file_name}));
  
  } 
  
  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"); 
  })
  </code></pre>
  
  <p>Updated app.js :</p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var favicon = require('serve-favicon');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
  var fs = require('fs');
  var request = require('request');
  var progress = require('request-progress');
  var DOWNLOAD_DIR = '/usr/local/';
  var file_name = 'googlenew.png' 
  
  var routes = require('./routes/index');
  var users = require('./routes/users');
  
  var app = express();
  var server = app.listen(8085, function(){
      console.log('listening on *:8085');
  });
  var io = require('socket.io')(server);
  
  
  app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
  });
  
  io.on('connection', function (socket) {
  
    console.log("connected :"+socket.id);  
  
  });
  
  
  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: file_name}));
  
  } 
  
  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"); 
  })
  
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'jade');
  
  // uncomment after placing your favicon in /public
  //app.use(favicon(__dirname + '/public/favicon.ico'));
  app.use(logger('dev'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.use('/', routes);
  app.use('/users', users);
  
  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
      var err = new Error('Not Found');
      err.status = 404;
      next(err);
  });
  
  // error handlers
  
  // development error handler
  // will print stacktrace
  if (app.get('env') === 'development') {
      app.use(function(err, req, res, next) {
          res.status(err.status || 500);
          res.render('error', {
              message: err.message,
              error: err
          });
      });
  }
  
  // production error handler
  // no stacktraces leaked to user
  app.use(function(err, req, res, next) {
      res.status(err.status || 500);
      res.render('error', {
          message: err.message,
          error: {}
      });
  });
  
  
  module.exports = app;
  </code></pre>