Добавьте текстовый чат в видеозвонок, построенный на React и Daily-JS

Когда Павел Построил пользовательское приложение для видеочата Используя React и библиотеку Daily-JS, он использовал Объект ежедневного вызова Анкет

Объект Daily Call похож на прямую линию в Daily API. Это дает нам лучший контроль над видеозвонком, позволяя нам получить доступ к его основаниям с самым низким уровнем, например, видео и аудио-треками участников. С этим отличным доступом приходит отличная гибкость! Но это также означает, что функции, такие как текстовый чат, должны быть добавлены с нуля.

Этот пост проводит вас через это!

Что мы построим

Мы добавляем к демонстрационному приложению Paul React. Когда пользователь нажимает, чтобы запустить звонок, приложение передает URL -адрес ежедневного номера в новый объект ежедневного вызова, а затем присоединяется к вызову. Объект вызова отслеживает важную информацию о встрече, как и другие участники (включая их аудио и видеоледиры) и то, что они делают на вызове (например, приглушение их микрофона или ухода), и предоставляет методы взаимодействия с собранием.

Мы будем использовать Sendappmessage Метод и соответствующий “App-Message” Событие, чтобы добавить текстовый чат в приложение.

Что вам нужно, чтобы построить его

• Ежедневная учетная запись: Зарегистрируйтесь на учетной записи Если у вас его еще нет.
• Клонирован Daily-Demos/Call-Object-React Репозиторий GitHub: самый быстрый способ следовать этим учебному пособию и получить демонстрационное приложение и запустить, – это клонировать это Репо Анкет
• Знакомство с React: В этом посте мы пропускаем много кода, который не связан с ежедневным, так что может стоить отчитываться на React и/или крючках [0].

С этим мы готовы начать!

Добавить функциональность текстового чата

Наш это форма, которая делает несколько вещей с участником , это означает их сообщение в чате. Во -первых, через react useState Hook и наш Handlechange Функция, он отслеживает их вход в состояние компонента inputValue Анкет

const [inputValue, setInputValue] = useState('');

const handleChange = (event) => {
   setInputValue(event.target.value);
 };

Когда участник отправляет сообщение, они звонят Handlesubmit , который транслирует сообщение, хранится в inputValue другим участникам по вызову, используя Daily’s Sendappmessage метод

callObject.sendAppMessage({ message: inputValue }, '*');

Handlesubmit Также обновляет отправителя Chathistory штат.

const name = callObject.participants().local.user_name
     ? callObject.participants().local.user_name
     : 'Guest';
   setChatHistory([
     ...chatHistory,
     {
       sender: name,
       message: inputValue,
     },
   ]);
   setInputValue('');

В операторе возврата, Карты над каждым значением в Chathistory Чтобы отобразить сообщения.

{chatHistory.map((entry, index) => (
       

         {entry.sender}: {entry.message}
       
 ))}

Это охватывает отправку сообщений. Теперь мы готовы справиться с тем, чтобы приложение уведомляло получателей и отображает их сообщения.

Предупредить участников о новых сообщениях

После ежедневного Sendappmessage Пожары, это запускает ежедневное событие “приложение-Message”. Наш HandleAppMessage Слушатель событий реагирует на каждое «приложение». ” Обработчик получает имя отправителя из объекта Daily Call и обновляет истории чата получателей, используя Setchathistory.

const participants = callObject.participants();
     const name = participants[event.fromId].user_name
       ? participants[event.fromId].user_name
       : 'Guest';
     setChatHistory([
       ...chatHistory,
       {
         sender: name,
         message: event.data.message,
       },
     ]);

После обновления состояния функция вызывает props.notification () Снят из родительского компонента Tray.js, чтобы выделить значок чата получателя.

Мы добавили, что значок чата в Tray.js, где мы передаем государственные логические функции и функции контроллера в качестве реквизита в чат.

const [displayChat, setChatDisplay] = useState(false);
const [highlightedChat, setChatHighlight] = useState(false);

function toggleChat() {
   setChatDisplay(!displayChat);
   if (highlightedChat) {
     setChatHighlight(!highlightedChat);
   }
 }

function handleNewChat() {
   setChatHighlight(!highlightedChat);
 }

// Relevant component snippets 

     

Хотите поболтать больше?

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

На данный момент экспериментируйте с Наш репозиторий и, пожалуйста, пришлите отзывы о нашем пути в любое время в help@daily.co .

[0] Если вы хотите познакомиться с React и вернуться позже, ознакомьтесь с множеством отличных ресурсов на Dev (например, вступление в Али Спиттель ) или React Docs для Подробнее о крючках Анкет

Оригинал: “https://dev.to/trydaily/add-text-chat-to-a-video-call-built-on-react-and-daily-js-18p0”