客户端或服务器端的HTML5 canvas渲染一个node.js白板应用程序？ [英] Client or server-side HTML5 canvas rendering for a node.js whiteboard application?

问题描述

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

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.

但是，花一点时间想，关于客户端和服务器在这种Web应用程序中的角色。绊倒在节点画布上，我变得更加困惑。具体来说，客户端和服务器应该负责什么？

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?

如果服务器能够渲染到画布，应该接受并验证客户端的输入，然后通过 socket.io 将其广播给所有其他连接的用户？这样，服务器保持一个主 -canvas元素。一旦新用户连接，服务器只需要推出它的画布客户端 - 使其达到与绘制的任何速度。

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.

谢谢！

推荐答案

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

I wrote http://draw.2x.io, which uses node-canvas (previously node-cairo, which I wrote myself) along with socket.io.

我设计我的应用程序的方式，客户端本质上是从用户输入创建所有的stroke。这些反过来由画布抽象处理，它支持我自己定义的操作和参数的子集。如果这个层接受绘图模块产生的任何输入，它们也通过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.

这篇关于客户端或服务器端的HTML5 canvas渲染一个node.js白板应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！