8

私はノードの初心者であり、進行状況バーと、アップロードが完了した後にすべての画像を同じページに動的にロードする各アップロード後のコールバックを持つ手ごわいを介して複数ファイルの画像アップロードを設定しようとしています。アップロードが開始された後、socket.io を使用してブラウザーと対話する必要があることを理解しています。手ごわいには、「進行状況」のイベントリスナーがあります。受信したバイトを受信して​​アップロード バーを作成するには、クライアント側のスクリプトが必要です。ファイルのアップロードが完了したら、socket.io で画像がアップロードされた場所の URL をクライアントに渡して、クライアントが画像を読み込んで DOM に動的に追加できるようにします。ここに私がこれまでに持っているコードがあります。

私の質問は、クライアントにブロードキャストできるように、「進行状況」のイベントリスナー内で 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);
    });
});
4

2 に答える 2

4

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

サーバーポスト:

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

于 2014-04-21T22:59:54.307 に答える
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); 
 });
于 2012-05-30T16:43:26.217 に答える