javascript - Socket.io 发出进度检查

Question

我使用 Socket.io 上传文件。它适用于以下架构:

1. 客户端:从输入中读取文件并将其编码为Base64并压缩
2. 客户端:发出一个 Socket.io 事件“上传”，包括压​​缩文件作为一条数据
3. 服务器:监听“上传”事件，解压解码文件并保存

大文件会出现问题:我看不到通过客户端发送的数据的进度(就像我使用 XHR 所做的那样)。

为了解决这些问题，我必须跟踪(检查)发出事件的上传进度。我该怎么做？

---

我只想在客户端收听上传进度

---

感谢 bnuhero，socketio-file-upload 提供了在服务器端监听进度并在假设每上传 5% 或 20% 时向客户端发送消息的可能性。所以这意味着每个文件分别发送 20 或 5 条消息。我想听听客户端的进展情况。

---

看起来无法使用 naked Socket.io 在客户端检查进度。 Io-stream 解决了这个问题。

Answer 1

客户:

var chunk_size = 100;
var compressed_data = 'some-long-string';
var reg = new RegExp('/.{1,'+chunk_size+'}/g');
var parts = compressed_data .match(reg);
var l = parts.length -1;

client.socket.emit('data', parts.pop());

client.socket.on('received', function () {
    client.socket.emit('data', [l - parts.lengt, parts.pop()]);
});

服务器:

sockets.on('connection', function (socket) {
  var parts = [];

  socket.on('data', function (data) {
     if (data[1] === undefined) {
         fs.writeFile(parts.join(''), callback...);
     } else {
         parts[data[0]] = data[1];
         socket.emit('received');
     }
  });


});

如果还是不行，你可以在服务器和客户端之间添加一个协商服务器响应“已接收”事件，客户端在接收到“已接收”事件时发送下一个 block

这允许您的服务器限制客户端的速度，但是这应该已经可以通过您使用的套接字库工作

编辑:

包括反馈和消息顺序

编辑2:

我想我误解了你的问题

但要解决我现在理解的问题，例如，指示何时为它刷新的每个部分刷新缓冲区，有 2 个选项，要么让它仍然模拟该行为，要么接受服务器接受的 block 和使用它作为每个部分的大小。

后者是实际进度，所以我举一个例子(如果服务器接受 1Mb 的 block 并且文件是 1Mb，它仍然会一步从 0 到 100。

https://github.com/nkzawa/socket.io-stream

服务器示例就是那个 github 页面上显示的内容

客户:

var io = require('socket.io-client');
var ss = require('socket.io-stream');

var socket = io.connect('http://example.com/user');
var stream = ss.createStream();
var filename = 'profile.jpg';
var through = require('through');

var compressed_data = 'some-long-string';
var l = compressed_data .length;
var total_progress = 0;

//pass the stream trough throug, giving feedback for each chunk passed
var tr = through(function (chunk) {
    total_progress += chunk.toString().length;
    client.socket.emit('progress', l, total_progress);
    this.queue(chunk)
}, function () {
    client.socket.emit('progress', l, l);
})

//use the streaming version of socket.io
ss(socket).emit('profile-image', stream, {name: filename});

//get a stream for the compressed_data
//filter it trough tr for the progress indication
//and pass it to the socket stream
fs.createReadStream(compressed_data ).pipe(tr).pipe(stream);

流有退避机制，服务器接受流缓冲区的每个 block 如果服务器速度变慢，则以较低的速率读取流，从而为您提供更多进度激励