Научитесь создать приложение для чата React за 10 минут

1656594382 nauchites sozdat prilozhenie dlya chata react za 10 minut
1*NE_xQlf9WZkO3LTpxG5TNA
Нажмите здесь, чтобы перейти к полному курсу, на котором основана эта статья.

В этой статье я покажу вам самый простой способ создать приложение для чата с помощью React.js. Это будет сделано полностью без кода на стороне сервера, поскольку мы позволим API Chatkit обрабатывать серверную часть.

Я предполагаю, что вы знаете базовый JavaScript по-прежнему сталкивались с React.js. Кроме того, нет никаких предпосылок.

Примечание. Я также создал бесплатный полноценный курс о создании программы для чата React.js здесь:

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

Давайте начнем!

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

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

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

1*66jz6LtljJtOPDouK9PmYA

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

Какие прямые дети имеют этот компонент?

В нашем случае имеет смысл предоставить ему три дочерних компонента, которые мы назовем так:

  • Title
  • MessagesList
  • SendMessageForm

Давайте нарисуем прямоугольник для каждого из них:

1*SUeSr13iO7yJfIf4ipaeFg

Это дает нам хороший обзор различных компонентов и архитектуры нашей программы.

Мы могли бы продолжить задавать себе вопрос, какие дети снова имеют эти компоненты. Таким образом, мы могли бы разбить пользовательский интерфейс на еще больше компонентов, например, превратив каждое из сообщений в собственные компоненты. Однако остановимся на этом для простоты.

Шаг 2: Настройка кодовой базы

Теперь нам нужно настроить наш репозиторий. Мы будем использовать простейшую структуру: *index.html *файл со ссылками на файл JavaScript и таблицу стилей. Мы также импортируем Chatkit SDK и Babel, который используется для трансформации нашего JSX:

1*YCcPOLQGBk-dP-UQnyLEMA

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

1*xmr7Z2oR1PwJvLq2sHuZbQ

Кроме того, вы можете скачать проект Scrimba как файл .zip и запустить простой сервер, чтобы запустить его и запустить локально.

Шаг 3: Создание корневого компонента

С созданным репозиторием мы можем начать писать некоторый код React, что мы сделаем внутри *index.js файла.

Начнём с основного компонента, App. Это будет наш единственный «умный» компонент, поскольку он будет обрабатывать данные и соединения с API. Вот основные настройки для него (до того, как мы добавили любую логику):

    class App extends React.Component {
      
      render() {
        return (
          <div className="app">
            <Title />
            <MessageList />
            <SendMessageForm />
         </div>
        )
      }
    }

Как видите, он просто воспроизводит троих детей: <Title>,<MessageList>и <SendMessageForm> компонентов.

Однако мы собираемся сделать это немного сложнее, поскольку сообщения чата нужно будет хранить внутри государство это App компонент. Это позволит нам получить доступ к сообщениям через this.state.messagesи таким образом передавать их другим компонентам.

Мы начнем с использования фиктивных данных, чтобы понять поток данных программы. Затем мы заменим это реальными данными из API Chatkit позже.

Давайте создадим а DUMMY_DATA переменная:

    const DUMMY_DATA = [
      {
        senderId: "perborgen",
        text: "who'll win?"
      },
      {
        senderId: "janedoe",
        text: "who'll win?"
      }
    ]

Затем мы добавим эти данные в состояние App и передать его в MessageList компонент как опора

    class App extends React.Component {
      
      constructor() {
        super()
        this.state = {
           messages: DUMMY_DATA
        }
      }
      
      render() {
        return (
          <div className="app">
            <MessageList messages={this.state.messages}/>
            <SendMessageForm />
         </div>
        )
      }
    }

Здесь мы инициализируем состояние в constructor и мы тоже проходим this.state.messages вниз к MessageList.

Обратите внимание, что мы звоним super() в конструкторе. Вы должны сделать это, если вы хотите создать компонент с сохранением состояния.

Шаг 4: Воспроизведение фиктивных сообщений

