Introduction à PeerJS, la bibliothèque WebRTC

Travailler avec WebRTC peut être difficile. PeerJS est une bibliothèque géniale qui facilite WebRTC

J'ai écrit surWebRTC. Cet article décrit les détails de l'utilisation du protocole pour que 2 navigateurs Web communiquent directement entre eux.

Dans ce didacticiel, j'ai mentionné qu'il existe des bibliothèques qui résument les nombreux détails dont vous devez prendre soin pour permettre la communication WebRTC.

L'une de ces bibliothèques est PeerJS, ce qui rend la communication en temps réel extrêmement simple.

La première chose est que vous devez avoir un backend pour permettre à 2 clients de se synchroniser avant de pouvoir se parler directement.

Dans un dossier, initialisez unnpmprojet utilisantnpm init, installez PeerJS en utilisantnpm install peerjset puis et vous pouvez l'exécuter en utilisantnpx:

npx peerjs --port 9000

(Coursnpx peerjs --helppour voir toutes les options que vous pouvez utiliser).

Ceci est votre backend 🙂

Nous pouvons maintenant créer l'application la plus simple qui fasse tout ce qui est utile. Nous avons un destinataire et un expéditeur.

Nous créons d'abord le récepteur, qui se connecte à notre serveur PeerJS, et écoute les données qui y arrivent. Le premier paramètre ànew Peer()est le nom de notre pair, que nous appelonsreceiverpour que ce soit clair:

Incluez le client PeerJS (changez la version de la bibliothèque avec la dernière disponible):

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

Ensuite, nous initialisons lePeerobjet. Leconnectionl'événement est appelé lorsqu'un autre pair se connecte à nous. Lorsque nous recevons des données, ledatal'événement est appelé avec la charge utile:

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

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

Créons l'autre extrémité de la communication. Nous appellerons çasendercar c'est celui qui va se connecter et envoyer un message au récepteur.

Nous initialisons lePeerobjet, puis nous demandons au pair de se connecter aureceiverpeer, que nous avons enregistré plus tôt. Puis, une fois la connexion établie, leopenl'événement se déclenche et nous pouvons appeler lesend()méthode sur la connexion pour envoyer des données à l'autre extrémité:

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

const conn = peer.connect(‘receiver’)

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

C'est l'exemple le plus élémentaire que vous puissiez faire.

Vous ouvrez d'abord la page du destinataire, puis vous ouvrez la page de l'expéditeur. Le destinataire reçoit le messagedirectementde l'expéditeur, pas d'une ressource centralisée. La partie serveur n'est nécessaire que pour échanger des informations afin que les 2 parties puissent se connecter. Après ça, ça n'interfère plus.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: