Socket.io - 每 34 毫秒接收一次数据

本文关键字：数据 一次 io Socket | 更新日期: 2023-09-27 18:36:22

我正在尝试使用从 C# 应用程序捕获的图像创建 HTML5 '远程桌面'。图像被转换为 base64 字符串，并通过 socket.io 发送到页面并显示在画布上。它在我的 PC 上运行得很好，但在任何速度较慢的计算机上都不能。它似乎更新得不够快，导致页面崩溃。以下是"接收"操作代码：

socket.of('/1').on('receive', function (data) {
    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, example.width, example.height);
    };
    img.src = "data:image/png;base64," + data.message;
});

数据每 34 毫秒发送一次，因此画布以大约 29 fps 的速度更新，并且看起来像是实时视频。有没有办法接收数据并在另一个"线程"中绘制图像？或者任何人都可以建议如何解决此问题吗？感谢您的帮助。

Socket.io - 每 34 毫秒接收一次数据

Browserling完全可以完成您要完成的任务 - 它使用<canvas>显示远程桌面界面。 方便的是，他们没有缩小代码。 你可以看看他们是怎么做的。

如果你可以将你的C#最终设置为VNC服务器，我会使用noVNC，一个使用WebSockets和<canvas>的浏览器VNC客户端。 （值得一读的是noVNC的性能说明。

当您使用允许进行交叉通信并将数据从客户端发送到服务器的任何时间（与服务器到客户端一样）的 socket.io 时，您应该制定机制，不仅要向客户端发送数据，而且要更加小心。

将图像数据

发送到客户端时，不要立即发送另一个图像数据。首先，ping 可能很低是一回事，但带宽可以低 - 是另一回事。
当你将图像数据从服务器发送到客户端时，客户端接收数据时，使客户端自动向服务器发送您接收数据并对其进行处理的信息，使服务器知道客户端已准备好接收下一个图像。

您的 FPS 将被丢弃，但这是使实时视频在任何类型的连接和任何类型的分辨率下高效工作的常见做法。
这不是播放已经存在的视频 - 因此没有缓冲或预缓存过程的地方。
为了稍微提高性能，您可以根据接收和处理图像以提前发送下一帧的 ping 和反应速度进行计算，在连接良好时可能会将 FPS 提高 5-10，在慢速连接时将 FPS 提高 0-3。

同时，您可能希望研究流式传输实时图像的更好方法，例如MJPEG（Motiona JPEG），它允许流式传输实时图像，但要远离websockets，因为使用WebSockets进行图像流式传输它会创建额外的处理层以满足协议细节。而 MJPEG 旨在用于图像流。

这个线程有点旧，你可能已经找到了解决方案。

如果没有，你可以看看Myrtille，一个基于HTML4/5浏览器的远程桌面客户端。 它使用 C#、websockets、canvas 和 base64 编码图像（PNG、JPEG 或 WEBP，具体取决于配置和带宽）。

几年前，HTML5浏览器无法应对大量的websocket流量，所以我尝试设置2个websocket：一个用于上行链路，另一个用于下行链路。它有所帮助，但不是很令人满意。Si 我试图限制 websocket，在发送下一个数据包之前让客户端数据包接收确认。它在某些浏览器上更好，但在其他浏览器上会导致速度变慢。

如今，浏览器不需要这种限制;Myrtille只需在图像出现时将图像推送到浏览器即可。

也就是说，RDP 协议足够智能，可以像大多数视频编解码器一样仅处理和发送两个帧（区域）之间的差异，而不是整个显示器。

只要 UI/DOM 正在更新、更改、更改或与更改视口有关的任何内容，浏览器就会在此期间锁定。

现在你想做的事情几乎是不可能的，我没有说不可能的唯一原因是因为你永远不知道现在;)。

我也是一名 c# 开发人员，我非常关注明年这次将为我们带来的变化。

你还有一年左右的时间...

相关文章：