Создайте анонимное приложение в чате с React & React Bootstrap

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

Эта статья была впервые опубликована на Учебное пособие на Comethat Отказ

Чтобы эффективно следовать этой статьи, ожидается, что у вас есть следующее:

• Предыдущие знания реагирования. Вы можете использовать это Ресурс Чтобы встать на скорость с этим.
• Node.js и NPM установлены на вашем компьютере.
• Текстовый редактор или IDE. VS код рекомендуется.

Вступление

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

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

Вот предварительный просмотр того, что вы построете:

Вы можете погрузиться прямо в Код или пройти через наш шаг за шагом урочиться.

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

Для этой статьи, чтобы быстро лечить новое приложение RACT, вы будете использовать один из самых популярных инструментов, доступных – Create-ract-app cli tool Отказ Откройте терминал, перейдите в каталог, где вы обычно сохраняете свои проекты и запустите эту команду:

npx create-react-app react-anonymous-chat 

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

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

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

@ Comethat-Pro/Chat : Этот модуль позволит нам подключиться к Comethat и начать отправлять и получать сообщения в режиме реального времени React-bootstrap : Это библиотека пользовательского интерфейса, построенная на верхней части реагирования и базовой загрузки. Вы будете использовать его для стиля всего приложения в этой статье React-Router-DOM : Вы будете использовать его для маршрутизации на стороне клиента UUID : Этот модуль будет использоваться для генерации уникальных идентификаторов

Для установки вышеуказанных модулей запустите следующие команды:

# move into your project directory
cd react-anonymous-chat
        
# install dependencies using npm
npm install @cometchat-pro/chat react-bootstrap react-router-dom uuid

Установка

Чтобы начать использование Comethat Pro SDK в вашем недавно созданном проекте RACT, вам понадобится учетная запись Comethat Pro. Если у вас нет учетной записи, вы можете быстро создать один здесь.

После создания учетной записи перейдите на валютную панель и создайте новое приложение, называемое ract – анонимно-чат. После создания нового приложения вы найдете идентификатор приложения, рядом с именем вашего приложения. Если вы откроете свое приложение и перейдите в раздел Keys API, вы увидите ключ с помощью FullAccess Scope. Скопируйте его, а также идентификатор приложения. Нам понадобится этими в ближайшее время.

Получить API Cometchat

Далее создайте .env Файл в корне вашего проекта, чтобы сохранить учетные данные приложений. Берегите себя, чтобы не совершить этот файл для контроля версий! Это важно для защиты ваших секретов при публикации вашего приложения. Вы можете легко создать файл, запустив эту команду:

touch .env

Откройте файл и вставьте этот фрагмент:

REACT_APP_COMETCHAT_APIKEY=YOUR_API_KEY_GOES_HERE
REACT_APP_COMETCHAT_APPID=YOUR_APP_ID_GOES_HERE 

Замените заполнителей на ваш идентификатор приложения и ключ API с помощью приборной панели.

Поскольку ваши ключи теперь готовы, вы можете инициализировать Comethat В index.js Файл, сгенерированный путем создания APP. Откройте свой index.js Файл и заменить это с помощью этого фрагмента:

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_COMETCHAT_APPID)
  .then(() => {
    console.log('Initialised CometChat');
  })
  .catch(() => {
    console.log('Failed to Initialise CometChat');
  });

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

Прежде чем идти вперед, вам нужно импортировать Bootstrap на публике/index.htm, как так:

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

Ваше приложение будет иметь три компонента, подписи, дома и компонент чата. Компонент регистрации – это страница, которая позволит пользователям создавать новые учетные записи. Создать папку с именем Компоненты внутри SRC каталог. Это где вы добавите свои компоненты.

Регистрация компонента

В этом компонент вы построите форму, чтобы помочь создавать новые пользователи в приложении. У пользователя будет UID , адрес электронной почты и имя. UID Значение должно быть уникальным.

Создать новый файл с именем Signup.js Внутри файла добавьте эти импорт:

import React from 'react';
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Form from 'react-bootstrap/Form'
import Alert from 'react-bootstrap/Alert'
import Spinner from 'react-bootstrap/Spinner'
import { Redirect, Link } from 'react-router-dom'

Здесь вы импортируете некоторые компоненты из ядра React-bootstrap Компоненты, а также компоненты из React-Router-DOM зависимость.

Далее вы определяете начальное состояние для вашего компонента регистрации в Signup.js файл:

