Автор оригинала: Idorenyin Obong.

Этот пост был впервые опубликован на Chetchat’s Страница Учебника Отказ

Приложения эфемерных сообщений, многие из которых эффективно функционируют как «исчезающие приложения обмена сообщениями», находятся на подъеме и нет, я не только ссылаюсь на Millennials на Snapchat!

Рост саморазрушительных приложений обмена сообщениями, такие как Snapchat, Wickr, и множество других позволяют пользователям отправлять сообщения, которые автоматически удаляются в течение определенного времени после получения сообщения. Поскольку сообщения удаляются так скоро после чтения, личные разговоры чувствуют себя более частными и подлинными разговорами.

В этом руководстве вы узнаете, как построить приложение EPHEMERAL REVECT CHOT. В приложении, когда вы отправляете сообщение, он длится до тех пор, пока получатель не увидел его. Как только получатель читает его, есть окно пяти-секунды, прежде чем сообщение будет удалено. Это удаление происходит на устройстве приемника, устройство отправителя и системные серверы, обеспечивающие полную конфиденциальность. Вы достигнете этого, используя React, Comethat и Bootstrap.

Вы можете найти весь код для этого проекта на Это репо Отказ Вот гиф того, что вы построете:

Создание приложения Cometchat

Прежде чем идти вперед, вам нужно приложение Cometchat. Во-первых, убедитесь, что у вас есть активный счет Comethat, но если вы этого не сделаете, создайте один здесь Отказ

Далее иди к вашему Приборная панель И создайте новое приложение под названием ** React-ePhemeral-Chat. ** После создания нового приложения вы найдете идентификатор приложения, прикрепленного рядом с именем вашего приложения. Если вы откроете приложение и перейдите к API Ключ Вкладка, вы увидите ключ с FullAccess сфера. Скопируйте его, а также идентификатор приложения. Тебе понадобится в ближайшее время.

Леса проекта реагирования

Вы будете использовать Create-React-App Пакет для леса новый проект реагирования. Откройте окно терминала, перейдите в каталог, в котором вы обычно сохраняете свои проекты и запустите эту команду:

npx create-react-app ephemeral-messaging-react

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

Установка зависимостей

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

• @ Comethat-Pro/Chat : Этот пакет позволит нам использовать Comethat JavaScript SDK для отправки и получения сообщений в реальном времени.
• React-Router-DOM : Поскольку это приложение для одной страницы, нам нужен этот пакет для маршрутизации на стороне клиента.

Чтобы установить вышеуказанные зависимости, перейдите в каталог проекта и запустите эту команду:

# install dependencies using npm
npm install @cometchat-pro/chat react-router-dom

В этом руководстве вы будете использовать Bootstrap для укладки. Нам нужно включить ссылку на CDN В вашем SRC/Public/index.html , под тег:

Инициализация Cometchat Pro SDK

Теперь, когда вы установили ваши зависимости, продолжайте и откройте свой проект в любой IDE по вашему выбору. Когда ваш проект открыт, создайте файл под названием .env В корне папки Project и добавьте этот код к нему:

REACT_APP_API_KEY=YOUR_COMETCHAT_API_KEY
REACT_APP_APP_ID=YOUR_COMETCHAT_APP_ID

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

После замены ваших клавиш откройте index.js Файл, расположенный в SRC Папка и заменить его следующим фрагментом:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { CometChat } from '@cometchat-pro/chat';

CometChat.init(process.env.REACT_APP_APP_ID)
  .then(() => {
    console.log('Initialized CometChat');
  })
  .catch(() => {
    console.log('Failed to Initialize CometChat');
  });

ReactDOM.render(, document.getElementById('root'));

Это гарантирует, что Comethat инициализируется в вашем приложении.

Настройка общих функций утилиты

Здесь вы создадите файл, который хранит утилиту, которые не привязаны к пользовательскому интерфейсу. В SRC каталог, создать Utils каталог, а затем создать Comethat.js файл внутри него. После создания файла добавьте следующий код:

import { CometChat } from '@cometchat-pro/chat'
export function getToken(key) {
  const authToken = JSON.parse(localStorage.getItem(key))
  return authToken
}
export function setToken(key, value) {
  localStorage.setItem(key, JSON.stringify(value))
}
export function clearToken(key) {
  localStorage.removeItem(key)
}
export async function loginUser(uid) {
  return await CometChat.login(uid, process.env.REACT_APP_API_KEY)
}
export async function loginUserWithToken(authToken) {
  return await CometChat.login(authToken)
}

export async function sendTextMessage(messageText) {
  const textMessage = new CometChat.TextMessage(
    'supergroup',
    messageText,
    CometChat.MESSAGE_TYPE.TEXT,
    CometChat.RECEIVER_TYPE.GROUP
  )
  return await CometChat.sendMessage(textMessage)
}
export async function fetchMessages() {
  const messagesRequest = await new CometChat.MessagesRequestBuilder()
    .setGUID('supergroup')
    .setLimit(100)
    .build()
  return messagesRequest.fetchPrevious()
}
export async function logoutUser() {
  return await CometChat.logout()
}

