如何通过 websocket 优化发送绘图？

Posted 2023-02-16

【中文标题】如何通过 websocket 优化发送绘图？

【英文标题】：How can i optimaly send a drawing via websocket?

【发布时间】：2017-06-14 08:25:21

【问题描述】：

我目前正在制作一个在线图画书（一个人画图，其他人必须猜它是什么）。

目前我正在将我的整个图像从抽屉（在画布中）base64 上的“mouseup”DOM 事件发送到服务器，然后我以相同的格式将它发送回猜测者，我的问题是它看起来很漂亮很重，我不知道如何拥有更轻的有效载荷。

$('#canvas').on('mouseup touchend', function() 
    mouse.down = false;

    // My problem is sending canvas.toDataURL() every time
    update_canvas(canvas.toDataURL());
);

// I use this function inside ActionCable so this.perform will send the data to my channel
var update_canvas = function(data_url) 
    this.perform('update_canvas', data_url: data_url);
,

你有更好的方法来发送我的图像数据吗？

【问题讨论】：

您有没有找到更好的方法来做到这一点？其中可能太多了，这里就不一一赘述了。您是否也使用这种方法测量过网络延迟？

【参考方案1】：

您可以发送鼠标位置列表或画布的增量更改，即使用第二个画布仅发送新绘图。

【讨论】：

这是一个好方法。一个基本的实现可以在here

找到

【参考方案2】：

嗯，我认为最好的方法是发送你正在绘制的坐标，我已经实现了类似的东西，你 cn hv 看看 http://connectboard.herokuapp.com/ 在两个或多个不同的浏览器或计算机中打开它并绘制。