javascript - 从服务器代码(和状态)更新客户端浏览器中的 Canvas 元素

Question

我对网络编程非常陌生。是否可以从服务器代码更新客户端浏览器中的 Canvas 元素？

如果决定 Canvas 的数据模型在服务器中每秒都在变化，那么客户端的浏览器应该如何反射(reflect)该变化？

连接到服务器的每个客户端都应该看到经常变化的相同 Canvas 。

我正在尝试在 Play with Scala 中执行此操作。

如果不是 Canvas ，替代方案是什么？

谢谢。

Answer 1

您正在寻找的技术是 Websocket。

Websockets 在服务器和客户端之间创建 2 路持久连接。

Websockets 允许服务器向整个连接的客户端组广播消息，这样如果一个玩家做出了一个 Action ，那么该 Action 就会通过服务器传输给该组的所有成员。

根据服务器的类型，您可能会查看这些使 Websocket 更容易上手的框架:

Socket.io + Node.js:http://socket.io/

信号R:http://www.hanselman.com/blog/AsynchronousScalableWebApplicationsWithRealtimePersistentLongrunningConnectionsWithSignalR.aspx

处理 websocket + canvas 的一些技巧:

所有绘图命令都必须完整 - 称为“原子”(beginPath + moveTo + lineTo +描边)，否则本地和远程命令将相互冲突。

但是如果您遵循此规则，那么应用远程绘制就会变得简单而直接:

1. 本地接收包含远程绘图命令的服务器广播。

2. 将该命令保存在队列中(因为本地客户端可能正在绘制过程中并且不得被中断)。

3. 当您确定本地客户端没有绘图时，应用排队的远程绘图命令。

提示:最好的是每个客户所做的所有绘图都使用相同的描边颜色和线宽。否则，由于客户端之间应用绘制的顺序，会导致不同的客户端 Canvas 。