如何连接强大的文件上传中的Node.js到socket.io(How to connect form

2019-06-23 16:58发布

我初学节点和我试图通过设立强大的多文件上传的图像,这将有一个进度条,并每次上传后的回调,将他们完成上传后,所有的图像动态加载到同一页面。 我明白我需要使用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);
    });
});

Answer 1:

我使用的节点,强大v1.0.14和socket.io 1.0.0预。

当客户端发送请求的连接将被制成,服务器将为此创造基于客户端的他,例如会话ID的房间。

随后在进度事件,我们将播出在房间里的比例在一个客户端。

在这里,你可以找到有关客房的详细信息: 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



Answer 2:

这应该为你工作

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


文章来源: How to connect formidable file upload to socket.io in Node.js