Я писал о WebRTC. В этом посте описывались детали работы с протоколом, позволяющим двум веб-браузерам напрямую взаимодействовать друг с другом.
В этом уроке я упомянул, что существуют библиотеки, которые абстрагируют множество деталей, о которых вы должны позаботиться, чтобы обеспечить связь WebRTC.
Одна из таких библиотек – Peers, которая делает общение в реальном времени чрезвычайно простым.
Во-первых, вам необходимо иметь серверную часть, позволяющую синхронизировать 2 клиента, прежде чем они смогут напрямую общаться друг с другом.
В папке инициализируйте проект npm с помощью инициализации npm , установите PeerJS с помощью npm install peerjs а затем и вы можете запустить его с помощью npx :
npx peerjs --port 9000
((запустите npx peers --справка , чтобы увидеть все опции, которые вы можете использовать).
Это ваш бэкэнд 🙂
Теперь мы можем создать самое простое приложение, которое делает что-нибудь полезное. У нас есть один получатель и один отправитель.
Сначала мы создаем приемник, который подключается к нашему серверу PeerJS и прослушивает поступающие на него данные. Первым параметром нового однорангового узла() является имя нашего однорангового узла, которое мы называем получатель , чтобы было понятно:
Включите клиент PeerJS (измените версию библиотеки на последнюю доступную).:
Затем мы инициализируем объект Одноранговый . Событие подключение вызывается, когда к нам подключается другой одноранговый узел. Когда мы получаем некоторые данные, вызывается событие data с полезной нагрузкой:
const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })
peer.on('connection', (conn) => {
conn.on('data', (data) => {
console.log(data);
})
})Давайте создадим другой конец связи. Мы будем называть это отправитель , потому что именно он будет подключаться и отправлять сообщение получателю.
Мы инициализируем объект Одноранговый , затем просим одноранговый узел подключиться к одноранговому узлу приемник , который мы зарегистрировали ранее. Затем, как только соединение установлено, срабатывает событие open , и мы можем вызвать метод send() для подключения, чтобы отправить данные на другой конец:
const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })
const conn = peer.connect('receiver')
conn.on('open', () => {
conn.send('hi!')
})Это самый простой пример, который вы можете привести.
Сначала вы открываете страницу получателя, затем открываете страницу отправителя. Получатель получает сообщение напрямую от отправителя, а не от централизованного ресурса. Серверная часть необходима только для обмена информацией, чтобы 2 части могли подключиться. После этого он больше не вмешивается.
Оригинал: “https://flaviocopes.com/peerjs/”