class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: '',
      name: '',
      email: '',
      UIDError: null,
      errors: null,
      redirect: false,
      isLoading: false
    };
  }
  //... other class methods
}
export default Signup;

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

UID : Это содержит текущее значение текста, ввода в поле «Форма имени пользователя». Имя : Это содержит текущее значение имени пользователя в поле формы. Email : Это содержит текущее значение электронной почты пользователя в поле формы. Uiderror : Этот объект будет отслеживать ошибки при проверке поля имени пользователя. Ошибки : Это сохраняет сообщения об ошибках при проверке других полей. Перенаправить: Это отслеживает успех по поводу представления формы. загружает : Это используется для предоставления визуальной обратной связи при использовании составная часть.

Uiderror Объект отслеживает ошибки на поле имени пользователя во время Ошибки Отслеживает ошибки на других полях. Они разделены, потому что поле имени пользователя не принимает пробелов и как таковые, у них нет такой же логики проверки.

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

render() {
  if (this.state.redirect) return ;
  return (
    
      
      >Col>
        {this.state.errors !== null && (
          
            

              {this.showErrors().map(err => (
                
{err
              ))}
            
          
        )}
        

          
            User ID
            
            {this.state.UIDError !== null && (
              
                {this.state.UIDError}
              
            )}
            
              
                Name
                
              
              
                Email Address
                
              
              
                {this.state.isLoading ? (
                  <>
                    
                    Please wait...
                  
                ) : (
                  Create My Account
                )}
              
              

                Already have an account? Login
              
            
          
        
      
    );
  }

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

Далее вы создадите три метода, используемые в оказывать Метод, а именно: HandleChange , Handlesubmit и душ Отказ Добавьте эти методы к вашему Signup.js файл:

handleChange = e => {
  if (e.target.name === 'uid') {
    const uid = e.target.value;
    if (uid.indexOf(' ') > 0) {
      this.setState(
        { UIDError: 'Username cannot contain white spaces' },
        () => {
          console.log(this.state.UIDError);
        }
      );
    } else {
      this.setState({ UIDError: null });
    }
  }
  this.setState({ [e.target.name]: e.target.value });
};
    
handleSubmit = e => {
  e.preventDefault();
  const { uid, name, email } = this.state;
  this.setState({ uid: '', name: '', email: '', isLoading: true });
  fetch('https://api.cometchat.com/v1/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      appid: process.env.REACT_APP_COMETCHAT_APPID,
      apikey: process.env.REACT_APP_COMETCHAT_APIKEY
    },
    body: JSON.stringify({
      uid,
      name,
      email
    })
  })
  .then(response => response.json())
  .then(data => {
    const error = data.error;
    if (error) {
      this.setState(
        {
          isLoading: false,
          errors: { ...error.details }
        },
        () => {
          this.showErrors();
        }
      );
      return;
    }
    this.setState({
      isLoading: false,
      redirect: true
    });
  });
};
    
showErrors = () => {
  const errors = this.state.errors;
  let errorMessages = [];
  if (errors !== null) {
    for (const error in errors) {
      errorMessages = [...errorMessages, ...errors[error]];
    }
  }
  return errorMessages;
};

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

HandleChange Метод обновляет значения всех полей ввода в качестве типов пользователей. Пользовательская проверка выполняется на поле имени пользователя, чтобы предотвратить имена пользователей без белых пробелов. handlesubmit () Метод делает Пост Запрос на создание учетной записи API: https://api.cometchat.com/v1/users с деталями, введенными пользователем. Если это успешно, вы перенаправляетесь на домашнюю страницу. душ Метод используется для поставки ошибок.

Домашняя компонент

Теперь, когда вы сделали со компонентом регистрации, вы теперь построете домашний компонент. Этот компонент должен включить в систему пользователей.

Создать новый файл Home.js внутри /SRC/Компоненты каталог. Внутри файла добавьте эти импорт:

import React from 'react';
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Alert from 'react-bootstrap/Alert';
import Spinner from 'react-bootstrap/Spinner';
import { CometChat } from '@cometchat-pro/chat';
import { Redirect, Link } from 'react-router-dom';

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

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      user: null,
      error: null,
      redirect: false,
      isLoading: false
    };
  }
    
  //... other class methods
    
}
export default Home;

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

После этого добавьте эти два метода к вашему классу HandleChange и Handlesubmit вот так:

handleChange = e => {
  this.setState({ username: e.target.value });
};
    
