Socket.io发出进度检查

Socket.io emit progress check

本文关键字：检查 io Socket      更新时间：2023-09-26

我使用Socket.io上传文件。它适用于以下模式：

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

这个问题发生在大文件中：我看不到通过客户端发送的数据的进度（就像我对XHR所做的那样）。

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

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

多亏了bnuhero，socketio文件上传可以在服务器端监听进度，并在每上传5%或20%时向客户端发送消息。因此，这意味着每个文件分别发送20或5条消息。我想听听客户方面的进展。

看起来不可能用裸Socket.io在客户端检查进度。io流解决了这个问题。

客户端：

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

});

如果这仍然不起作用，您可以在服务器和客户端之间添加一个协商服务器对"接收到的"事件作出响应，客户端在接收到"接收到"事件时发送下一个块

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

编辑：

包括反馈和消息订单

第2版：

我想我误解了你的问题

但为了解决我现在所理解的问题，例如，为它刷新的每个部分提供缓冲区刷新时间的指示，有两个选项，要么让它仍然模拟这种行为，要么接受服务器接受的块，并将其用作每个部分的大小。

后者是实际的进展，所以我举了一个例子（如果服务器接受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);

流具有退避机制，服务器接受流缓冲区的每个块如果服务器放慢速度，则以较低的速率读取流，从而获得更多的进度。

相关文章：