2012-04-17 19 views
6

私はノード初心者です。私は、動的に実行される各アップロードの後に​​進行状況バーとコールバックを持つformidableを通してマルチファイルイメージのアップロードを設定しようとしています。アップロードが完了したら、すべての画像を同じページに読み込みます。アップロードが開始された後に、ブラウザとやりとりするためにsocket.ioを使用する必要があることを理解しています。 Formidableには、「進捗状況」のイベントリスナーがあります。アップロードバーを作成するために受け取ったバイトを受け取るためにクライアントサイドスクリプトが必要です。ファイルがアップロードされた後、私はsocket.ioがイメージがアップロードされた場所のURLをクライアントに渡して、クライアントがイメージをロードしてDOMに動的に追加できるようにします。ここに私がこれまで持っていたコードがあります。Node.jsのsocket.ioに大量のファイルアップロードを接続する方法

私の質問は、クライアントにブロードキャストできるように、「進捗状況」のイベントリスナー内でsocket.ioコードをどのように構造化するのですか?ここで

は、私が何を言っているかをお見せするためにいくつかの緩い擬似コードです:

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

いくつかの進歩があります。 socket.ioクライアントにブロードキャストする方法は 'io.sockets.emit( 'bytes'、bytesReceived)'です。 – mistersoftee

答えて

0

これはあなた

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

と、クライアント側のために働く必要があります。

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

node-formidable v1.0.14とsocket.io 1.0.0-preを使用しました。

クライアントがリクエストを送信すると、接続が確立され、サーバーはセッションIDに基づいてこのクライアントのための部屋を作成します。

その後、進行状況イベントで、その割合をルーム内の1人のクライアントにブロードキャストします。

ここでは、客室に関するより多くの情報を見つけることができます(起動時にメイン、)https://github.com/LearnBoost/socket.io/wiki/Rooms

サーバーapp.js:

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

サーバーPOST:

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

クライアント:

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

セッションで作業したい場合は、以下のようになります。http://www.danielbaulig.de/socket-ioexpress/#comment-11315

関連する問題