How to connect huge file upload in socket.io in Node.js

Question

I am a node beginner, and I am trying to configure the download of a multi-file image through a formidable one, which will have a progress bar, as well as a callback after each download that will dynamically load all the images on the same page after they are loaded. I understand that I need to use socket.io to interact with the browser after starting the download. Grozny has a listener of events for "progress." I need the client side of the script to get the bytes received to create the loading bar. After the file is downloaded, I want socket.io to pass the URL of the image upload location to the client so that the client can load the image and add it to the DOM dynamically. Here is the code I have.

My question is how to structure socket.io code inside an event listener for “progress” so that it can broadcast to the client?

Here is some free pseudo code to show you what I'm talking about:

//formidable code: app.post('/new', function(req,res){ var form = new formidable.IncomingForm(); form.addListener('progress', function(bytesReceived, bytesExpected){ //Socket.io interaction here?? }); form.uploadDir = __dirname + '/public/images/'; form.on('file', function(field, file) { //rename the incoming file to the file name fs.rename(file.path, form.uploadDir + "/" + file.name); console.log(form.uploadDir + "/" + file.name); }) }); //socket.io code io.sockets.on('connection', function (socket) { socket.on('upload', function (msg) { socket.broadcast.emit('progress', bytesReceived); }); }); 

Answer 1

I used node-formidable v1.0.14 and socket.io 1.0.0-pre.

When clients send a request, a connection will be created and the server will create a room for this client based on its session identifier, for example.

Subsequently, in the progress event, we will transfer interest to one client in the room.

Here you can find more information about the numbers: https://github.com/LearnBoost/socket.io/wiki/Rooms

Server app.js (main, at startup):

 io.on('connection', function (socket) { console.log('CONNECTED'); socket.join('sessionId'); }); 

POST Server:

 form.on('progress' , function (bytesRecieved , bytesExpected) { console.log('received: ' + bytesRecieved); io.sockets.in('sessionId').emit('uploadProgress', (bytesRecieved * 100) / bytesExpected); }); 

Client:

 var socket = io.connect('http://localhost:9000'); socket.on('uploadProgress' , function (percent){ alert(percent); }); 

If you want to work with sessions, this may help: http://www.danielbaulig.de/socket-ioexpress/#comment-11315

Answer 2

this should work for you

 form.addListener('progress' , function(bytesRecieved , bytesExpected){ io.sockets.on('connection', function (socket) { socket.emit('uploadProgress', ((bytesRecieved * 100)/bytesExpected)); }); }); 

and on the client side:

 script(src='/socket.io/socket.io.js') // thats jade, but link to the .js anyway you want var socket = io.connect('http://localhost'); socket.on('uploadProgess' , function(percent){ $('#percent').text(percent); });