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