Чат на React.js

Чат на React.js как сделать его на стороне клиента
Метки: / /

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

Если же вы хотите знать как разработать back-end для чата, то почитайте одну из этих статей:

Особенно рекомендую посмотреть про Python и JavaScript.

Чат на React.js:

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

Также для начала вам стоит установить React.js, мы сделаем это через NPM, введите эту команду:

После этого создайте файл компонента, и первым делом импортируем в него всё что нам надо:

Как видите мы тут импортировали React, библиотеку W3CWebSocket, для работы с WebSocket, также специальную библиотеку для работы с boostrap в React.

Теперь создаём классовый компонент, делается это примерно так:

Как видите мы этот компонент сразу же экспортируем.

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

Как видите тут у нас храниться сообщения в массиве msgs, и значение input в  msgValue, в остальном тут не чего нет.

Также в конструкторе класса нужно подключиться  серверу по WebSocket:

Первым делом в конструкторе мы берём из пропсов переменную slug, которая хранит в себе номер чата, который мы берём из URL.

Потом создаём объект класса W3CWebSocket для работы со сервером с помощью WebSocket и открываем соединение, последние создаём слушателя, который принимает все сообщения от сервера и сразу сообщение кладём его в state с помощью метода addMessage(), но о нём чуть ниже.

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

Тут мы просто отправляем сообщение через WebSocket которому мы подключились, но перед этим всё превратили в JSON формат.

Теперь посмотрим метод который на оборот принимает сообщение и кладёт их в state:

Как вы помните выше, мы передаём в этот метод то что получаем от сервера, а получаем мы от него данные в JSON формате, поэтому в начале мы должны его парсить.

После через setState(), мы добавляем данные в состояние, но сначала мы создаём массив с одним сообщением, как видите это одно сообщение просто объект, куда мы кладём только текст.

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

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

Примечание:

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

Последние осталось разобрать рендеринг, с ним всё гораздо интереснее, так как в нём кроме самого рендеринга, будет не большая логика.

Вот рендер:

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

Через цикл for мы проходимся по всему массиву состоянию сообщений и кладём их в наш новый массив Messages, потом его уже выводим и возвращаемом в рендере, также делаем не большой input и кнопку отправки формы.

Вывод:

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

Ссылка на файл;
Сcылка на проект;

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую:

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x