Здесь вы создали легкую обертку, чтобы помочь вам быстро добиться некоторых задач. Вот поломка того, что делают различные функции:

• Геттокен – Эта функция извлекает токен пользователя от локального хранилища.
• Сетжун – Эта функция сохраняет токен пользователя в локальное хранилище.
• Логин – Эта функция журнали пользователем с введенным UID Отказ
• LoginUserwithtoken – Эта функция журнали пользователем с токеном.
• SendTextMessage – Эта функция отправляет сообщение в группу – Supergroup Отказ Эта группа по умолчанию по умолчанию с каждым приложением Comethat вы создаете.
• fetchmessages – Эта функция выбирает предыдущие сообщения. Вы можете установить предел для количества сообщений, которые будут получать с помощью Setlimit Функция MessageRequestBuilder Отказ
• LogoutUser – Эта функция выступает в текущий вошел в систему пользователя.

Настройка навигации с React Router

Для этого проекта вам нужны две маршруты, один для размещения компонента входа в систему и другой для домашнего компонента, где происходит весь чат и магию. Для начала замените код в SRC/App.js с этим:

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
function App() {
  return (
    
      
        
        
      
    
  );
}
export default App;

Здесь вы объявили два маршрута. Один из них приводит к домашнему компоненту и другую к компоненту для входа. В следующем разделе вы начнете создавать свои компоненты.

Создание компонента входа

Теперь вы построете Вход составная часть. Этот компонент будет размещать вход в систему и все функции, необходимые для аутентификации пользователей. Создать Компоненты каталог внутри SRC каталог. Тогда внутри Компоненты каталог, создать Login.js файл. Внутри файла импортируйте основные модули из React и вновь созданные папки Utils, добавив этот код:

import React, { useState, useEffect, useRef } from 'react'
import { Redirect } from 'react-router-dom'
import { loginUser, setToken } from '../utils/CometChat'

Далее вы устанавливаете начальное состояние для этого компонента с помощью Уместите крюк. Это функция, которая принимает исходное значение и возвращает состояние и функцию для обновления этого состояния. Добавьте следующий код под разделами импорта:

// src/components/Login.js
function Login() {
  const [username, setUsername] = useState('')
  const [error, setError] = useState(null)
  const [isSubmitting, setSubmitting] = useState(false)
  const [isRedirected, setRedirected] = useState(false)
  const isMounted = useRef(false)

  //... other functions
}

export default Login

Следующим шагом является выполнение некоторых побочных эффектов на компоненте, которая вызывает, когда компонент устанавливает. Если вы знакомы с реагированием, но все еще получаете возобновления с помощью реактивных крюков, вы можете думать о Useffect Крючок как ComponentDidmount , ComponentDidupdate и ComponentWillunmount в сочетании.

В этом случае вы беспокоитесь о выполнении этого влияния на ComponentDidmount и ComponentWillunmount знать, когда компонент установлен или нет. Это пригодится, чтобы избежать установки состояния на размонтированный компонент. Добавьте этот фрагмент под переменные состояния:

// src/components/Login.js
useEffect(() => {
 isMounted.current = true
 return () => (isMounted.current = false)
}, [])

Useffect Крюк может необязательно вернуть функцию очистки, которая работает, когда компонент размонтирует и в этом случае все вы делаете, это сбрасывает значение ismounted к ложе.

Далее вы определите некоторые функции, которые будут обрабатывать изменения в ввод имени пользователя и отправки формы. Добавьте это только после Useffect Функция:

  // src/components/Login.js
  const handleChange = e => {
    setUsername(e.target.value)
  }
  const handleSubmit = e => {
    e.preventDefault()
    setSubmitting(true)
    setError(null)
    loginUser(username)
      .then(({ authToken }) => {
        if (isMounted.current === true) {
          setSubmitting(false)
          setToken('cometchat:token', authToken)
          setRedirected(true)
        }
      })
      .catch(({ code }) => {
        if (isMounted.current === true) {
          if (code === 'ERR_UID_NOT_FOUND') {
            setError('User not found, try creating an account')
          }
          setSubmitting(false)
        }
      })
  }

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

Чтобы избежать установки состояния на размонтированный компонент, обновления состояния выполняются только тогда, когда текущее значение ismounted это правда I. Если компонент установлен. Теперь добавьте этот фрагмент ниже Handlesubmit Функция:

// src/components/Login.js

if (isRedirected) return 
return (
    

      

        

          

            Login
          
          {error !== null && 
{error}
}
          

            
 handleSubmit(e)}>
              

                Username
                
              
              
            
          
        
      
    
  )

