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

时间:2011-08-31 02:36:00

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

我在想一个小的白板网络应用程序将是一个很好的方法来提高我的node.js和JavaScript技能。我在网上看过一些,这很有意义,因为它似乎是这种堆栈的理想选择。

但是,花一点时间思考,我想知道客户端和服务器在这种Web应用程序中的角色。在node-canvas上磕磕绊绊,我变得更加困惑。具体而言,客户和服务器应该负责什么?

如果服务器能够呈现到画布,它是否应接受并验证来自客户端的输入,然后通过socket.io将其广播给所有其他连接的用户?这样,服务器就会保留一个 master -canvas元素。一旦新用户连接,服务器就必须将其画布推出客户端 - 使其与所绘制的内容保持同步。

对实施的任何指导 - 特定的或哲学的 - 表示赞赏。

谢谢!

3 个答案:

答案 0 :(得分:3)

我写了http://draw.2x.io,它使用了node-canvas(我之前自己写的node-cairo)和socket.io。

我设计应用程序的方式,客户端基本上从用户输入生成所有笔划。它们又由画布抽象处理,它支持我自己定义的操作和参数的子集。如果此图层接受绘制模块生成的任何输入,则它们也会通过socket.io发送到服务器。

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

答案 1 :(得分:1)

我工作的公司使用node.js(但未使用node-canvas)和socket.io实现了白板应用程序。不幸的是,我没有给你代码甚至网站,因为它尚未发布。

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

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

答案 2 :(得分:1)

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

它不是服务器端的节点,但是如果你想让它适应节点后端,那么客户端代码应该仍然有用。