Node.js 白板应用程序的客户端或服务器端 HTML5 画布渲染？
我认为一个小白板 Web 应用程序将是提高我的 Node.js 和 JavaScript 技能的好方法。我在网上看到了一些，这是有道理的，因为它似乎非常适合这种堆栈。
然而，花点时间思考一下，我想知道客户端和服务器在这种 Web 应用程序中的角色。偶然发现 node-canvas，我变得更加困惑。具体来说，客户端和服务器应该负责什么？
如果服务器能够渲染到画布，它是否应该接受并验证来自客户端的输入，然后通过 socket.io？这样，服务器就保留了某种master-canvas 元素。一旦新用户连接，服务器只需将其画布推出给客户端 - 使其跟上所绘制的内容。
任何关于实施的指导——具体的或哲学的——都值得赞赏。
谢谢！
I was thinking a little whiteboard web app would be a nice way to improve my node.js and JavaScript skills. I've seen a few on the web, which makes sense as it seems ideal for this kind of stack.
Just taking a moment to think, however, I was wondering about the roles of both client and server in this kind of web application. Stumbling upon node-canvas, I became even more confused. What, specifically, should the client and server be responsible for?
If the server is capable of rendering to a canvas, should it accept and validate input from the clients and then broadcast it to all other connected users via socket.io? This way, the server keeps a master-canvas element of sorts. Once a new user connects, the server just has to push out its canvas that client - bringing it up to pace with whatever has been drawn.
Any guidance on implementation - specific or philosophical - is appreciated.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我写了http://draw.2x.io，它使用node-canvas（以前是node-cairo，我我自己写的）以及socket.io。
按照我设计应用程序的方式，客户端基本上根据用户输入生成所有笔画。这些依次由画布抽象处理，画布抽象支持我自己定义的操作和参数的子集。如果该层接受绘画模块产生的任何输入，它们也会通过 socket.io 发送到服务器。
在服务器上，我有相同类型的画布层包装节点画布。因此，这将在内存中复制用户的输入，最终使将状态图像发送到新客户端成为可能。在此之后，笔划将——服务器应用程序等待的参数/上下文验证——发布到其他连接的客户端，这将重复与上面相同的过程。
I wrote http://draw.2x.io, which uses node-canvas (previously node-cairo, which I wrote myself) along with socket.io.
The way I've designed my application, the client essentially does all the stroke generation from user input. These are in turn processed by a canvas abstraction, which supports a subset of operations and parameters which I've defined myself. If this layer accepts whatever input the painting modules produce, they are also shipped, via socket.io, to the server.
On the server I've got the same kind of canvas layer wrapping node-canvas. This will thus replicate the input from the user in memory there, eventually making it possible to send a state image to new clients. Following this, the strokes will -- pending parameter / context validation by the server application -- be published to other connected clients, which will repeat the same procedure as above.
我工作的一家公司使用node.js（但没有使用node-canvas）和socket.io 实现了一个白板应用程序。不幸的是，我不能给你代码，甚至不能给你一个网站，因为它还没有发布。
您的实现看起来非常相似。每当通过 socket.io 将白板绘制到（带（x，y）坐标的 JSON 数据）时，客户端就会连接到我们的服务器并更新服务器。然后，服务器更新其余客户端并保留所有 (x,y) 坐标的副本，以便新加入的客户端可以看到已经绘制的内容。
祝您的应用程序好运。我最近经常使用 Node.js 进行编程，我真的很喜欢它。
A company I work for implemented a whiteboard app with node.js (but did not use node-canvas) and socket.io. Unfortunately, I cannot give you code or even a website since it has not been released.
Your implementation seems very similar. Clients connect to our server and update the server whenever the whiteboard is drawn to (JSON data w/(x,y) coordinates) through socket.io. The server then updates the rest of the clients and keeps a copy of all the (x,y) coordinates so that new clients who join can see what has already been drawn.
Good luck with your app. I've been programming with node.js a lot lately and boy do I love it.
这是一个用 javascript/html5 编写的多用户白板教程，所有源代码均可用：
http://www.unionplatform.com/?page_id=2762
它不是服务器上的节点- 端，但如果您想将其适应节点后端，客户端代码应该仍然有用。
here's a multiuser whiteboard tutorial written in javascript/html5, all source available:
http://www.unionplatform.com/?page_id=2762
it's not node on the server-side, but the client-side code should still be useful if you want to adapt it to a node backend.