Автор оригинала: FreeCodeCamp Community Member.
В этой статье я покажу вам самый простой способ создать приложение для чата, используя rest.js. Это будет сделано полностью без сервера кода, как мы позволим Chatkit API обрабатывать задний конец.
Я предполагаю, что вы знаете базовый JavaScript и что вы столкнулись с небольшим количеством RACT.JS ранее. Кроме того, нет никаких предпосылок.
Примечание. Я также создал бесплатный курс по всей длине на Как создать Att.js приложение чата здесь:
Если вы будете следовать с этим руководством, вы получите свое собственное собственное приложение в чате в конце, в котором вы можете построить дальше, если вы хотите.
Давайте начнем!
Шаг 1: Разбие UI на компоненты
Реагирование построено вокруг компонентов, поэтому первое, что вы хотите сделать, при создании приложения – это сломать его UI на компоненты.
Давайте начнем, рисуя прямоугольник вокруг всего приложения. Это ваш корневой компонент и общий предок для всех других компонентов. Давайте назовем это Приложение :
Как только вы определили свой корневой компонент, вам нужно задать себе следующий вопрос:
Какие прямые дети имеют этот компонент?
В нашем случае имеет смысл дать ему три детских компонента, которые мы будем вызывать следующее:
ЗаголовокMessageListSendmessageform.
Давайте нарисуем прямоугольник для каждого из них:
Это дает нам хороший обзор различных компонентов и архитектуры за нашим приложением.
Мы могли бы продолжать задавать себя, какие дети снова имеют эти компоненты. Таким образом, мы могли бы сломать UI еще больше компонентов, например, путем включения каждого из сообщений в свои собственные компоненты. Однако мы остановимся здесь ради простоты.
Шаг 2: Настройка кодовой базы
Теперь нам нужно будет настроить наш репозиторий. Мы будем использовать простейшую возможную структуру: файл * index.html * со ссылками на файл JavaScript и таблице стилей. Мы также импортируем Chatkit SDK и Babel, который используется для преобразования нашего JSX:
Вот детская площадка Scrimba с окончательным кодом для учебника. Я бы порекомендовал вас открыть его на новой вкладке и играть с ним, когда вы чувствуете себя смущенным.
В качестве альтернативы вы можете загрузить проект Scrimba в качестве файла .zip и запустить простой Сервер, чтобы получить его и запустить локально.
Шаг 3: Создание корневого компонента
С помощью репозитория на месте мы можем начать писать какой-то код React, который мы сделаем в файле * index.js *.
Начнем с основного компонента, Приложение Отказ Это будет наш единственный «умный» компонент, так как он будет обрабатывать данные и соединение с API. Вот основная настройка для нее (до того, как мы добавили любую логику):
class App extends React.Component {
render() {
return (
Как видите, он просто оказывает три детей: <Название> ,
Мы собираемся сделать его немного сложнее, хотя, поскольку сообщения чата должны быть сохранены внутри Государство этого Приложение составная часть. Это позволит нам получить доступ к сообщениям через Это .state.messages И, таким образом, передавайте их к другим компонентам.
Начнем с использованием файловых данных, чтобы мы могли понять поток данных приложения. Затем мы поменяем это с реальными данными из Чаткит API позже.
Давайте создадим Dummy_Data Переменная:
const DUMMY_DATA = [
{
senderId: "perborgen",
text: "who'll win?"
},
{
senderId: "janedoe",
text: "who'll win?"
}
]
Затем мы добавим эти данные в состояние Приложение и передать его до Мессагелист компонент как опоры.
class App extends React.Component {
constructor() {
super()
this.state = {
messages: DUMMY_DATA
}
}
render() {
return (
)
}
}
Здесь мы инициализируем государство в Конструктор И мы также проезжаем Это .state.messages до Мессагелист Отказ
Обратите внимание, что мы звоним Super () в конструкторе. Вы должны сделать это, если вы хотите создать элементную компонент.
Шаг 4: рендеринг пустых сообщений
Давайте посмотрим, как мы можем сделать эти сообщения в Мессагелист составная часть. Вот как это выглядит:
class MessageList extends React.Component {
render() {
return (
-
{this.props.messages.map(message => {
return (
-
{message.senderId}{message.text}
)
})}
Это так называемый глупый компонент. Требуется один опорный, Сообщения , который содержит массив объектов. И тогда мы просто оказываем текст и Senderid свойства от объектов.
С нашими фиктивными данными, протекающими в этот компонент, он сделает следующее:
Итак, теперь у нас есть базовая структура для нашего приложения, и мы также можем предоставлять сообщения. Прекрасная работа!
Теперь давайте заменим наши фиктивные данные с фактическими сообщениями из чата!
Шаг 5: Получение API-ключей из Chatkit
Для того, чтобы получить сообщения, нам нужно будет подключиться к API Chatkit. И чтобы сделать это, нам нужно получить ключи API.
На данный момент я хочу побудить вас следовать за моими шагами, чтобы вы могли получить собственный приложение чата вверх и запустить. Вы можете использовать мой Scrimba Playground Для того, чтобы проверить свои собственные ключи API.
Начните с создания бесплатного Аккаунт здесь Отказ Как только вы сделали, вы увидите вашу приборную панель. Это где вы создаете новые экземпляры Chatkit. Создайте один и дайте ему все, что вы хотите:
Тогда вы будете перемещаться к вашему недавному экземпляру. Здесь вам нужно скопировать четыре значения:
- Локатор экземпляра
- Тестовый токен провайдер
- Номер комнаты
- Имя пользователя
Мы начнем с Актуальный локатор :
Вы можете скопировать с помощью значка на правой стороне локатора экземпляра.
И если вы немного прокрутите, вы найдете Провайдер Test Token :
Следующий шаг – создать Пользователь * * и A Комната , который делается на одной странице. Обратите внимание, что вам придется создать пользователь Первый И тогда вы сможете создать комнату, которая снова дает вам доступ к идентификатору номера.
Итак, теперь вы нашли свои четыре идентификатора. Отличная работа!
Однако, прежде чем вернуться к кодовой базе, я хочу, чтобы вы вручную отправили сообщение из панели инструментов ChatKit, так как это поможет нам в следующей главе.
Вот как это сделать:
Это так, что у нас на самом деле есть сообщение для визуализации на следующем шаге.
Шаг 6: рендеринг реальных сообщений чата
Теперь давайте вернемся к нашему index.js Файл и храните эти четыре идентификатора в качестве переменных в верхней части нашего файла.
Вот мои, но я рекомендую вам создать свой собственный:
const instanceLocator = "v1:us1:dfaf1e22-2d33-45c9-b4f8-31f634621d24"
const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"
const username = "perborgen"
const roomId = 9796712
И с этим на месте мы наконец готовы подключиться к Chatkit. Это произойдет в Приложение Компонент, а более конкретно в ComponentDidmount метод. Это метод, который вы должны использовать при подключении компонентов RACT.JS к API.
Сначала мы создадим Чатманагер :
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]
})
}
}
})
})
}
Это дает нам доступ к CUNCEUSER Объект, который является интерфейсом для взаимодействия с API.
Примечание. Как нам нужно будет использовать CUNCEUSER Позже, хорошо хранить его на экземпляре, делая this.currentUser = `` Currentuser Отказ
Тогда мы звоним CUNCEUSER.SUBSCRIBETOROOM () и пропустите наши витрин и OnnewMessage крюк.
OnnewMessage Крючок срабатывает каждый раз, когда новое сообщение транслируется в чате. Так что каждый раз, когда это происходит, мы просто добавим новое сообщение в конце Это .state.messages Отказ
Это приводит к получению данных приложения из API, а затем выводит его на странице.
Это круто, так как у нас сейчас есть скелет для нашего подключения клиента.
Woohoo!
Шаг 7: Обработка ввода пользователя
Следующее, что нам нужно будет создать, это Sendmessageform составная часть. Это будет так называемое Управляемый компонент , означает, что компонент контролирует то, что оказывается на входном поле через его состояние.
Посмотрите на Render () Способ и уделять особое внимание линиям, которые я подчеркнул:
class SendMessageForm extends React.Component {
render() {
return (
)
}
}
Мы делаем две вещи:
- Прослушивание пользовательских входов с
OnchangeСлушатель событий, чтобы мы могли триггерHandleChangeметод - Установка
ценностьполя ввода явно используютthis.state.message.
Соединение между этими двумя шагами найден внутри HandleChange метод. Он просто обновляет состояние любые типы пользователей в поле ввода:
handleChange(e) {
this.setState({
message: e.target.value
})
}
Это вызывает повторное визуализацию, и поскольку поле ввода явно устанавливается из состояния, используя значение = {this.state.message} входное поле будет обновлено.
Так что, хотя приложение чувствует себя мгновенно для пользователя, когда они вводит что-то в поле ввода, Данные фактически проходят через состояние до обновления UI.
Чтобы завернуть эту функцию, нам нужно дать компонент A Конструктор Отказ В нем мы оба инициализируем состояние и связываем это В HandleChange Метод:
constructor() {
super()
this.state = {
message: ''
}
this.handleChange = this.handleChange.bind(this)
}
Нам нужно связать HandleChange метод, чтобы у нас будет доступ к это ключевое слово внутри этого. Вот как работает JavaScript: это Ключевое слово по умолчанию undefined внутри тела функции.
Шаг 8: Отправка сообщений
Наше Sendmessageform Компонент почти закончен, но нам также нужно позаботиться о представлении формы. Нам нужно извлечь сообщения и отправить их!
Чтобы сделать это, мы будем зацепить Handlesubmit Даже обработчик с OnsUbmit Слушатель событий в <ФОРМА> Отказ
render() {
return (
)
}
Как у нас есть значение входного поля, хранящегося в this.state.message На самом деле это довольно легко пройти правильные данные вместе с представлением. Мы будем Просто сделать:
handleSubmit(e) {
e.preventDefault()
this.props.sendMessage(this.state.message)
this.setState({
message: ''
})
}
Здесь мы называем SendMessage опоры и проезжая в this.state.message как параметр. Вы можете быть немного запутанным этим, так как мы не создали SendMessage метод еще. Тем не менее, мы сделаем это в следующем разделе, как этот метод живет внутри Приложение составная часть. Так не волнуйся!
Во-вторых, мы очищаем поле ввода, установив this.state.message к пустой строке.
Вот весь Sendmessageform составная часть. Обратите внимание, что мы также связали это к 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 (
)
}
}
Шаг 9: Отправка сообщений в Chatkit
Теперь мы готовы, поэтому отправьте сообщения в Chatkit. Это сделано в Приложение Компонент, где мы создадим метод под названием this.sendmessage :
sendMessage(text) {
this.currentUser.sendMessage({
text: text,
roomId: roomId
})
}
Требуется один параметр (текст), и он просто звонит this.currentUser.sendmessage () Отказ
Последний шаг – передать это до
/* App component */
render() {
return (
И с этим мы передали обработчик, так что Sendmessageform может вызывать его, когда форма представлена.
Шаг 10: Создание заголовка компонента
Чтобы закончить, давайте также создадим заголовка компонента. Это просто простой функциональный компонент, что означает функцию, которая возвращает выражение JSX.
function Title() {
return My awesome chat app
}
Это хорошая практика для использования функциональных компонентов, поскольку у них больше ограничений, чем компоненты класса, что делает их менее склонными к ошибкам.
Результат
И с этим на месте у вас есть собственное приложение чата, которое вы можете использовать для общения с друзьями!
Дайте себе погладить на спину, если вы закодировали до самого конца.
Если вы хотите узнать, как построить дальше на этом примере, Затем проверьте мой бесплатный курс, как создать приложение для чата с реакцией здесь.
Спасибо за чтение и счастливое кодирование:)