Socket.io 发出进度检查

2024-01-08

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

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

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

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


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


client:

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()]);
});

server:

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


});

如果这仍然不起作用,您可以在服务器和客户端之间添加协商 服务器响应“已收到”事件,客户端在收到“已收到”事件后发送下一个块

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

EDIT:

包括反馈和消息顺序

EDIT2:

我想我误解了你的问题

但要解决我现在理解的问题,例如,指示何时刷新缓冲区的每个部分,有两个选项,要么让它仍然模拟该行为,要么接受服务器接受的块并将其用作每个部分的尺寸。

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

https://github.com/nkzawa/socket.io-stream 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);

流有一个退避机制,服务器接受流缓冲区的每个块 如果服务器速度减慢,则流的读取速度会降低,从而给您更多的进度激励

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Socket.io 发出进度检查 的相关文章

  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • Mongodb更新很多

    我正在使用express js 和 npm 模块 mongodb 进行开发 并以 mongodb 作为数据库 我有两个集合 即 用户 和 活动 一个用户可能有数千个活动 首先 我将用户的 id 姓名和图片 url 存储到 关系的活动文件 请
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 当条件评估为 true 时获取元素(扩展 ElementArrayFinder)

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • 如何列出所有未使用的詹金斯插件?

    我正在寻找方法来检查未使用哪些詹金斯插件 到目前为止 我发现我可以在以下位置查找标签配置文件带属性的文件plugin然后将它们与中列出的进行比较plugins目录 但这并没有给我完整的清单 还是有一些不存在 比如角色策略 我使用像下面这样的
  • 如何设置wpf应用程序中所有窗口的背景图片

    我想在一个地方设置 wpf 应用程序的所有窗口中所有窗口的背景图像和所有数据网格的样式 我的 app xaml 文件中有以下代码
  • Laravel:如何检查用户是否是管理员?

    我想让用户成为管理员 在网站入口处检查 用户登录 如果是这样 则授予删除或编辑产品的权利 到目前为止 这是我的代码 if Auth check p a href class btn btn success Edite a a href cl
  • 咖啡脚本不会在页面更改时触发,但在页面加载时起作用。 [轨道5]

    我在我的 Rails 项目中使用咖啡脚本 但问题是它仅在我加载 刷新 页面时才起作用 而不是在页面呈现时起作用 它也应该在页面视图更改时起作用 这是我正在使用的脚本 facebook js 咖啡 jQuery gt body prepend
  • Unity IOS 集成

    对于一个项目 我需要将 Unity3d 集成到现有应用程序中 我知道 Unity 充当 UIApplicationDelegate 我发现了一篇关于该主题的有趣文章 但我不太清楚如何以这种方式解决我的问题 是否可以从 ViewControl
  • Android 在应用程序安装后运行 Gradle 任务

    需要 Gradle 任务方面的帮助 我需要在安装应用程序后运行一些 taskX 在 installDebug 任务之后 我也尝试过像这样完成任务 task taskX type Exec dependsOn installDebug com
  • 解决 Sympy 中的不平等问题

    我试图解决 sympy 中的以下不等式 10000 x 1 lt 0 所以我发出了命令 solve poly inequality Poly 10000 x 1 lt 但是 我得到了 Interval open oo 1 10000 然而
  • Rails 清除 Heroku 上的缓存

    如何清除 Heroku 上的缓存 我试过了heroku run rails c Rails cache clear并收到以下错误 Errno ENOENT No such file or directory dir initialize a
  • Laravel 4 - 选择相关模型

    我有下表 Schema create jokes categories function Blueprint table table gt increments id table gt string name table gt string
  • C# 中的螺旋算法 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我怎样才能像这样填充数组 1 2 3 4 5 6 7 8 20 21 22 23 24 9 19 30 31 32 25 10 18 29
  • Angular2如何在使用路由的组件之间更改时再次加载javascript

    我导入了一些javascript 并将它们放入 angular cli json 代码如下 apps root src outDir dist assets assets index index html main main ts test
  • AngularJs 中 ng-model 的 Getter 和 setter 支持

    我试图通过实现一个指令来获得对 ng model 的 getter setter 支持 该指令将负责从视图 模型获取和设置值 我已经快到了 但我最终陷入了无限的 digest 循环 这个想法是设置 ng model someFieldToS
  • 是否有像 `fromNewtype . F 。到新类型`?

    通过引入类型安全性越多 这种模式就越频繁地出现newtype是要投射一个价值 或几个值 to a newtype包装器 做一些操作 然后收回投影 一个普遍存在的例子是Sum and Product幺半群 x y getSum Sum x m
  • 在 Azure 数据工厂副本中使用追加 blob 是否有任何解决方法?

    我不希望 ADF 管道中的复制数据活动覆盖 Blob 文件 而是将新数据附加到其中 但 ADF 仅支持 Blockblob 那么有没有办法将数据追加到现有文件中 您可以使用网络活动 https learn microsoft com en
  • 标题/标头位于文章标签之外的布局的最佳 HTML5 结构

    我有一个布局 可以让我选择 将侧边栏包含在文章标签中 即使它不是特定于文章的 标题位于文章标签之外 目前 我的标题位于文章标签之外 但验证器告诉我 itemprop headline 不属于任何项目 构建这个结构的最佳方法是什么 有没有fo
  • 如何在 C# 中使用 HttpClient 读取 webapi 响应

    我开发了一个小型 webapi 它有一些操作并返回我的自定义类 名为Response The Response class public class Response bool IsSuccess false string Message
  • Python Kolmogorov-Smirnov 拟合优度检验中的 p 值非常低

    我有一组数据 并通过对数正态分布拟合相应的直方图 我首先计算对数正态函数的最佳参数 然后绘制直方图和对数正态函数 这给出了相当好的结果 import scipy as sp import numpy as np import matplot
  • 组合多个 Node.js Web 应用程序

    我正在努力找出实现这一目标的最佳方法 本质上 我有大约 6 个网站需要上网 但目前它们的流量几乎为零 因此为了节省资金 它们需要部署在同一台服务器上 理想情况下我们将使用 AWS 的 Elastic BeanStalk 有没有一种方法可以像
  • WEB API Action Method 的返回类型应该是什么?

    我正在使用 NET Core 开发 ASP NET Web API 该Web API将主要由UI应用程序访问 UI将使用ASP NET Core MVC开发 但将来API也可能被其他应用程序访问 在我的 WEB API 中 所有方法都是异步
  • Socket.io 发出进度检查

    我使用 Socket io 来上传文件 它适用于以下架构 客户端 从输入读取文件并将其编码为 Base64 并压缩 客户端 发出 Socket io 事件 上传 包括压 缩文件作为数据片段 服务器 监听 上传 事件 解压缩并解码文件并保存