handleSubmit = e => {
  e.preventDefault();
  const username = this.state.username;
  this.setState({ username: '', isLoading: true });
  CometChat.login(username, process.env.REACT_APP_COMETCHAT_APIKEY)
  .then(user => {
    this.setState({ redirect: true, user, isLoading: false });
    localStorage.setItem('cometchat:authToken', user.authToken);
  })
  .catch(err => {
    this.setState({ error: err.message, isLoading: false });
  });
};

HandleChange Метод обновляет значение поля ввода в качестве типов пользователей, пока Handlesubmit Метод позвонит Вход Метод, предоставленный Comethat Отказ Чтобы сделать запрос входа в систему, ключ API определен в .env Файл передан рядом с именем пользователя.

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

// other methods above...
render() {
  if (this.state.redirect)
  return (
    
  );
  return (
    
      
        
          {this.state.error !== null && (
            {this.state.error}
          )}
          

            
              Username
              
            
            
              {this.state.isLoading ? (
                <>
                  
                  Loading...
                
              ) : (
                Login
              )}
            
            

              Don't have an account? Create One
            
          
        
      
    
  );
}

В этом фрагменте у вас есть форма входа в систему, чтобы взять имя пользователя пользователя. Когда пользователь нажимает на Вход Кнопка, вы берете пользовательский ввод и вызовите Handlesubmit Метод, который вы определены ранее в этом компоненте. Если получен ответ успеха, пользователь перенаправляется на компонент чата, остальное отображается ошибка.

Компонент чата

Это компонент, в котором пользователь сможет просматривать сообщения и отправлять сообщения в группу чата. Во-первых, создайте новый Chat.js Файл в SRC/Компоненты каталог. После этого добавьте эти импорт:

import React from 'react';
import { CometChat } from '@cometchat-pro/chat';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Navbar from 'react-bootstrap/Navbar';
import { Redirect } from 'react-router-dom';
import uuid from 'uuid';

После этого добавьте класс с состоянием внутри файла Chat.js, как так:

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false,
      user: null,
      receiverID: 'supergroup',
      messageText: '',
      messages: [],
      authToken: null,
      messageType: CometChat.MESSAGE_TYPE.TEXT,
      receiverType: CometChat.RECEIVER_TYPE.GROUP
    };
  }
  //... other class methods
}
    
export default Chat;

Здесь вам нужен массив сообщений для хранения всех сообщений, отправленных и полученных в группе. Мессагетип и Получение Объекты определяют тип сообщения, которое вы хотите прослушать, и для которого является сообщение. Получатель Объект используется для идентификации названия группы, на котором вы слушаете сообщения. Здесь вы использовали группу по умолчанию, созданную для вас – Supergroup Отказ

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

render() {
  if (this.state.redirect) return ;
  return (
    

      
        
          
            

              

                React Anonymous Chat
              
               this.logout()} variant='outline-primary'>
                Logout
              
            
            

              {this.state.messages.length > 0 ? (
                this.state.messages.map(msg => (
                  

                    {msg.sender.name}
                    
{msg.text}
                  
                ))
              ) : (
                

                  
Fetching Messages
                
              )}
            
          
        
      
      
        
          

            
              
            
            
              Send
            
          
        
      
    
  );
}

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

Есть некоторые методы, которые здесь называются, еще не волнуйтесь, вы скоро определите эти методы. Теперь, когда вы построили пользовательский интерфейс для компонента чата, следующее – отображать сообщения пользователям. Вы сделаете это, как только компонент установлен. В вашем Chat.js Файл добавить этот метод:

componentDidMount() {
  this.setState({ user: this.props.location.user });
  this.getUser();
  this.receiveMessages();
}

Это функция обратного вызова, предоставленная реакцией. В этом методе вы получите детали пользователя и слушаете новые сообщения в группе. Теперь добавьте GetUser () метод так:

getUser = () => {
  CometChat.getLoggedinUser().then(
    user => {
      this.joinGroup();
    },
    error => {
      const authToken = localStorage.getItem('cometchat:authToken');
      if (authToken !== null) {
        this.setState({ authToken }, () => {
          this.reAuthenticateUserWithToken(this.state.authToken);
        });
      } else {
        this.setState({ redirect: true });
      }
    }
  );
};

В этом методе вы получаете запись пользователя и присоединяйтесь к группе, используя Joingroup () метод. Если ошибка возникает в получении пользователя, AuthToken хранится в LocalStorage служит опцией Foxback для повторного аутентификации пользователя. Joingroup () Метод еще не определен. Создайте метод внутри вашего Chat.js выглядеть так:

