Webフロントエンド
PeerJSでWebRTCを使いこなす：シンプルなP2PWebゲームの作成
WebRTCは、Webブラウザー間のリアルタイム通信を可能にするテクノロジーです。これは比較的新しく、API定義はまだドラフトと見なされています。 WebRTCが すべての主要なWebブラウザでサポートされているわけではありません まだ、（そしてそうするものの中で、それらのいくつかは すべての機能をサポートしているわけではありません このテクノロジーの）、これにより、ミッションクリティカルなアプリケーションにWebRTCを使用することが比較的困難になります。またはそう思うでしょう！
2011年5月にGoogleによって最初に導入されて以来、WebRTCは多くの最新のWebアプリケーションで使用されてきました。多くの最新のWebブラウザーのコア機能であるため、Webアプリケーションはこのテクノロジーをシームレスに利用して、さまざまな方法でユーザーエクスペリエンスを向上させることができます。肥大化したブラウザプラグインを必要とせず、ピアツーピア（P2P）ネットワークを利用できる（一部のサーバーを介してすべてのデータを送信するわけではない）ビデオストリーミングまたは会議アプリケーションは、すべての驚くべきことの一部にすぎません。 WebRTCで実現できます。
設計の原則をリストします。
この記事では、WebRTCを使用してWebRTCを作成する方法を見ていきます。 ConnectFourのシンプルなP2Pウェブゲーム 。 WebRTCのさまざまなラフエッジと実装の違いを回避するために、驚くべきJavaScriptライブラリを使用します。 PeerJS 。
WebRTCを介したデータ
始める前に、WebRTCはオーディオおよびビデオストリームの送信だけではないことを理解することが重要です。また、P2Pのサポートも提供します データチャネル 。これらのチャネルには、信頼できるものと信頼できないものの2つのバリエーションがあります。ご想像のとおり、信頼できるデータチャネルはメッセージが配信され、順番に配信されることを保証しますが、信頼性の低いチャネルはそのような保証を提供しません。
さらに、WebRTCデータチャネルは、一般的なWebRTCピア接続に必要なもの（ピア間の接続を調整するためのシグナリングサーバー、ピアのパブリックIDを把握するためのSTUNサーバー、およびオプションでTURNサーバー）以外に、特別なインフラストラクチャのセットアップを必要としません。ピア間の直接接続を確立できない場合（たとえば、両方のピアがNATの背後にある場合）、ピア間でメッセージをルーティングします。場合 これらの頭字語 WebRTCが可能な限り既存のテクノロジーを再利用しているためです。
これにより、マルチプレイヤーゲーム、コンテンツ配信、ファイル共有など、WebRTCのより多くのユースケースへの扉が開かれます。繰り返しになりますが、すべて仲介サーバーを必要とせず、したがって待ち時間が短くなります。
単純なWebゲームでは、2つのWebブラウザー間のデータチャネルを使用して、プレーヤーの前後の動きを伝達します。
PeerJSに会う
PeerJSは、ブラウザーにWebRTCを実装し、シンプルで一貫性のある、 エレガントなAPI その周りに。それ さまざまな穴を塞ぐ 以前のブラウザのWebRTC実装で。たとえば、Chrome 30以前では、信頼性の低いデータチャネルしか利用できませんでした。 PeerJSは、信頼できるデータチャネルを使用するように構成されている場合、これらの古いブラウザーにはシムを使用します。これは、信頼できるチャネルのネイティブ実装ほどパフォーマンスは高くありませんが、それでも機能します。
PeerJSを使用すると、ピアの識別がさらに簡単になります。すべてのピアは、IDのみを使用して識別されます。ピアが自分で選択できる文字列、またはサーバーに生成させる文字列。 WebRTCはピアツーピア通信を約束しますが、接続ブローカーとして機能し、シグナリングを処理するには、とにかくサーバーが必要です。 PeerJSは、この接続ブローカーサーバーのオープンソース実装を提供します PeerJSサーバー （Node.jsで書かれています）、それらを使用したくない場合 クラウドでホストされているバージョン （これは現在無料で、いくつかの制限があります）。
Four GoesP2Pを接続する
WebRTC、つまりPeerJSを操作するための自信の源ができたので、簡単なNode.js / Expressアプリケーションを作成することから始めましょう。
不十分なデータベース設計の問題
npm init npm install express --save npm install jade --save npm install peer --save これは、PeerJSサーバーをホストし、ページとフロントエンドアセットを提供するためにのみ使用します。 1ページだけを提供する必要があり、これには2つのセクションが含まれます。プレーンなメインメニューと、7行6列のConnectFourグリッドです。
PeerJSサーバー
独自のPeerJSサーバーをホストするのは本当に簡単です。ザ・ GitHubの公式リポジトリ PeerJSサーバーのインスタンスをHerokuにデプロイするためのワンクリックボタンもあります。
私たちの場合、次のインスタンスを作成したいだけです ExpressPeerServer Node.jsアプリケーションで、「/ peerjs」で提供します。
var express = require('express') var app = express() // … Configure Express, and register necessary route handlers srv = app.listen(process.env.PORT) app.use('/peerjs', require('peer').ExpressPeerServer(srv, { debug: true })) PeerJSクライアント
PeerJSサーバーが稼働している状態で、クライアント側に移動します。前に説明したように、PeerJSは一意のIDを持つピアを識別します。これらのIDは、PeerServerによってすべてのピアに対して自動的に生成されるか、インスタンス化中にすべてのピアに対して1つ選択できます。 ピア オブジェクト。
var peer = new Peer(id, options) ここに、 id サーバーに生成させたい場合は、完全に省略できます。私たちの場合、それが私たちがやりたいことです。 PeerServerは、提供するIDが一意であることを確認します。 2番目の引数、 オプション 、は通常、を含むオブジェクトです キー （クラウドでホストされているPeerServerを使用している場合はAPIキー、または ホスト 、 ポート 、 道 、PeerServerを自分でホストしている場合など）。
var peer = new Peer( (location.protocol === 'https:' ? 443 : 80), path: '/peerjs' ) 2つのPeerJSピア間の接続を確立するには、一方のピアがもう一方のピアのIDを知っている必要があります。物事を簡単にするために、Connect Four over WebRTCの実装では、ゲームを開始するプレーヤーに、ピアIDを対戦相手と共有するように要求します。宛先ピアIDがわかっている場合は、 peer.connect（destId） 必要なのはこれだけです。
var conn = peer.connect(destId) 両方 ピア オブジェクトと データの接続 によって返されるオブジェクト peer.connect（destId） 聞く価値のあるいくつかの本当に便利なイベントを発行します。このチュートリアルでは、の「データ」イベントに特に関心があります。 データの接続 オブジェクトと両方のオブジェクトの「エラー」イベント。
接続のもう一方の端にデータを送信するには、単に呼び出します conn.send（data） ：
conn.send('hello') ここでのニーズには少しやり過ぎですが、PeerJSは、BinaryPack形式でエンコードした後、ピア間でデータを送信します。これにより、ピアは文字列、数値、配列、オブジェクト、さらにはblobを通信できます。
着信データを受信するには、で「データ」イベントをリッスンするだけです。 conn ：
conn.on(‘data’, function(data) { // data === 'hello' }) そして、それは私たちが必要とするほとんどすべてです！
ゲームロジック
ゲームを開始した最初のプレーヤーには、PeerJSによって生成されたピアIDが表示され、対戦相手と共有できます。対戦相手が最初のプレーヤーのピアIDを使用してゲームに参加すると、最初のプレーヤーは移動を許可されます。
シンプルなルールとメカニズムのゲームであるコネクトフォーには、1種類の動きしかありません。各プレーヤーは、順番に、列を選択してディスクをその中にドロップする必要があります。これは、ピアが通信する必要があるのは、現在のプレーヤーがディスクをドロップインすることを選択した列番号だけであることを意味します。この情報を、文字列「move」と番号-0-の2つの要素を持つ配列として送信します。左からの列のベースのインデックス。
プレーヤーが列をクリックするたびに：
if(!turn) { // it is not the current player’s turn return } var i // i = chosen column index if(grid[i].length == 6) { // the column doesn’t have any more space available return } // track player’s move locally grid[i].push(peerId) // end current player’s turn turn = false conn.send(['move', i]) この移動データを対戦相手に送信した後、ゲームの状態をローカルで更新します。これには、現在のプレーヤーが勝ったかどうか、またはゲームが引き分けで終了したかどうかの判断が含まれます。
vr vs ar vs mr
この移動データの受信側：
if(turn) { // ignore incoming move data when it is the current player's turn return } var i = data[1] if(grid[i].length == 6) { // ignore incoming move data when it is invalid return } // track opponent’s move locally grid[i].push(opponent.peerId) // activate current player’s turn turn = true そして当然、この後、ゲームの状態をローカルで更新し、対戦相手が勝ったかどうか、またはゲームが引き分けで終了したかどうかを判断します。
受信データに対して健全性チェックを実行する必要があることに注意してください。 WebRTCベースのゲームでは、移動データを検証する中間サーバーとサーバーベースのゲームロジックがないため、これは重要です。
スニペットを単純にするために、UIを更新するコード行は省略されています。クライアント側のJavaScriptの完全なソースコードを見つけることができます ここに 。
すべてを接続する
すべてを組み合わせるために、2つのセクションを持つ単純なページを作成します。ページの読み込み時に、メインメニューを含むセクションが表示され、ゲームグリッドを含むセクションは非表示のままになります。
フォントは、タイプサイズ、タイプスタイル、および
section#menu div.animated.bounceIn div h1 Connect Four br div.no-support(style='display: none;') div.alert.alert-warning p Unfortunately, your web browser does not support WebRTC div a.btn.btn-primary.btn-lg(href='#start') Start | a.btn.btn-default.btn-lg(href='#join') Join section#game(style='display: none;') div div h1 Connect Four br table.table.grid tbody for i in [0, 1, 2, 3, 4, 5] tr for j in [0, 1, 2, 3, 4, 5, 6] td div.slot br div.alert.alert-info p これらのDOM要素をきれいに見せることは、このチュートリアルの範囲を超えています。したがって、私たちは信頼できる仲間に頼ります ブートストラップ それに軽いスタイリングをします。
最初のプレーヤーが[スタート]ボタンをクリックすると、ゲームグリッドがプレーヤーのピアIDとともに表示されます。その後、プレーヤーはこのピアIDを対戦相手と共有できます。
2番目のプレーヤーは、[参加]ボタンをクリックしてからクリックし、最初のプレーヤーのピアIDを入力して、ゲームを開始できます。
試してみる
このサンプルアプリケーションは、次のURLで試すことができます。 https://arteegee.herokuapp.com 。
なぜギリシャはそんなに多くの借金を抱えているのですか
または、GitHubからリポジトリのクローンを作成し、NPMの依存関係をインストールして、ローカルで試すことができます。
git clone https://github.com/hjr265/arteegee.git cd arteegee npm install PORT=5000 npm start サーバーが実行されたら、Webブラウザで http：// localhost：5000 、1つのタブからゲームを開始し、ピアIDを使用して別のタブ（または別のWebRTC対応Webブラウザー）から参加します。
このサンプルアプリケーションでは、PeerJSクライアントが詳細ログを実行するように構成されているため、Webブラウザのコンソールを開いてデバッグ情報を確認できます。
しかし、それは私にはうまくいきません！
このゲームがコンピュータで動作しない主な理由は2つあります。
必要なWebRTCAPIをまだサポートしていないWebブラウザを使用している可能性があります。その場合は、別のブラウザー（WebRTCとデータチャネルをサポートするブラウザー）を試してみることをお勧めします。
WebRTCをサポートする最新のWebブラウザーを使用している場合は、WebRTCが侵入できないネットワークインフラストラクチャの背後にいる可能性があります。理想的には、この問題はTURNサーバーで簡単に対処できますが、サンプルアプリケーションはサーバーを使用していないため、あなたと対戦相手の両方が遅れている場合は機能しません。 NAT 。
結論
WebRTCは新しいテクノロジーであり、その実装はまだ成熟していません。これらはしばしばいくつかを引き起こします ユニークな課題 ために 開発者 。ただし、大まかな生のAPIをきちんと抽象化するPeerJSのようなライブラリが利用できるようになったことで、このテクノロジーはすでにかなりアクセスしやすくなっています。
PeerJSベースのゲームを構築するためのこの簡単なチュートリアルが、WebRTCの使用を開始し、驚くべきリアルタイムのピアツーピアWebアプリケーションを構築するのに役立つことを願っています。
