Javascript HTML5/JS 和 websockets 中的实时协作绘图白板？

Real-time collaborative drawing whiteboard in HTML5/JS and websockets?

提问by Michael

I'm trying to put together a small(ish) summer school project for some of my advanced students and am researching how to do it best and what to use - hopefully somebody here could point me in the right direction.

我正在尝试为我的一些高级学生组织一个小型（ish）暑期学校项目，并且正在研究如何做到最好以及使用什么 - 希望这里有人可以指出我正确的方向。

What we are interested in is researching if HTML5 came far enough to create a real-time collaborative drawing whiteboard in it - purely by using web technologies without plugins (so CSS, HTML5/DOM and Javascript). What we'd ultimatelly strive for is this - for example have an online canvas/page on a central server displayed on a big screen in the classroom. Then our students/users would take out their smartphones, load the page in their mobile browsers (I'm perfectly ok with limiting this to webkit mobile browsers for now) and draw on their screens with touch/fingers (or on PCs with the mouse - guessing this doesn't make a lot of difference) and it would get updated in real time for everybody - both on their screens and on the central big screen in the classroom.

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

I'm guessing push/get requests would be too slow for this - could it be solved by websockets? Does anybody have any good JS libraries to recommend for this?

我猜推/获取请求会太慢 - 它可以通过 websockets 解决吗？有没有人为此推荐任何好的 JS 库？

Also what would the ideal (but easier for students to understand) architecture look like. Lets say you have 30 simultaneous users in a clasroom - each of them would connect with websockets to the server and the server would pool/combine all of their requests into one and then return the combined file (some sort of minimal JSON or even just coordinates) for every connected user?

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

Would websockets and (I'm guessing) canvas be able to take this? So that everything still looks snappy? Are there (jQuery-like) JS libraries available to make our lives easier - or do you think its something thats too complex for a 2-week summer school project?

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

采纳答案by colin moock

here's a tutorial describing how to create a multiuser whiteboard with javascript/html5/canvas:

这是描述如何使用 javascript/html5/canvas 创建多用户白板的教程：

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

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

the example uses a collaboration framework and server named "union platform". even if you decide to roll your own server and client framework, the messaging in the example should give you an idea of how to structure the code.

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

for an apples-to-apples speed comparison of websocket vs comet, see: http://www.unionplatform.com/?page_id=2954

有关 websocket 与 Comet 的 Apple-to-Apples 速度比较，请参阅：http: //www.unionplatform.com/?page_id=2954

in my tests, a basic ping over WebSocket is normally about twice as fast as the ping over http. both websocket and coment are more than fast enough to create a collaborative whiteboard.

在我的测试中，通过 WebSocket 的基本 ping 通常大约是通过 http 的 ping 的两倍。websocket 和comment 都足够快来创建一个协作白板。

回答by ghbarratt

Definitely check this out:

一定要检查一下：

http://wesbos.com/html5-canvas-websockets-nodejs/

http://wesbos.com/html5-canvas-websockets-nodejs/

回答by beeglebug

For the networking side of things, try looking at node.jsfor the server, along with socket.iofor the client.

对于网络方面的事情，请尝试查看服务器的node.js，以及客户端的socket.io。

As for the drawing itself, a few popular choices are processing, raphaeland cakejs.

至于绘图本身，一些流行的选择是processing、raphael和cakejs。

When it comes to the implementation, you may want to look at how networked games deal with similar issues (gamedev.stackexchange.comcould be useful).

在实施方面，您可能想了解网络游戏如何处理类似问题（gamedev.stackexchange.com可能有用）。

What you are going to be doing is essentialy the same as a simple top down multiplayer game, with each 'player' in this case being a students fingertip, and the 'level' being the canvas. You need to update the server as to their position and whether or not they are 'shooting' (drawing).

您将要做的基本上与简单的自上而下的多人游戏相同，在这种情况下，每个“玩家”都是学生的指尖，而“关卡”则是画布。您需要更新服务器以了解他们的位置以及他们是否正在“射击”（绘图）。

回答by leggetter

I'm guessing push/get requests would be too slow for this - could it be solved by websockets? Does anybody have any good JS libraries to recommend for this?

我猜推/获取请求会太慢 - 它可以通过 websockets 解决吗？有没有人为此推荐任何好的 JS 库？

If you need real-time infrastructure I've created a list of real-time technologies which might be of use to you. These include hosted service, such as Pusherwho I work for, and self-install technologies such as WebSocket and Comet solutions.

如果您需要实时基础设施，我已经创建了一份可能对您有用的实时技术列表。其中包括托管服务，例如我为之工作的Pusher，以及自安装技术，例如 WebSocket 和 Comet 解决方案。

WebSocket sounds like the idea choice of technology for you since they have become part of HTML5 and offer the most efficient for of realtime bi-directional communication between a web server and a browser (or other clients).

WebSocket 听起来像是您的理想技术选择，因为它们已成为 HTML5 的一部分，并为 Web 服务器和浏览器（或其他客户端）之间的实时双向通信提供最有效的方式。

Also what would the ideal (but easier for students to understand) architecture look like. Lets say you have 30 simultaneous users in a clasroom - each of them would connect with websockets to the server and the server would pool/combine all of their requests into one and then return the combined file (some sort of minimal JSON or even just coordinates) for every connected user?

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

It sounds like you should probably store the current state somewhere and on the initial load of the application display that state. Then use your real-time infrastructure to send deltas on that state, or if it's a drawing on canvas, just information on the line etc. that has been drawn and information about who drew it.

听起来您应该将当前状态存储在某处，并在应用程序的初始加载时显示该状态。然后使用您的实时基础设施发送关于该状态的增量，或者如果它是画布上的绘图，则只是关于已绘制的线条等的信息以及有关谁绘制它的信息。

Would websockets and (I'm guessing) canvas be able to take this? So that everything still looks snappy? Are there (jQuery-like) JS libraries available to make our lives easier - or do you think its something thats too complex for a 2-week summer school project?

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

Real-time collaborative drawing is most definitely achievable and there have been a number of examples created of this. A googlebring up a number of possibilities.

实时协作绘图绝对是可以实现的，并且已经创建了许多示例。一个谷歌带来了多种可能性。

If this technology is completely new to you and you would prefer to concentrate on building the collaborative application then I would consider using a service for your app rather than going through the hassle of learning how to install and configure, or even code, your own infrastructure (I'm not just saying this because I work for such a service. I honestly think it makes the most sense).

如果这项技术对您来说是全新的，并且您更愿意专注于构建协作应用程序，那么我会考虑为您的应用程序使用服务，而不是学习如何安装和配置，甚至编写自己的基础架构的麻烦（我这么说不仅仅是因为我为这样的服务工作。老实说，我认为这是最有意义的）。