Давайте посмотрим, как мы можем отобразить эти сообщения в MessageList компонент. Вот как это выглядит:

    class MessageList extends React.Component {
      render() {
        return (
          <ul className="message-list">                 
            {this.props.messages.map(message => {
              return (
               <li key={message.id}>
                 <div>
                   {message.senderId}
                 </div>
                 <div>
                   {message.text}
                 </div>
               </li>
             )
           })}
         </ul>
        )
      }
    }

Это так называемая глупая составляющая. Нужен один подпор, messages, содержащий массив объектов А потом мы просто воспроизводим text и senderId свойства от объектов

Когда наши фиктивные данные поступают в этот компонент, он отобразит следующее:

1*Nf12vqc4Ti_GWY0FwqmQKw

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

Теперь давайте заменим наши фиктивные данные реальными сообщениями из чатовой комнаты!

Шаг 5: получение API-ключей из Chatkit

Чтобы получить сообщение, нам нужно подключиться к API Chatkit. А для этого нам нужно получить ключи API.

Сейчас я хочу призвать вас выполнить мои действия, чтобы вы могли запустить собственную программу чата. Вы можете использовать игровую площадку Scrimba, чтобы проверить собственные ключи API.

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

изображение-72

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

  • Локатор экземпляров
  • Тестовый поставщик маркеров
  • Идентификатор комнаты
  • Имя пользователя

Мы начнем с Локатор экземпляров:

Вы можете скопировать, используя значок справа от Locator Instance.

Вы можете скопировать, используя значок справа от Locator Instance.

И если вы прокрутите немного вниз, вы найдете Тестовый поставщик маркеров:

1*uSvabQgYrppTGsWKXQsJSQ

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

1*hCXjDJ3PQJ_emU4WfJRQEQ

Итак, теперь вы нашли свои четыре идентификатора. Молодцы!

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

Вот как это сделать:

1*HU3mzUknYj8_MwY7ceK2Ow

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

Шаг 6: Воспроизведение реальных сообщений чата

Теперь вернемся к нашему index.js файл и сохранять эти четыре идентификатора как переменные в верхней части нашего файла.

Вот мои, но я бы призывал вас создать собственный:

    const instanceLocator = "v1:us1:dfaf1e22-2d33-45c9-b4f8-31f634621d24"

    const testToken = "

    const username = "perborgen"

    const roomId = 9796712

И с этим мы наконец-то готовы подключиться к Chatkit. Это произойдет в App компонент, а точнее в componentDidMount метод. Это метод, который вы должны использовать при подключении компонентов React.js к API.

Сначала мы создадим a chatManager:

    componentDidMount() {
      const chatManager = new Chatkit.ChatManager({
        instanceLocator: instanceLocator,
        userId: userId,
        tokenProvider: new Chatkit.TokenProvider({
          url: testToken
        })
     })  

… и тогда мы сделаемchatManager.connect() чтобы подключиться к API:

      chatManager.connect().then(currentUser => {
          currentUser.subscribeToRoom({
          roomId: roomId,
          hooks: {
            onNewMessage: message => {
              this.setState({
                messages: [...this.state.messages, message]
              })
            }
          }
        })
      })
    }

Это дает нам доступ к currentUser объект, являющийся интерфейсом для взаимодействия с API.

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

Тогда мы звоним currentUser.subscribeToRoom() и передайте это нашим roomId и an onNewMessage крючок.

The onNewMessage крючок срабатывает всякий раз, когда новое сообщение транслируется в комнату чата. Поэтому каждый раз, когда это произойдет, мы просто добавим новое сообщение в конце this.state.messages.

Это приводит к тому, что приложение получает данные из API, а затем воспроизводит их на странице.

1*EAi9TyUba39xN3fciic3aA

Это ошеломляюще, поскольку теперь у нас есть скелет нашего соединения клиент-сервер.

Ууууу!

Шаг 7: Обработка введенных пользовательских данных

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

Посмотрите на render() метод, и обратите особое внимание на строки, которые я выделил:

    class SendMessageForm extends React.Component {
      render() {
        return (
          <form
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
          </form>
        )
      }
    }

Мы делаем две вещи:

  1. Прослушивание введенных пользователей с помощью onChange слушатель событий, чтобы мы могли
    запустить handleChange метод
  2. Настройка value поля ввода явно используя this.state.message

Связь между этими двумя шагами находится внутри handleChange метод. Он просто обновляет состояние до того, что пользователь вводит в поле ввода:

    handleChange(e) {
      this.setState({
        message: e.target.value
      })
    }

Это инициирует повторную визуализацию, а поскольку поле ввода устанавливается явно из состояния using value={this.state.message}поле ввода будет обновлено.

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

Чтобы завершить эту функцию, нам нужно предоставить компонент a constructor. В нем мы инициализируем состояние и свяжем this в handleChange метод:

    constructor() {
        super()
        this.state = {
           message: ''
        }
        this.handleChange = this.handleChange.bind(this)
    }

Нам нужно связать handleChangeметод, чтобы мы имели доступ к this ключевое слово внутри него. Вот как работает JavaScript: this ключевое слово по умолчанию неопределенный внутри тела функции.

Шаг 8: Отправка сообщений

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

Для этого мы подключим a handleSubmit даже обработчик с onSubmit слушатель событий в <form>.

    render() {
        return (
          <form
            onSubmit={this.handleSubmit}
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
        </form>
        )
      }

Поскольку мы имеем значение поля ввода, хранящегося в this.state.message, в действительности достаточно легко передать правильные данные вместе с представлением. Ну
просто сделайте:

    handleSubmit(e) {
      e.preventDefault()
      this.props.sendMessage(this.state.message)
      this.setState({
        message: ''
      })
    }

Вот мы звоним sendMessage опора и передача this.state.message как параметр. Вы можете быть немного обеспокоены этим, поскольку мы не создали sendMessage метод еще. Однако мы сделаем это в следующей главе, поскольку этот метод живет внутри App компонент. Так что не волнуйся!

Во-вторых, мы очищаем поле ввода путем настройки this.state.message к пустой строке.

Вот и все SendMessageForm компонент. Обратите внимание, что мы также связаны this к handleSubmit метод:

    class SendMessageForm extends React.Component {
      constructor() {
        super()
        this.state = {
          message: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
      }

      handleChange(e) {
        this.setState({
          message: e.target.value
        })
      }

      handleSubmit(e) {
        e.preventDefault()
        this.props.sendMessage(this.state.message)
        this.setState({
          message: ''
        })
      }

      render() {
        return (
          <form
            onSubmit={this.handleSubmit}
            className="send-message-form">
            <input
              onChange={this.handleChange}
              value={this.state.message}
              placeholder="Type your message and hit ENTER"
              type="text" />
          </form>
        )
      }
    }

Шаг 9: Отправка сообщений в Chatkit

Теперь мы готовы, поэтому отправляйте сообщения в Chatkit. Это сделано в App компонент, где мы создадим метод под названием this.sendMessage:

    sendMessage(text) {
      this.currentUser.sendMessage({
        text: text,
        roomId: roomId
      })
    }

Он принимает один параметр (текст) и просто вызывает this.currentUser.sendMessage().

Последний шаг – передать это в <SendMessageForm> компонент как реквизит:

    /* App component */
      
    render() {
      return (
        <div className="app">
          <Title />
          <MessageList messages={this.state.messages} />
          <SendMessageForm sendMessage={this.sendMessage} />
      )
    }

И вместе с этим мы передали обработчик так SendMessageForm может вызвать его при отправке формы.

Шаг 10: Создание компонента Title

Чтобы завершить, давайте также создадим компонент Title. Это простой функциональный компонент, то есть функция, возвращающая выражение JSX.

    function Title() {
      return <p class="title">My awesome chat app</p>
    }

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

Результат

И с этим у вас есть собственная программа чата, которую вы можете использовать для общения с друзьями!

1*KQzdlJJLMGyq5IdZu6cZ1Q

Похлопайте себя по спине, если вы дописали код до самого конца.

Если вы хотите узнать, как развивать этот пример, посмотрите мой бесплатный курс о создании программы чата с помощью React здесь.

Спасибо за чтение и приятное кодирование 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.