node.js 白板应用程序的客户端或服务器端 HTML5 画布渲染？答案

【问题标题】：Client or server-side HTML5 canvas rendering for a node.js whiteboard application?node.js 白板应用程序的客户端或服务器端 HTML5 画布渲染？
【发布时间】：2011-11-07 07:04:51
【问题描述】：

我在想一个小白板网络应用程序将是提高我的 node.js 和 JavaScript 技能的好方法。我在网上看到过一些，这是有道理的，因为它似乎非常适合这种堆栈。

不过，我想了想，想知道客户端和服务器在这种 Web 应用程序中的角色。偶然发现node-canvas，我变得更加困惑。具体来说，客户端和服务器应该负责什么？

如果服务器能够渲染到画布，它是否应该接受并验证来自客户端的输入，然后通过socket.io 将其广播给所有其他连接的用户？这样，服务器就保留了一个 master-canvas 元素。一旦有新用户连接，服务器只需将其画布推出该客户端 - 使其与已绘制的任何内容保持同步。

任何关于实施的指导——具体的或哲学的——都值得赞赏。

谢谢！

【问题讨论】：

这是一个完全按照您的描述实现的应用程序：github.com/katspaugh/whiteboard。服务器上的节点画布提供同步快照。

标签： javascript node.js canvas socket.io html5-canvas

【解决方案1】：

这是一个用 javascript/html5 编写的多用户白板教程，所有资源都可用： http://www.unionplatform.com/?page_id=2762

它不是服务器端的节点，但如果您想将其调整到节点后端，客户端代码应该仍然有用。

【讨论】：

【解决方案2】：

我写了http://draw.2x.io，它使用了node-canvas（以前是我自己写的node-cairo）和socket.io。

按照我设计应用程序的方式，客户端基本上根据用户输入生成所有笔画。这些又由画布抽象处理，它支持我自己定义的操作和参数的子集。如果这一层接受绘画模块产生的任何输入，它们也会通过 socket.io 传送到服务器。

在服务器上，我有相同类型的画布层包裹节点画布。因此，这将在内存中复制来自用户的输入，最终可以将状态图像发送到新客户端。在此之后，笔划将 - 服务器应用程序的待定参数/上下文验证 - 被发布到其他连接的客户端，这将重复与上述相同的过程。

【讨论】：

你没有我可以看的样本，是吗？国家形象到底是什么意思？谢谢。
状态图像是从客户端传递到服务器的所有先前绘制操作的结果。在用户连接时向用户呈现某些内容的替代方法是保留位图或发送一组初始笔画。保留位图必然呈现最完整的画面。

【解决方案3】：

我工作的一家公司使用 node.js（但没有使用 node-canvas）和 socket.io 实现了一个白板应用程序。不幸的是，我不能给你代码甚至网站，因为它还没有发布。

您的实现似乎非常相似。每当通过 socket.io 将白板绘制到（JSON 数据 w/(x,y) 坐标）时，客户端就会连接到我们的服务器并更新服务器。然后服务器更新其余客户端并保留所有 (x,y) 坐标的副本，以便加入的新客户端可以看到已经绘制的内容。

祝你的应用好运。我最近一直在用 node.js 编程，我喜欢它。

【讨论】：

如果你想在我身上放一些代码，我会在这里哈哈。