web-dev-qa-db-ja.com

HTML5 / JSおよびWebsocketでのリアルタイムの共同描画ホワイトボード?

私は一部の上級者向けの小さな(っぽい)サマースクールプロジェクトをまとめようとしています。そしてそれをどのようにベストにし、何を使うべきかを研究しています。

私たちが興味を持っているのは、HTML5がその中にリアルタイムの共同描画ホワイトボードを作成するのに十分かどうかを調査することです-純粋にプラグイン(つまりCSS、HTML5/DOMおよびJavascript)なしのWebテクノロジーを使用して。最終的に私たちが目指しているのはこれです。たとえば、教室の大画面に表示される中央サーバー上のオンラインキャンバス/ページを持っています。その後、学生/ユーザーはスマートフォンを取り出し、ページをモバイルブラウザーにロードし(今のところこれをwebkitモバイルブラウザーに制限しても大丈夫です)、タッチ/フィンガーで(またはマウスでPCに)画面に描画します-これが大きな違いを生むことはないと推測します)、画面と教室の中央の大画面の両方で、すべての人に対してリアルタイムで更新されます。

Push/getリクエストはこれには遅すぎると思います-websocketで解決できますか?誰かがこれに推奨する良いJSライブラリを持っていますか?

また、理想的な(ただし、学生にとっては理解しやすい)アーキテクチャはどのように見えますか。クラスルームに30人の同時ユーザーがいるとしましょう-それぞれがWebSocketを使用してサーバーに接続し、サーバーはすべてのリクエストを1つにプール/結合し、結合されたファイル(ある種の最小JSONまたは単なる座標)を返します)すべての接続ユーザーに対して?

WebSocketと(私は推測している)canvasはこれを取ることができますか?それで、すべてがまだきびきびしているように見えますか?私たちの生活を楽にする(jQueryのような)JSライブラリはありますか?または、2週間のサマースクールプロジェクトには複雑すぎると思いますか?

25
Michael

javascript/html5/canvasを使用してマルチユーザーホワイトボードを作成する方法を説明するチュートリアルを次に示します。

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

この例では、コラボレーションフレームワークと「ユニオンプラットフォーム」という名前のサーバーを使用しています。独自のサーバーフレームワークとクライアントフレームワークをロールすることにした場合でも、この例のメッセージングを使用すると、コードの構造化方法がわかります。

websocketと彗星のリンゴ対リンゴの速度の比較については、以下を参照してください: http://www.unionplatform.com/?page_id=2954

私のテストでは、WebSocket経由の基本的なpingは通常、http経由のpingの約2倍の速度です。 WebSocketとComentはどちらも、共同ホワイトボードを作成するのに十分な速さです。

15
colin moock

間違いなくこれをチェックしてください:

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

8
ghbarratt

ネットワーキングの側面については、サーバーの node.js と、クライアントの socket.io を確認してください。

描画自体に関しては、いくつかの一般的な選択肢は processingraphael および cakejs です。

実装に関しては、ネットワーク化されたゲームが同様の問題にどのように対処するかを調べたいと思うかもしれません( gamedev.stackexchange.com が役に立つかもしれません)。

あなたがやろうとしていることは、この場合の各「プレイヤー」が学生の指先であり、「レベル」がキャンバスである、単純なトップダウンマルチプレイヤーゲームと本質的に同じです。サーバーの位置と、それらが「射撃」(描画)しているかどうかに関してサーバーを更新する必要があります。

5
beeglebug

Push/getリクエストはこれには遅すぎると思います-websocketで解決できますか?誰かがこれに推奨する良いJSライブラリを持っていますか?

リアルタイムインフラストラクチャが必要な場合は、役に立つと思われるリアルタイムテクノロジのリストを作成しました。これらには、 Pusher などのホスト型サービスや、WebSocketやCometソリューションなどの自己インストールテクノロジーが含まれます。

WebSocketはHTML5の一部になり、Webサーバーとブラウザ(または他のクライアント)間のリアルタイムの双方向通信に最も効率的であるため、テクノロジーのアイデア選択のように聞こえます。

また、理想的な(ただし、学生にとっては理解しやすい)アーキテクチャはどのように見えますか。クラスルームに30人の同時ユーザーがいるとしましょう-それぞれがWebSocketを使用してサーバーに接続し、サーバーはすべてのリクエストを1つにプール/結合し、結合されたファイル(ある種の最小JSONまたは単なる座標)を返します)すべての接続ユーザーに対して?

現在の状態をどこかに保存し、アプリケーションの初期ロード時にその状態を表示する必要があるようです。次に、リアルタイムインフラストラクチャを使用して、その状態のデルタを送信します。キャンバス上の描画の場合は、描画された線などの情報と描画者に関する情報のみを送信します。

WebSocketと(私は推測している)canvasはこれを取ることができますか?それで、すべてがまだきびきびしているように見えますか?私たちの生活を楽にする(jQueryのような)JSライブラリはありますか?または、2週間のサマースクールプロジェクトには複雑すぎると思いますか?

リアルタイムのコラボレーティブな描画は最も確実に達成可能であり、これについては多くの例が作成されています。 A google いくつかの可能性を引き出します。

このテクノロジーがまったく新しいものであり、共同アプリケーションの構築に集中したい場合は、独自のインフラストラクチャをインストールおよび構成する方法やコードを作成する方法を学ぶよりも、アプリにサービスを使用することを検討します(私はそのようなサービスのために働いているので、これを言っているだけではありません。私はそれが最も理にかなっていると正直に思います)。

3
leggetter