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

Client or server-side HTML5 canvas rendering for a node.js whiteboard application?

本文关键字：服务器端 HTML5 布渲染客户端 node js 白板应用程序用于更新时间：2023-09-26

我在想一个小的白板web应用程序将是一个很好的方式来提高我的node.js和JavaScript技能。我在网上看到了一些，这是有道理的，因为它似乎是这种堆栈的理想选择。

只是花了一点时间思考，然而，我想知道客户端和服务器在这种web应用程序中的角色。偶然发现了node-canvas，我变得更加困惑。具体来说，客户机和服务器应该负责什么?

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

任何关于实现的指导-具体的或哲学的-都是值得赞赏的。

谢谢!

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

我设计我的应用程序的方式，客户端基本上从用户输入生成所有的笔画。这些依次由画布抽象处理，画布抽象支持我自己定义的操作和参数的子集。如果这个层接受绘画模块产生的任何输入，它们也会通过套接字发送。

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

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

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

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

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

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