2012-04-17 13 views
6

Sono un principiante del nodo e sto provando a impostare un caricamento di immagini multifile attraverso formidabile che avrà una barra di avanzamento e anche una richiamata dopo ogni upload che sarà dinamicamente carica tutte le immagini nella stessa pagina dopo averle caricate. Capisco che ho bisogno di usare socket.io per interagire con il browser dopo che il caricamento è iniziato. Formidable ha un listener di eventi per "progresso". Ho bisogno del mio script lato client per ricevere i byte ricevuti per creare una barra di caricamento. Dopo il caricamento del file, voglio che socket.io passi al client l'url di dove è stata caricata l'immagine in modo che il client possa caricare l'immagine e aggiungerla dinamicamente al DOM. Ecco il codice che ho finora.Come connettere il formidable file upload a socket.io in Node.js

La mia domanda è: come faccio a strutturare il codice socket.io all'interno del listener di eventi per "avanzamento" in modo che possa trasmettere al client?

Ecco alcuni pseudo-codice sciolto per mostrare che cosa sto parlando:

//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's 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); 
    }); 
}); 
+1

Alcuni progressi. Il modo di trasmettere al client socket.io è 'io.sockets.emit ('byte', byteRicevuto)' – mistersoftee

risposta

0

questo dovrebbe funzionare per voi

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

e sul lato client:

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

Ho usato node-formidable v1.0.14 e socket.io 1.0.0-pre.

Quando i client inviano una richiesta, verrà stabilita una connessione e il server creerà una stanza per questo client in base all'ID di sessione, ad esempio.

Successivamente all'evento di avanzamento trasmettiamo la percentuale a un cliente nella stanza.

Qui è possibile trovare maggiori informazioni camere: https://github.com/LearnBoost/socket.io/wiki/Rooms

app.js Server (principali, all'avvio):

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

Server POST:

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

Cliente:

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

Quando si desidera lavorare con le sessioni, questo potrebbe aiutare: http://www.danielbaulig.de/socket-ioexpress/#comment-11315