Здесь вы сначала проверяете значение извлечено объявлено в штате, и если это правда, пользователь перенаправлен на Главная составная часть; еще вы визуете Вход составная часть. В операторе возврата вы видите форму входа в систему и отображение ошибок проверки, если какие-либо существуют.

Вы можете попробовать входить в систему с именами пользователя по умолчанию, предоставляемым Comethat, который включает Superhero1 , Супергерой2, супергероя3 И если вы не получите никаких ошибок, вы будете перенаправлены на домашний компонент. В противном случае он должен отобразить сообщение об ошибке.

Создание домашнего компонента

После успешного входа в систему этот компонент оказывается, так что давайте построим его. Создать Home.js Файл в SRC/Компоненты Справочник и вставьте этот фрагмент внутри:

// src/components/Home.js
import React, { useState, useEffect, useRef, useCallback } from 'react'
import { Redirect } from 'react-router-dom'
import {
  fetchMessages,
  clearToken,
  getToken,
  sendTextMessage,
  loginUserWithToken
} from '../utils/CometChat'
import { CometChat } from '@cometchat-pro/chat'
import Header from './Header'
import Footer from './Footer'
import MessageList from './MessageList'

После этого настройте исходное состояние для компонента, добавив этот код под раздел импорта:

function Home() {
  const [isRedirected, setRedirected] = useState(false)
  const [user, setUser] = useState(null)
  const [messages, setMessages] = useState([])
  const [message, setMessage] = useState('')
  const [isSending, setSending] = useState(false)

  // other functions
}

export default Home

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

const authToken = getToken('cometchat:token')
useEffect(() => {
  if (authToken !== null) {
    loginUserWithToken(authToken).then(
      user => {
        setUser(user)
      },
      err => {
        console.log({ err })
      }
    )
  }
  }, [authToken])

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

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

Другой побочный эффект, который вы будете обращаться, – это выбор сообщений. Здесь, когда компонент сначала устанавливает, вы хотите получить сообщения, которые были отправлены в группу ранее. Добавьте этот код под предыдущий Useffect Функция:

// src/components/Home.js
useEffect(() => {
  // fetch previous messages
  fetchMessages().then(
    msgs => {
      setMessages(msgs)
      scrollToBottom()
      msgs.forEach(
        m => m.data.text !== undefined && CometChat.markMessageAsRead(m)
      )
    },
    error => {
      console.log({ error })
    }
  )
  }, [])

В этом фрагменте выполняет три операции:

• Обновление состояния нынешних сообщений массива,
• Прокручивать пользователь на дно и
• Убедитесь, что вы отмечаете любое сообщение, которое не было ранее удалено как чтение.

Поскольку вам нужен способ узнать, что получатель прочитал сообщение, чтобы иметь возможность выполнять любое удаление, Chetchat предоставляет Markmessageasread Функция для маркировки сообщений как чтение. Итак, как только будут получены сообщения, они помечены как чтение. Обратите внимание, что вы не определены ?| Scrolltobottom функция. Вы определите это сейчас и добавьте это чуть ниже Useffect Функция:

// src/components/Home.js
const mainRef = useRef() 
const scrollToBottom = () => {
    if (mainRef.current) {
      mainRef.current.scrollTo(0, mainRef.current.scrollHeight)
    }
  }

Эта функция прикладывает ссылку на Главная Элемент и автоматически регулирует положение прокрутки на дно, когда новое сообщение получено или отправлено. Теперь, когда вы закончили получать предыдущие сообщения, вы теперь позволяете пользователям отправлять новые сообщения. Для этого вам необходимо создать отдельный компонент для удержания формы сообщения. Создать Footer.js Компонент в SRC/Компоненты и вставить этот код:

// src/components/Footer.js

import React from 'react'
function Footer({ message, handleChange, handleSendMessage, isSending }) {
  return (
    
  )
}
export default Footer

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

Теперь вернитесь к домашнему компоненту в SRC/Компоненты/Home.js и объявить эти функции под Scrolltobottom Функция:

// src/components/Home.js
  const handleChange = useCallback(e => {
    setMessage(e.target.value)
  }, [])

  const handleSendMessage = e => {
    e.preventDefault()
    const newMessage = message
    setSending(true)
    setMessage('')
    sendTextMessage(newMessage).then(
      msg => {
        setSending(false)
        setMessages([...messages, msg])
      },
      error => {
        setSending(false)
        console.log({ error })
      }
    )
  }

Из кода выше, вы можете увидеть, что HandleChange Функция используется для обновления состояния сообщения всякий раз, когда пользователь набирает новое сообщение. Вы также называли SendTextMessage заявлено в SRC/UTILS/CHECCHAT.JS когда форма сообщения отправляется.

До сих пор ваше приложение может извлечь предыдущие сообщения, отправленные в группу и позволяют пользователям отправлять новые. Теперь вам необходимо прикрепить слушатель событий к приложению, которое называется каждые временные сообщения, отправляются или получены. COMCTHAT обеспечивает набор функций, которые запускаются на слушатель сообщения. Те, о которых мы заботимся о прямо сейчас, включают:

• OnTextMessageReated.
• onmessageRead.
• OnMessageleteleted

Вы настроете слушатель сообщения с другим Useffect крюк. Добавьте эту функцию в свой Home.js файл:

 // /src/components/Home.js
  useEffect(() => {
    const listenerID = 'supergroup';
    CometChat.addMessageListener(
      listenerID,
      new CometChat.MessageListener({
        onTextMessageReceived: textMessage => {
          setMessages([...messages, textMessage]);
          CometChat.markMessageAsRead(textMessage);
          scrollToBottom();
        },
        onMessageRead: messageReceipt => {
          setTimeout(() => {
            CometChat.deleteMessage(messageReceipt.messageId).then(
              msg => {
                const filtered = messages.filter(
                  m =>
                    m.id !== messageReceipt.messageId && m.action === 'deleted'
                );
                setMessages([...filtered]);
                scrollToBottom();
              },
              err => {}
            );
          }, 5000);
        },
        onMessageDeleted: deletedMessage => {
          const filtered = messages.filter(m => m.id !== deletedMessage.id);
          setMessages([...filtered]);
          scrollToBottom();
        }
      })
    );
    return () => CometChat.removeMessageListener(listenerID);
  }, [messages, user]);

В приведенном выше фрагменте у вас есть три слушателя сообщения:

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

• OnMessageRead – Этот слушатель говорит вам, когда сообщение было прочитано приемником. После того, как сообщение будет прочитано, сообщение остается в течение пяти секунд, прежде чем он будет удален. Кроме того, перед удалением вам необходимо отфильтровать сообщения, которые были удалены ранее, чтобы избежать ошибки 404, а затем обновить состояние с текущими сообщениями.

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

• OnMessageleteleted – В этой функции вы хотите удалить сообщения на конце отправителя. Все, что вы делаете здесь, обновляет пользовательский интерфейс, отфильтровая удаленное сообщение и отображение остальных.

Следующим шагом является рендер сообщения в пользовательском интерфейсе. Теперь вы создадите Мессагелист Компонент, который покажет все сообщения, отправленные и полученные в группе. Создать новый файл Messagelist.js В SRC/Компоненты Справочник и вставьте этот фрагмент внутри:

import React from 'react'
function MessageList({ msg, i, user }) {
  return msg.sender.uid === user.uid ? (
    

      

        {msg.type === 'custom' ? msg.data.customData.text : msg.text}
      
      

        - {msg.sender.uid}
      
    
  ) : (
    

      

        {msg.type === 'custom' ? msg.data.customData.text : msg.text}
      
      

        -{msg.sender.uid}
      
    
  )
}
export default MessageList

Этот компонент отображает сообщения в элементе списка. В этом компоненте вы также условно визуализируете другой цвет в элемент списка для дифференцирования отправленных и полученных сообщений.

Теперь, когда вы делаете все, что касается сообщений, пришло время обрабатывать функциональность выхода в систему. Для этого создайте Header.js Файл в SRC/Компоненты и вставить этот код:

import React from 'react'
function Header({ user, handleLogout }) {
  return (
    

      
    
  )
}
export default Header

Вам нужно пройти в HandleLogout и Пользователь Подпер к этому компоненту сдал от домашнего компонента. Теперь вернитесь в домашний компонент и добавьте эту функцию:

// src/components/Home.js
// below other functions declared above 
const handleLogout = () => {
    clearToken('cometchat:token')
    setRedirected(true)
  }

Наконец, это хорошее время, чтобы добавить JSX в домашний компонент:

if (authToken === null || isRedirected) return 
  return (
    

      

        

        

          

            {messages.length > 0 ? (
              messages
                .filter(msg => !msg.action && !msg.deletedBy)
                .map((msg, i) => (
                  
                ))
            ) : (
              

                Fetching Messages ...
              
            )}
          
        
        
      
    
  )

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

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

    npm start

Если вы запустите свое приложение, вы должны иметь что-то подобное:

Заключение

В этой статье вы построили приложение эфемерного чата. Вы узнали, как использовать некоторые расширенные функции Comethat, такие как чтение квитанции, прослушиватели сообщения и т. Д. Для достижения этого. Есть еще намного больше, вы можете сделать с Chechthat. Например, вы можете включить концептуальное шифрование для сообщений в вашем приложении, чтобы обеспечить дополнительный уровень безопасности. Это может быть достигнуто путем включения расширения безопасности Cometchat Virgil, узнайте больше здесь Отказ