一个基于node.js的白板应用，是应该使用客户端还是服务器端HTML5画布渲染？

Question

7

我考虑创建一个小型的白板Web应用，以提高我的node.js和JavaScript技能水平。在网上看到了几个这样的应用程序，这似乎非常适合这种堆栈。

但是，仅是思考一下，我就对客户端和服务器在这种Web应用程序中的角色感到困惑。在偶然发现node-canvas之后，我更加疑惑了。具体来说，客户端和服务器应该分别负责什么？

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

非常感谢您提供实现方面的指导和理论方面的建议。

谢谢！

- Qcom

这里有一个应用程序，完全按照您的要求实现：https://github.com/katspaugh/whiteboard。在服务器上使用node-canvas提供快照以进行同步。 - katspaugh

3个回答

2

我为一家公司工作，他们使用了node.js（但没有使用node-canvas）和socket.io实现了一个白板应用程序。不幸的是，由于该应用程序尚未发布，我无法提供代码或网站。

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

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

- jtsao22

如果你想随时给我写些代码，哈哈，我会在这里等着的。 - Qcom

1

这是一个用JavaScript/HTML5编写的多用户白板教程，所有源代码都可用： http://www.unionplatform.com/?page_id=2762 虽然它不是在服务器端使用Node，但如果您想将其适应于Node后端，则客户端代码仍然很有用。

- colin moock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- einaros · Accepted Answer

我编写了一个应用程序 http://draw.2x.io，它使用 node-canvas（之前是我自己编写的 node-cairo）以及 socket.io。

我的应用程序设计方式是，客户端从用户输入生成所有笔画。然后，这些笔画通过一个我自己定义的支持一些操作和参数的画布抽象层进行处理。如果此层接受绘画模块产生的任何输入，则它们还将通过 socket.io 发送到服务器。

在服务器上，我也有相同类型的画布层封装了 node-canvas。因此，它将在内存中复制来自用户的输入，最终使得将状态图像发送给新客户端成为可能。随后，笔画将 - 在服务器应用程序进行参数/上下文验证之后 - 发布给其他连接的客户端，这些客户端将重复以上相同的过程。