传输:原生 websocket 。 60fps 的波形图: 自己找插件,伪造些数据,测试插件是否能 60fps 。 或者 canvas, 不可能 60fps 都画不出来吧。 至于 vue,这跟 vue 没关系吧。 1700 万字节等于大约 16.25 兆字节( MB )。(吐槽 能不能用 kb 或者 mb 作为单位) 服务器带宽也是个问题,可以将数据作为 json 文件,服务器内网上传 oss 。 发送 oss 路径给前端即可。
vue 、react 只是来处理 dom 的,你要的渲染和处理这些框架一点都帮不上忙,你应该去了解 canvas 、skia-wasm 这种数据渲染器。而且如此大量的数据根本不可能通过推流推到客户端网页,再在网页端处理。处理思路应该是在服务器端收集数据,解码成简单的波形数据,然后通过 sse 、websocket 实时推送到前端,再在前端展示。
少年,1080p 的屏幕,6 张波形图。我们假设一行 3 张,每张波形图一共占据 1920/3 = 640 个像素。 我们假设一个像素上面能显示一根线,那么 640 个像素你能显示 640 个频率的强度,再多了你显示器都没有那么多像素点。那么 640 个频率,每个频率我们假设 32 位采样,也就是 4 个字节。一张图在一个瞬间需要的数据量等于 640 x 4 = 2560 字节。6 张图也就是 2560 * 6 = 15360 字节,也就是 16K 左右。 那么 6 张波形图的一帧,可以被显示器分辨率所显示的信息量只有 16K 。如果算 60 帧,那就是 900K 。 你给的 1700 万字节,约等于 16M 。 所以哪怕不谈绘图,你这里有效的数据量本来就应该不到每秒 1M 。记得把传输效率先优化一下。