Socket.io发出进度检查

 金豪情圣 发布于 2023-02-09 20:16

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

    客户端:从输入读取文件并将其编码为Base64并压缩它

    客户端:发送Socket.io事件"上传",包括压​​缩文件作为一段数据

    服务器:收听"上传"事件,解压缩并解码文件并保存

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

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


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


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


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

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

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

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

    编辑:

    包括反馈和消息顺序

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

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

    2023-02-09 20:20 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有