8

我是节点初学者，我正在尝试通过强大的设置多文件图像上传，它将有一个进度条，并且在每次上传后还会有一个回调，它将在上传完成后将所有图像动态加载到同一页面中。我知道上传开始后我需要使用 socket.io 与浏览器交互。Formidable 有一个用于“进度”的事件监听器。我需要我的客户端脚本来接收接收到的字节以创建上传栏。文件上传完成后，我希望 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

我使用了节点强大的 v1.0.14 和 socket.io 1.0.0-pre。

当客户端发送请求时，将建立连接，服务器将根据他的会话 ID 为该客户端创建一个房间。

之后在进度事件中，我们会将百分比广播给房间中的一位客户。

在这里您可以找到有关房间的更多信息：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 回答