HTML5 / JS和websockets中的實時協作繪圖白板？

Question

我正在努力為我的一些高級學生組建一個小型（ish）暑期學校項目，並正在研究如何做到最好和使用什么 - 希望這里有人可以指出我正確的方向。

我們感興趣的是研究HTML5是否足以在其中創建實時協作繪圖白板 - 純粹通過使用沒有插件的Web技術（所以CSS，HTML5 / DOM和Javascript）。 我們最終要努力的是 - 例如，在教室的大屏幕上顯示中央服務器上的在線畫布/頁面。 然后我們的學生/用戶將拿出他們的智能手機，在他們的移動瀏覽器中加載頁面（我現在完全可以將其限制為webkit移動瀏覽器）並在他們的屏幕上用觸摸/手指（或在帶有鼠標的PC上） - 猜測這並沒有太大的區別）並且它會在每個人的實時更新 - 無論是在他們的屏幕上還是在教室的中央大屏幕上。

我猜測推送/獲取請求對此來說太慢了 - 它可以通過websockets解決嗎？ 有沒有人有任何好的JS庫可供推薦？

此外，理想（但學生更容易理解）架構的外觀如何。 假設你在一個clasroom中有30個並發用戶 - 每個用戶都會將websockets連接到服務器，服務器將所有請求匯集/組合成一個，然后返回組合文件（某種最小的JSON甚至只是坐標） ）為每個連接的用戶？

websockets和（我猜測）畫布能夠采取這個嗎？ 所以一切看起來都很活潑？ 是否有類似jQuery的JS庫可以讓我們的生活變得更輕松 - 或者你認為它對於為期2周的暑期學校項目來說太復雜了嗎？

Answer 1

這是一個教程，描述如何使用javascript / html5 / canvas創建多用戶白板：

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

該示例使用名為“union platform”的協作框架和服務器。 即使您決定推出自己的服務器和客戶端框架，示例中的消息也應該讓您了解如何構建代碼。

對於websocket與彗星的蘋果對蘋果速度比較，請參閱： http ： //www.unionplatform.com/？ page_id = 2954

在我的測試中，對WebSocket的基本ping通常比ping over http快兩倍。 websocket和coment都足夠快，可以創建一個協作白板。

Answer 2

絕對檢查一下：

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

Answer 3

對於網絡方面的事情，嘗試查看服務器的node.js以及客戶端的socket.io 。

至於繪圖本身，一些流行的選擇是加工 ， raphael和cakejs 。

在實現方面，您可能希望了解網絡游戲如何處理類似問題（ gamedev.stackexchange.com可能很有用）。

你要做的事情就像一個簡單的自上而下的多人游戲一樣，每個'玩家'在這種情況下都是學生指尖，而'水平'是畫布。 您需要更新服務器的位置以及它們是否“拍攝”（繪圖）。

Answer 4

我猜測推送/獲取請求對此來說太慢了 - 它可以通過websockets解決嗎？ 有沒有人有任何好的JS庫可供推薦？

如果您需要實時基礎架構，我已經創建了一個可能對您有用的實時技術列表。 這些包括托管服務，例如我工作的Pusher ，以及WebSocket和Comet解決方案等自安裝技術。

WebSocket聽起來像是您的技術選擇，因為它們已成為HTML5的一部分，並為Web服務器和瀏覽器（或其他客戶端）之間的實時雙向通信提供最有效的方式。

此外，理想（但學生更容易理解）架構的外觀如何。 假設你在一個clasroom中有30個並發用戶 - 每個用戶都會將websockets連接到服務器，服務器將所有請求匯集/組合成一個，然后返回組合文件（某種最小的JSON甚至只是坐標） ）為每個連接的用戶？

聽起來你應該將當前狀態存儲在應用程序顯示狀態的初始狀態。 然后使用您的實時基礎設施在該狀態上發送增量，或者如果它是畫布上的繪圖，則只繪制已繪制的線等信息以及有關繪制它的人的信息。

websockets和（我猜測）畫布能夠采取這個嗎？ 所以一切看起來都很活潑？ 是否有類似jQuery的JS庫可以讓我們的生活變得更輕松 - 或者你認為它對於為期2周的暑期學校項目來說太復雜了嗎？

實時協作繪圖絕對是可以實現的，並且已經創建了許多這樣的示例。 谷歌提出了一些可能性。

如果這項技術對您來說是全新的，並且您更願意專注於構建協作應用程序，那么我會考慮為您的應用程序使用服務，而不是經歷學習如何安裝和配置甚至編碼您自己的基礎架構的麻煩（我不只是這樣說，因為我為這樣的服務工作。老實說，我認為這是最有意義的）。