joinGroup = () => {
  const GUID = this.state.receiverID;
  const password = '';
  const groupType = CometChat.GROUP_TYPE.PUBLIC;
  CometChat.joinGroup(GUID, groupType, password).then(
    group => {},
    error => {
      if (error.code === 'ERR_ALREADY_JOINED') {
        this.reAuthenticateUserWithToken();
      }
    }
  );
};

Здесь, в этом методе, пользователь подписан на эту группу, и теперь они могут отправлять и получать сообщения из этой группы. Кроме того, fetchmessages () Метод называется для получения предыдущих сообщений, когда пользователь успешно присоединяется к группе. Добавьте fetchmessages () Способ тоже:

fetchMessages = () => {
  const GUID = this.state.receiverID;
  const limit = 30;
  const messagesRequest = new CometChat.MessagesRequestBuilder()
    .setGUID(GUID)
    .setLimit(limit)
    .build();
  messagesRequest.fetchPrevious().then(
    messages => {
      const textMessages = messages.filter(msg => msg.type === 'text');
      this.setState({ messages: [...textMessages] });
      this.scrollToBottom();
    },
    error => {
      console.log('Message fetching failed with error:', error);
    }
  );
};

Это выбирает предыдущие сообщения, отправленные в группу. Чтобы пользователи могли видеть новейшие сообщения, Scrolltobottom () Способ называется. Добавить Scrolltobottom () Метод для вашего класса, как так:

scrollToBottom = () => {
  const page = document.querySelector('.page');
  page.scrollTop = page.scrollHeight;
};

Теперь, когда вы можете получить предыдущие сообщения, пришло время позволить пользователям также отправлять новые сообщения. Чтобы добиться этого, вам сначала нужно создать HandleChange () Способ обновления состояния всякий раз, когда пользователь набирает новое сообщение. Добавьте этот метод к компоненту вашего класса:

handleChange = e => {
  this.setState({ messageText: e.target.value });
};

После этого вы добавляете SendMessage метод так:

sendMessage = e => {
  e.preventDefault();
  const { receiverID, messageText, messageType, receiverType } = this.state;
  const textMessage = new CometChat.TextMessage(
    receiverID,
    messageText,
    messageType,
    receiverType
  );
  CometChat.sendMessage(textMessage).then(
    message => {
      this.setState({ messageText: '' });
      const oldMessages = [...this.state.messages];
      const filtered = oldMessages.filter(msg => msg.id !== message);
      this.setState({ messages: [...filtered, message] });
      this.scrollToBottom();
    },
    error => {
      console.log('Message sending failed with error:', error);
    }
  );
};

Этот метод называется, когда форма в Render () Метод представлен. После SendMessage метод Комечат Вызывается, входное поле очищено, и новые сообщения будут добавлены к массиву сообщений. Новые сообщения также фильтрованы в случае дубликатов и, наконец, Scrolltobottom () называется, чтобы дать фокус на новые сообщения.

Второй метод, который вы позвонили в ComponentDidmount Метод был получение Отказ Теперь создайте метод в вашем классе:

receiveMessages = () => {
  const listenerID = 'supergroup';
  CometChat.addMessageListener(
    listenerID,
    new CometChat.MessageListener({
      onTextMessageReceived: textMessage => {
        const oldMessages = this.state.messages;
        oldMessages.push(textMessage);
        this.setState(
          {
            messages: [...oldMessages]
          },
          () => this.scrollToBottom()
        );
      }
    })
  );
};

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

После этого вам необходимо добавить метод выхода из системы для включения аутентифицированных пользователей для выхода из приложения. Добавьте метод выхода в систему в Chat.js файл так:

logout = () => {
  CometChat.logout().then(() => {
    localStorage.removeItem('cometchat:authToken');
    this.setState({ redirect: true });
  });
};

Когда пользователь нажимает кнопку «Выход», вы называете Выход () Метод, то вы сбрасываете LocalStorage и перенаправьте пользователя на домашнюю страницу.

Теперь, когда вы определили свои компоненты, вы бы обновили App.js Файл с маршрутами. Откройте свой App.js Файл и заменить его этим:

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

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

npm start

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

Заключение

В этой статье вы узнали, как построить анонимный чат, использующий React, React Buttrap и Cometchat Pro. Теперь вы можете комфортно интегрировать групповые чаты в React Apps. Что касается Comethat Pro SDK, существует тонна других функций, не охваченных в этой статье. Не стесняйтесь расширить это, погрузив глубже в Документация Отказ