javascript - WebSocket 开销和手动缓冲数据包

Question

前言:我知道这可能是不成熟的优化。请在回答时忽略它。

我正在开发一种使用 WebSocket 的白板类型程序，一次只有一个人可以绘图，房间中的其他人都可以观看绘图的发生。

目前有很多数据包仅包含 x 和 y 坐标，每秒发送大约 40 次，具体取决于它们绘制的速度。

首先，我想知道 WebSockets 会产生什么样的开销。我环顾四周，但找不到一个明确的答案。我想知道从服务器发送到客户端的每个坐标数据包有多少开销？有些地方说只有几个字节，但其他来源说由于 TCP/IP header 信息大约有 80 个字节。

其次，将所有这些坐标数据包排队然后每隔几秒左右发送一次是个好主意吗？客户端总是会落后几秒钟，但每次他们收到一个 block 时，他们都会均匀地间隔并播放它们，因此看起来很流畅。

或者也许有其他方法可以自动缓冲像这样的数据包，或者可能由于任何其他原因没有必要(开销不像我想象的那样)？

编辑:后续问题:因此，如果我确实对消息进行排队，那么在发送消息之前将它们设置为多少大小(大约字节)比较合适？我认为，如果它们变得太大，我可能会遇到相反的问题，并且协议(protocol)必须手动拆分它们。

Answer 1

白板和“徒手/铅笔/画笔”如果只是发送x，y数据，我可能会鼓励发送x，y，时间时间是为了代替突然绘制线条，而是逐渐绘制。如果您打算排队 x,y,time，您可以访问 www.npmjs.com 并查找“diff”库

还有一些“diff”来处理图像格式之间的差异。仅发送时间点 a 和时间点 b 之间的差异。拨号用户 = 连接速度慢并且每 2 到 120 秒获取一次更新。而宽带连接每 1 到 10 秒就会更新一次，等待延迟/延迟。宽带+高滞后/延迟=卫星用户。其他国家的人们(跨越大洋)=高滞后。

如果纯粹跟随鼠标光标、鼠标左/右键单击，并发送他们单击的菜单按钮的某种 ID。然后在 Canvas 区域中快速拖动光标。拨号用户可能很快就会落后。建议同时排队(当前正在绘画的人)、服务器排队和观看的人需要排队。

发送出去的数据 1,2,3,4,5,6,7,8,9 可能会收到 1,3,5,4,2,6,7,9,8 的数据得到处理并获得数据，但不按预期顺序。如果仅捕获鼠标的 x,y 数据，则会导致涂鸦与平滑的线条。

想想游戏和延迟。你正在前进，突然“橡皮筋”到了以前的位置。排队并处理“回滚”时间机器，并开始重新绘制上一次的白板。将有助于处理涂鸦。

在互联网上观看视频并暂停视频。并在播放电影之前等待缓冲区/队列加载到某个点。

tcp/ip = 防止丢失数据，由于开销较少，流可以允许更多信息，但是流可能并且将会丢失数据。

白板上的每一个小像素对于您的预期用户群来说有多重要。说数学课，并画一些不同的符号和数字。或通过鼠标和铅笔/徒手图标快速书写。按钮有多复杂，例如“油漆 jar /画笔”又名喷枪，当您移动鼠标时会随机抛出点。或者当您放大时，逐像素处理(实际上看到每个像素的框状轮廓)

您可能会寻找一些“帮助台”应用程序，如果您将控制权交给其他人，他们可以接管您的鼠标/键盘并查看您所看到的内容。 “ session ”应用程序，很可能也内置了 que 等。

您是否要设置一个“设置”并应用于正在观看的每个人，或者为每个观看者提供单独的设置？以便适应那里的连接。如果针对每个人，您是否要拥有服务器，有谁在绘图的主要队列，然后针对每个人计算最适合每个观察者的内容？或者是 CPU 受限，例如智能手机、PDA 等...

........................

为您的应用找出一些额外的用例场景。并从那里开始构建，即使没有优化，一旦到达那里，就开始优化它。这可能意味着重新制作应用程序的很大一部分。