Socket.io发出进度检查

igo*_*lov 5 javascript sockets node.js socket.io

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

  1. 客户端:从输入读取文件并将其编码为Base64并压缩它
  2. 客户端:发送Socket.io事件"上传",包括压​​缩文件作为一段数据
  3. 服务器:收听"上传"事件,解压缩并解码文件并保存

大文件出现问题:我无法看到通过客户端发送的数据进度(就像我使用XHR一样).

要解决这些问题,我必须跟踪(检查)上传事件的上传进度.我怎样才能做到这一点?


我想在CLIENT SIDE上只收听上传进度


感谢bnuhero,socketio-file-upload有可能在服务器端收听进度,并在我们说每上传5%或20%时向客户端发送消息.所以它意味着每个文件分别发送20或5条消息.我想听取客户方面的进展.


看起来没有可能用裸Socket.io检查客户端的进度.Io-stream解决了这个问题.

Pau*_*ema 6

客户:

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()]);
});
Run Code Online (Sandbox Code Playgroud)

服务器:

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


});
Run Code Online (Sandbox Code Playgroud)

如果这仍然无法工作,您可以在服务器和客户端之间添加协商服务器响应"已接收"事件,并且客户端在收到"已接收"事件时发送下一个块

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

编辑:

包括反馈和消息顺序

EDIT2:

我想我误解了你的问题

但要解决这个问题,因为我现在理解它,例如有一个关于何时为每个部分冲洗缓冲区的指示,它有两个选项,要么仍然模拟该行为,要么接受服务器接受的块并将其用作每个部分的大小.

后者是实际的进展所以我给出了一个例子(如果服务器接受1Mb的块,文件是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);
Run Code Online (Sandbox Code Playgroud)

流有一个退避机制,服务器接受流缓冲区的每个块,如果服务器减慢流量以较低的速率读取,给你更多的进展