WebRTCライブラリであるPeerJSの紹介

WebRTCの操作は難しい場合があります。 PeerJSは、WebRTCを簡単にする素晴らしいライブラリです

私はについて書いたWebRTC。その投稿では、プロトコルを使用して2つのWebブラウザーを相互に直接通信させる方法の詳細について説明しました。

そのチュートリアルで、WebRTC通信を可能にするために注意しなければならない多くの詳細を抽象化するライブラリがあることを述べました。

それらのライブラリの1つはPeerJSであり、これによりリアルタイム通信が非常に簡単になります。

まず、2つのクライアントが相互に直接通信できるようになる前に、2つのクライアントが同期できるようにするためのバックエンドが必要です。

フォルダで、を初期化しますnpmを使用したプロジェクトnpm init、を使用してPeerJSをインストールしますnpm install peerjsそして、あなたはそれを使用して実行することができますnpx

npx peerjs --port 9000

(実行npx peerjs --help使用できるすべてのオプションを表示します)。

これはあなたのバックエンドです🙂

これで、便利なことをすべて実行する最も単純なアプリケーションを作成できます。 1つの受信者と1つの送信者があります。

まず、PeerJSサーバーに接続し、受信するデータをリッスンするレシーバーを作成します。最初のパラメータnew Peer()私たちが呼ぶピア名ですreceiver明確にするために:

PeerJSクライアントを含めます(ライブラリのバージョンを利用可能な最新のものに変更します)。

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>

次に、を初期化しますPeerオブジェクト。ザ・connectionイベントは、別のピアが接続したときに呼び出されます。いくつかのデータを受け取ると、dataイベントはペイロードで呼び出されます:

const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })

peer.on(‘connection’, (conn) => { conn.on(‘data’, (data) => { console.log(data); }) })

コミュニケーションのもう一方の端を作りましょう。これを呼びますsender接続して受信者にメッセージを送信するのはそれだからです。

初期化しますPeerオブジェクトの場合、ピアに接続するように依頼しますreceiver以前に登録したピア。次に、接続が確立されると、openイベントが発生し、send()もう一方の端にデータを送信するための接続のメソッド:

const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })

const conn = peer.connect(‘receiver’)

conn.on(‘open’, () => { conn.send(‘hi!’) })

それはあなたが作ることができる最も基本的な例です。

最初に受信者ページを開き、次に送信者ページを開きます。受信者はメッセージを受け取ります直接一元化されたリソースからではなく、送信者から。サーバー部分は、2つの部分が接続できるように、情報を交換するためにのみ必要です。その後、それはもう干渉していません。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: