javascript - ブラウザ間 (ピア ツー ピア) 接続を確立するにはどうすればよいですか?

Question

クライアント側でHTML5、CSS、およびJavaScriptを使用して、ページが読み込まれるとクライアント ブラウザ間の直接の tcp/ip 接続を可能にする Web サイトを作成するにはどうすればよいですか。

サイトでは、ユーザーの1人からの入力を他のユーザーにできるだけ早く送信する必要があるため、クライアントAからサーバーにデータを送信してからクライアントBにデータを送信するのは良くないため、待ち時間を短縮するためにこれを行う必要がありますオプション。

この件に関する以前の投稿を読みましたが、実用的な解決策や例を見つけることができませんでした。私が読んだところによると、クライアント間の直接接続は、Silverlight、Java、Flash などのプラグインを使用して作成できます。

プラグインを必要としないソリューションはありますか? JavaScript のみを使用したいと考えています。

Answer 1

Stackoverflow では、ブラウザーでの P2P 接続に関するトピックがいくつかあります。

1. HTML5 を使用すると、Web アプリでピアツーピアの HTTP 接続を確立できますか?
2. ブラウザで P2P を行うには、どのような手法が利用できますか?
3. HTML5 はピアツーピアをサポートしていますか (WebSocket だけでなく)
4. HTML5 Websockets は、サーバー (P2P) を使用せずに 2 つのクライアント (ブラウザー) を直接接続できますか
5. Web ブラウザーでピアツーピア接続を作成することは可能ですか?
6. Websocket は p2p (ブラウザからブラウザへ) 通信を許可しますか?
7. HTML 5 ピアツーピア ビデオの可能性?
8. WebRTC はまだブラウザーに実装されていますか?

ほとんどのトピックで言及されているように、2008 年の HTML5 ワーキング ドラフトには両方とも「ピアツーピア接続」というセクションがありました。

• http://www.w3.org/TR/2008/WD-html5-20080122/#peer-to-peer
• http://www.w3.org/TR/2008/WD-html5-20080610/comms.html#ピアツーピア

2009 年 2 月 12 日の W3C ワーキング ドラフト以降、「ピアツーピア接続」のセクションは削除されました。しかし、この P2P 接続はなくなったわけではありません。WebRTC (リアルタイム通信) 仕様内で PeerConnection という名前で戻ってきました。

• http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection (W3C 編集者のドラフト)
• http://www.whatwg.org/specs/web-apps/current-work/webrtc.html#peerconnection ( 2011 年 12 月 5 日以降、W3C Editor's Draft に転送)

2011 年 10 月 31 日以降、W3C Editor's Draft は公式のワーキング ドラフトです。

• http://www.w3.org/TR/2011/WD-webrtc-20111027/#peerconnection

PeerConnection (UDP ベース) の唯一の実装は、Ericsson labs (2011 年 5 月) によって変更された WebKit に存在し、非常にうまく機能しています。現在、いくつかのパッチが WebKit に含まれています (2011 年 10 月 -- 以下の更新を参照してください)。

• https://labs.ericsson.com/apis/web-real-time-communication/
• https://labs.ericsson.com/developer-community/blog/update-webkit-contributions

さらに、WebRTC イニシアチブは、Google、Mozilla、および Opera によるプロジェクトです。したがって、彼らは PeerConnection の仕様を継続しています。

• http://www.webrtc.org/

おそらく Chrome (WebKit を使用) は、PeerConnection で WebRTC をサポートする最初の主要なブラウザーになるでしょう。

• http://www.webrtc.org/blog/firststeptowardchromeintegration
• http://groups.google.com/a/chromium.org/group/chromium-dev/browse_thread/thread/95bf1e2e1de852fc
• https://lists.webkit.org/pipermail/webkit-dev/2011-November/018445.html

2012 年 1 月 18 日以降、Chrome は WebRTC もサポートしています。で有効にすることにより、Dev チャネル (Windows、OSX、Linux) および Canary ビルド (Windows および OSX)で使用できchrome://flagsます。MediaStreamビデオとオーディオのみをサポートし、いくつかのデモでテストできます。String/ /...のようなアプリケーション データの転送ArrayBufferは、今のところサポートされていません。

2012 年 3 月 16 日以降、WebRTC エディターのドラフトでは、汎用アプリケーション データ ( 、および)を送受信するための「ピアツーピア データ API」が分離されています。Chromium は Data API をすぐに実装したいと考えています(2012 年 4 月 10 日)。StringArrayBufferBlob

4 月 3 日、Mozillaは Firefox 用の WebRTCに関する最初の実用例も公開しました。

DataChannel は Chrome のバージョン 25 でフラグを立てて計画されていますが、Firefox Nightly/Aurora (2012 年 12 月 12 日) でテストできます。

• http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS

2018: DataChannels はまだ実験段階ですが、現在のバージョンの Chrome と Firefox で利用できます。

• https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel

Answer 2

私はあなたを失望させなければなりません - これは現在、JavaScript だけでは不可能です。Websockets (および Socket.IO) は、クライアントとサーバー間のソケットのような接続を許可しますが、クライアント間の接続は許可しません。オプションはプラグインです - Flash、Silverlight、Java、またはカスタムメイドです。

できることは、socket.io を使用して、単純なプロキシ サーバーを作成することでそれをエミュレートすることです。

Answer 3

現在、ほとんどのユーザーが NAT またはファイアウォールの背後にいるという事実に注意を向けたいと思います。これは、ユーザーのコンピューターへの着信接続を簡単に確立できないことを意味します。したがって、あなたのアイデアは（可能であれば）一部のケースでしか機能せず、ソリューションがさらに複雑になります。そのため、おそらく永続的な接続 (websockets または socket.io を使用) を備えたクライアント サーバー システムがより適切なオプションです。