Введение в PeerJS, библиотеку WebRTC

Работать с WebRTC может быть сложно. PeerJS - отличная библиотека, которая упрощает WebRTC

Я писал оWebRTC. В этом посте были описаны детали работы с протоколом, чтобы два веб-браузера напрямую взаимодействовали друг с другом.

В этом руководстве я упомянул, что существуют библиотеки, которые абстрагируют многие детали, которые вам нужно позаботиться, чтобы обеспечить связь через WebRTC.

Одна из таких библиотек - PeerJS, которая делает общение в реальном времени чрезвычайно простым.

Во-первых, вам необходимо иметь серверную часть, чтобы позволить двум клиентам синхронизироваться, прежде чем они смогут напрямую общаться друг с другом.

В папке инициализируйтеnpmпроект с использованиемnpm init, установите PeerJS, используяnpm install peerjsа затем вы можете запустить его, используяnpx:

npx peerjs --port 9000

(пробегnpx peerjs --helpчтобы увидеть все варианты, которые вы можете использовать).

Это ваш бэкэнд 🙂

Теперь мы можем создать простейшее приложение, которое делает что-нибудь полезное. У нас есть один получатель и один отправитель.

Сначала мы создаем приемник, который подключается к нашему серверу 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объект, затем мы просим партнера подключиться кreceiverpeer, который мы зарегистрировали ранее. Затем, как только соединение установлено,openсобытие срабатывает, и мы можем вызватьsend()метод соединения для отправки данных на другой конец:

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

const conn = peer.connect(‘receiver’)

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

Это самый простой пример, который вы можете привести.

Сначала вы открываете страницу получателя, затем страницу отправителя. Получатель получает сообщениенапрямуюот отправителя, а не с централизованного ресурса. Серверная часть нужна только для обмена информацией, чтобы две части могли соединяться. После этого больше не мешает.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: