HTMLでブラウザ間（ピアツーピア）接続を確立する方法をわかりやすく解説

Webアプリケーション開発において、サーバーを介さずにブラウザ同士で直接データをやり取りできる「ピアツーピア（P2P）接続」は、チャットやファイル共有、リアルタイム通信などに非常に便利な仕組みです。ここでは、オープンソースライブラリ「PeerJS」を使って、HTMLとJavaScriptだけでブラウザ間接続を確立する具体的な手順を紹介します。

ブラウザ間接続を確立するまでの流れ

大まかな流れは次の3ステップです。

1. PeerJSライブラリをページに読み込む
2. 自分自身のピア（Peer）インスタンスを作成する
3. 相手のピアIDを指定して接続し、データを送受信する

ステップ1：PeerJSライブラリを読み込む

まず、CDNから提供されているPeerJSのスクリプトを、HTML内に記述して読み込みます。

<script src="https://cdn.peerjs.com/0.3/peer.js"></script>

この一行を追加するだけで、ピアツーピア通信に必要な機能がすべて使えるようになります。

ステップ2：ピアを作成する

次に、new Peer() を呼び出して自分のピアを作成します。このとき、任意の一意なIDを指定できます。従来のバージョンでは、PeerJSが提供するクラウドサービスを利用するために無料のAPIキーの取得が必要でした。

var peer = new Peer('pick-an-id', {key: 'myapikey'});

第一引数には他のピアから識別されるための一意なIDを、第二引数のオプションには取得したAPIキーを指定します。

補足： 現在配布されている新しいバージョンのPeerJS（1.x系）では、無料のパブリッククラウドサーバーがデフォルトで利用でき、APIキーの指定は不要になっています。その場合は new Peer('pick-an-id') のようにシンプルに記述できます。古いバージョンを使う場合のみAPIキーが必要ですので、利用するバージョンに合わせて実装してください。

ステップ3：相手のピアに接続する

ピアの作成が完了したら、peer.connect() メソッドに相手のピアIDを渡して接続を開始します。接続が確立すると 'open' イベントが発生するので、そのタイミングでデータを送信できます。

var conn = peer.connect('another-peers-id');
conn.on('open', function(){
    conn.send('Welcome!');
});

このコードでは、IDが「another-peers-id」である相手のブラウザに接続し、接続完了後すぐに「Welcome!」というメッセージを送信しています。受信側では conn.on('data', ...) イベントを監視することで、届いたメッセージを受け取れます。

まとめ

PeerJSを利用すれば、複雑なWebSocketサーバーやWebRTCの低レベルな実装を意識することなく、数行のコードでブラウザ間のピアツーピア接続を実現できます。ライブラリの読み込み → ピア作成 → 接続、というシンプルな流れを押さえておけば、チャットアプリやリアルタイム連携ツールの開発もスムーズに進められるでしょう。