Как создать приложение React Chat
react reactjs app chat

Как создать приложение React Chat

30 декабря 2022 г.

Добро пожаловать в это руководство по созданию приложения для интерактивного чата с помощью MinChat Chat SDK! В этой статье мы создадим полнофункциональное приложение для чата, полностью на интерфейсе, используя React.js. Вам не понадобится какой-либо код на стороне сервера — мы позволим MinChat SDK выполнять всю внутреннюю работу за нас. К концу этого руководства у вас будет полностью функционирующее приложение для чата, которое вы можете настроить и использовать по своему усмотрению. Начнем!»

Исходный код этого руководства можно найти на Github.

:::подсказка Главное изображение этой статьи было создано с помощью HackerNoon AI Stable Diffusion с помощью подсказки «приложение для чата».

:::

Шаг 1. Разделение пользовательского интерфейса чата на компоненты

В этом руководстве используется пакет SDK для чата MinChat.

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

function App() {
  return (
    <div style={{ position: "relative", height: "500px" }}>
      {/* ui components */}
    </div>
  );
}

Мы собираемся использовать набор пользовательского интерфейса под названием Набор пользовательского интерфейса для чата React для пользовательского интерфейса чата. продолжайте и выполните следующую команду в терминале

npm install @chatscope/chat-ui-kit-react @chatscope/chat-ui-kit-styles

Теперь давайте добавим компоненты пользовательского интерфейса реагирующего чата в наш файл App.js

.
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

function App() {
  return (
    <div style={{ position: "relative", height: "500px", width: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            <Message
              model={{
                message: "Hello World",
                sender: "Joe",
              }}
            />
          </MessageList>
          <MessageInput placeholder="Type message here" />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App;

Интерфейс вашего чата выглядит следующим образом: скриншот входящего сообщения

Шаг 2. Настройка MinChat

Мы создадим аккаунт на MinChat и получим ключ API.

Chat SDK API Key

Установите пакет SDK для чата MinChat React:

npm install @minchat/react

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

const firstUser = {
  id: "micheal",
  name: "Micheal Saunders",
};

const secondUser = {
  id: "mercy",
  name: "Mercy Wells",
};

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

import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import { MinChatProvider } from "@minchat/react";

const root = ReactDOM.createRoot(document.getElementById("root"));

const firstUser = {
  id: "micheal",
  name: "Micheal Saunders",
};

root.render(
  <React.StrictMode>
    <MinChatProvider apiKey={906373408} user={firstUser}>
      <App />
    </MinChatProvider>
  </React.StrictMode>
);

reportWebVitals();

В нашем файле App.js мы импортируем хук useMinChat(), чтобы получить доступ к объекту minchat и начать новый разговор со вторым пользователем, используя useMessages(.. .) крючок.

Наш файл App.js теперь выглядит так:

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import { MainContainer, ChatContainer, MessageList,Message,MessageInput} from "@chatscope/chat-ui-kit-react";
import { useMinChat, useMessages } from "@minchat/react";

const secondUser = {
  id: "mercy",
  name: "Mercy Wells",
};

function App() {
  const minchat = useMinChat();

  const chat = minchat.chat(secondUser);

  const { messages, sendMessage } = useMessages(chat);

  return (
    <div style={{ position: "relative", height: "500px", width: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            <Message
              model={{
                message: "Hello World",
                sender: "Joe",
              }}
            />
          </MessageList>
          <MessageInput placeholder="Type message here" />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App;

Шаг 3. Соединяем все вместе

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

Мы собираемся обновить компонент реактивного чата MessageInput, чтобы он мог отправлять сообщения при отправке:

<MessageInput
  onSend={(_, textContent) => sendMessage({ text: textContent })}
  placeholder="Type message here"
/>

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

<MessageList>
  {messages &&
    messages.map((message) => {
      return message.user.id === "mercy" ? (
        <Message
          model={{
            message: message.text,
            sender: message.user.name,
          }}
        />
      ) : (
        <div style={{ justifyContent: "flex-end", display: "flex" }}>
          <Message
            model={{
              message: message.text,
              sender: message.user.name,
            }}
          />
        </div>
      );
    })}
</MessageList>

Файл App.js теперь должен выглядеть следующим образом:

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import { MainContainer, ChatContainer, MessageList,Message,MessageInput} from "@chatscope/chat-ui-kit-react";
import { useMinChat, useMessages } from "@minchat/react";

const secondUser = {
  id: "mercy",
  name: "Mercy Wells",
};

function App() {
  const minchat = useMinChat();

  const chat = minchat.chat(secondUser);

  const { messages, sendMessage } = useMessages(chat);
  return (
    <div style={{ position: "relative", height: "500px", width: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            {messages &&
              messages.map((message) => {
                return message.user.id === "mercy" ? (
                  <Message
                    model={{
                      message: message.text,
                      sender: message.user.name,
                    }}
                  />
                ) : (
                  <div style={{ justifyContent: "flex-end", display: "flex" }}>
                    <Message
                      model={{
                        message: message.text,
                        sender: message.user.name,
                      }}
                    />
                  </div>
                );
              })}
          </MessageList>
          <MessageInput
            onSend={(_, textContent) => sendMessage({ text: textContent })}
            placeholder="Type message here"
          />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

export default App;

Ваше приложение для чата теперь дополнено функциями чата в приложении.

Chat Inbox with messages

Вы можете пойти еще дальше, создав второй компонент чата, который меняет местами первого пользователя и второго пользователя и

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

Заключение

В заключение, в этом руководстве рассматривается процесс создания приложения для реагирующего чата с использованием MinChat Chat SDK.

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

Затем в руководстве показано, как установить и использовать библиотеку React Chat UI Kit для создания пользовательского интерфейса чата, а также приведены примеры кода для каждого этапа. Следуя шагам, описанным в этом руководстве, вы сможете создать полнофункциональное приложение для чата, которое вы сможете настраивать и использовать по своему усмотрению.

MinChat – отличный сервис API чата, который позволяет вам встраивать функции чата в приложение, не беспокоясь о создании серверной части или всех сложностях, связанных с созданием функции связи в реальном времени.

Учебное пособие является выдержкой из этой статьи.

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE