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

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

我在想一个小的白板网络应用程序会是提高我的 node.js 和 JavaScript 技能的好方法。我在网上看到了一些,这很有意义,因为它似乎非常适合这种堆栈。

不过,花点时间想想,我想知道客户端和服务器在这种 Web 应用程序中的 Angular 色。跌跌撞撞node-canvas ,我变得更加糊涂了。客户端和服务器具体应该负责什么?

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

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

谢谢!

最佳答案

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

按照我设计应用程序的方式,客户端基本上根据用户输入生成所有笔画。这些依次由 Canvas 抽象处理,它支持我自己定义的操作和参数的子集。如果这一层接受绘画模块产生的任何输入,它们也会通过 socket.io 传送到服务器。

在服务器上,我有相同类型的 Canvas 层包裹 Node Canvas 。因此,这将在内存中复制用户的输入,最终可以将状态图像发送给新客户端。在此之后,笔画将——等待服务器应用程序的参数/上下文验证——发布到其他连接的客户端,这些客户端将重复与上述相同的过程。

关于javascript - node.js 白板应用程序的客户端或服务器端 HTML5 Canvas 渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7251977/

相关文章:

node.js - 记录服务器状态

javascript - 在浏览器中生成图形图表的最佳方法是什么?

javascript - Canvas 上的模糊正方形。该怎么办?

javascript - 尽管文件存在,但获取 'Module not found'

javascript - History.pushState URL + 滚动到效果

javascript - Bootstrap 导航标题高度

javascript - 使用 Angular 的 $q.when() 有理由地解决延迟

node.js - Electron 命令失败: npm prune --production

javascript - 如何区分 JavaScript 中的 click 和 mousedown 事件?

javascript - 无法使用 Typescript 从表中删除一行