从服务器代码(和状态)更新客户机浏览器中的画布元素

Update a canvas element in a client's browser from server code (and state)

本文关键字：布元素 元素 浏览器 更新 代码 服务器 状态 客户机      更新时间：2023-09-26

我对web编程很陌生。是否有可能从服务器代码更新客户端浏览器中的画布元素?

如果决定画布的数据模型在服务器中每秒都在变化，客户机的浏览器应该如何反映这种变化?

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

我正在尝试在Play with Scala中这样做。

如果不是canvas，会有什么替代方案?

谢谢。

您正在寻找的技术是websockets。

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

Websockets允许服务器将消息广播到整个连接的客户端组，以便如果一个玩家移动，那么该移动将通过服务器传输到组的所有成员。

根据你的服务器类型，你可以看看这些框架，使websockets更容易入门:

插座。IO + node.js: http://socket.io/

SignalR: http://www.hanselman.com/blog/AsynchronousScalableWebApplicationsWithRealtimePersistentLongrunningConnectionsWithSignalR.aspx

处理websockets + canvas的一些技巧:

所有的绘图命令必须是完整的——被称为"原子"(beginPath + moveTo + lineTo + stroke)，否则本地和远程命令会相互混淆。

但是如果你遵循这条规则，那么应用远程绘制是简单而直接的:

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

  2. 将该命令保存在队列中(因为本地客户端可能正处于抽签过程中，不能被打断)。

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

提示:最好的是每个客户端都使用相同的笔画颜色和线宽。否则会导致不同的客户画布，因为在客户之间应用绘制的顺序不同。

相关文章：