javascript - HTML5/JS 和 websockets 中的实时协作绘图白板?

标签 javascript html canvas webkit websocket

我正在尝试为我的一些高年级学生组织一个小型(大概)暑期学校项目,并且正在研究如何做到最好以及使用什么 - 希望这里有人能为我指明正确的方向。

我们感兴趣的是研究 HTML5 是否已经发展到足以在其中创建实时协作绘图白板 - 完全使用没有插件的网络技术(如 CSS、HTML5/DOM 和 Javascript)。我们最终要争取的是这个 - 例如在教室的大屏幕上显示中央服务器上的在线 Canvas /页面。然后我们的学生/用户会拿出他们的智能手机,在他们的移动浏览器中加载页面(我现在完全可以将其限制在 webkit 移动浏览器上)并用触摸/手指在他们的屏幕上绘制(或用鼠标在 PC 上绘制) - 猜测这并没有太大区别)并且它会为每个人实时更新 - 无论是在他们的屏幕上还是在教室的中央大屏幕上。

我猜推送/获取请求对于这个来说太慢了 - 它可以通过 websockets 解决吗?有人为此推荐任何好的 JS 库吗?

还有理想的(但更容易让学生理解)架构是什么样的。假设你在一个教室里同时有 30 个用户——他们每个人都会通过 websockets 连接到服务器,服务器会将他们的所有请求汇集/合并为一个,然后返回合并后的文件(某种最小的 JSON,甚至只是坐标) 对于每个连接的用户?

websockets 和(我猜)canvas 能接受这个吗?这样一切看起来仍然很活泼?是否有(类似 jQuery 的)JS 库可以让我们的生活更轻松 - 或者您是否认为它对于为期 2 周的暑期学校项目来说太复杂了?

最佳答案

这里有一个教程,描述了如何使用 javascript/html5/canvas 创建多用户白板:

http://www.unionplatform.com/?page_id=2762

该示例使用名为“union platform”的协作框架和服务器。即使您决定推出自己的服务器和客户端框架,示例中的消息传递也应该让您了解如何构建代码。

对于 websocket 与 comet 的同类速度比较,请参阅: http://www.unionplatform.com/?page_id=2954

在我的测试中,通过 WebSocket 的基本 ping 通常比通过 http 的 ping 快两倍。 websocket 和 comment 的速度足以创建协作白板。

关于javascript - HTML5/JS 和 websockets 中的实时协作绘图白板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6845682/

相关文章:

javascript - Angular ngClass 评估

javascript - AngularJs : what is the best way to changing DOM elements when there are "global"?

html - 可以删除 HTML 文件中的以下行吗?

javascript - 在打开侧抽屉窗口跳到 html css 中的高度零

java - ScrollView 中的大 Canvas /位图或滚动时重绘 Canvas ?什么方法更快,也避免了 java.lang.OutOfMemoryError

javascript - 透明图像始终位于 Canvas 之上。在透明图像后面绘制

javascript - 为什么 ES6 Fiddle 不覆盖命名参数?

javascript - Carousel slick.js + bootstrap 列宽问题

css - 基本 HTML : place images in one row with same distance from each other

javascript - 从命令行将第三方网站的 HTML Canvas 捕获为图像