В этой статье я расскажу о создании чат-клиента WebRTC с использованием React. В этой статье используется схема взаимодействия, описанная в этом блоге, и взаимодействие с сигнальным сервером, описанное в этом блоге.
Постановка задачи
- Приложение WebRTC Chat с использованием React,
- Используя сигнальный сервер, как описано в этом блоге,
Решение высокого уровня
Решение высокого уровня состоит в том, чтобы реализовать сигнальный поток, как описано в этом блоге. Ниже приведен рисунок еще раз для вашего удобства:
Как мы видим, для этого WebRTC Chat Client мы должны реализовать несколько пунктов:
- Открытие соединения через веб-сокет и первоначальный вход в систему,
- Обработать сообщение, полученное через веб-сокет,
- Обработать сообщение ICE.
Запуск веб-сокета и первоначальный вход
Начнем с открытия соединения через веб-сокет. После этого обработайте событие onOpen, чтобы отправить начальное сообщение о входе в систему.
Обработка сообщения, полученного через веб-сокет
У нас есть несколько типов сообщений, полученных через наш веб-клиент:
- Новый участник, когда мы получаем это сообщение, нам нужно отправить сообщение с предложением через сервер веб-сокетов,
- UserID, когда мы получаем это сообщение, нам нужно отправить сообщение «NewMember» на сервер веб-сокета,
- Сообщение ICE, когда мы получаем это сообщение, нам нужно добавить его в качестве кандидата ICE в одноранговое соединение с другим пользователем,
- Ответьте, когда мы получим это сообщение, нам нужно установить удаленное описание для нашего однорангового соединения с другим пользователем,
- Предложение, когда мы получим это сообщение, нам нужно отправить сообщение «Ответ» через сервер веб-сокетов. Нам также нужно добавить соединение в наше локальное описание нашего однорангового соединения с другим пользователем,
Обработать сообщение ICE
Сообщение ICE Candidate отправляется сервером STUN/TURN, чтобы помочь нам пройти через NAT. Каждый раз, когда мы получаем это сообщение от сервера STUN/TURN, нам нужно снова отправить его на сервер websocket/signaling. Оттуда сигнальный сервер перенаправит его другим сторонам, чтобы другие стороны могли узнать наш адрес и то, как установить с нами p2p-соединение.
Полный код
Полный код WebRTC Chat React можно найти на этом github. Пожалуйста, не забудьте поставить звездочку на этот репозиторий github. Вы также можете попробовать работающий сайт в здесь. Пожалуйста, также ознакомьтесь с другой ссылкой в разделе ссылок, чтобы получить полное представление обо всем решении. Пожалуйста, оставьте комментарий, если у вас есть дополнительные вопросы или запросы.
Ссылки
