Автор оригинала: Flavio Copes.
В этом руководстве я собираюсь построить основной Чат комната. Каждый пользователь, который подключается к серверу зарегистрирован при подключении, получает имя пользователя, а затем может писать сообщения, которые транслируются на каждый подключенный клиент.
Приложение является распределенным приложением, построенным с использованием A Node.js Сервер и клиент браузера встроен в Реагировать Управляющие данные с использованием Redux и побочные эффекты с Redux-Saga Отказ
Клиент-сервер связи обрабатывается через Websockets Отказ
Полный исходный код для этого приложения Доступен здесь Отказ
Инициализируйте приложение Create-React-App
Давайте начнем проект, используя Create-React-App QuickStarter, Create-React-App чат
Как только это сделано, CD В папке приложения и запустите пряжа Начните
Макет приложений в чате
Наше приложение будет иметь этот базовый макет, который очень распространен в чате приложения:
Для этого нам нужно создать статическую версию чата, используя обычную HTML и CSS, что является минимальным, макетом чата в стиле ретро с помощью CSS.
Код очень прост:
Результатом является боковая панель, которая пройдет список пользователей и основную область с новым окном сообщений в нижней части экрана:
Добавьте Redux для управления состоянием
Теперь давайте поговорим о данных.
Мы будем управлять государством, используя Redux Отказ
Установите Redux и React-Redux с пряжа Добавить Redux React-redux Отказ Тогда мы можем перевести базовый HTML-макет, который мы добавили сверху и подготовим его, чтобы заполнить компоненты, которые мы создадим позже:
Мы включаем Боковая панель , MessageList , и Addmessage компоненты.
У них все есть:
- презентационный компонент, который управляет пользовательским интерфейсом
- компонент контейнеров, который управляет своим поведением и данными, что презентационный компонент покажет
Давайте отредактируем основное приложение index.js Файл для инициализации Redux, затем импортировать Чат Редуктор, а затем создать магазин Отказ
Вместо того, чтобы рассказывать реагировать для рендера <Приложение />, Введите PR явдер, который делает магазин доступен всем компонентам приложение, без явного прохождения я до.
Далее Действия Отказ
Введите константы действий в ActionTypes.js Файл, чтобы мы могли легко ссылаться на них в других файлах:
Этот файл содержит четыре действия, которые питают наш чат. Вы можете добавить новое сообщение, и в чате можно добавить новый пользователь. Новое сообщение может быть отправлено, и сервер отправит обновления в список пользователей, когда человек присоединяется или выходит из чата.
Когда создано новое сообщение, я сейчас заставляю автор имени «мне». ” Мы добавим имена пользователей позже.
Редукторы Позаботьтесь о создании нового состояния, когда действие будет отправлено. Особенно:
- Когда Сообщение добавляется нами, Добавляем его в (локальный) список сообщений
- Когда Мы получаем сообщение С сервера мы добавляем его в наш список сообщений
- Когда Мы добавляем пользователя (Мы сами), мы положили его в пользователей список
- Когда Мы получаем обновленные списка пользователей С сервера, Мы освежим
Давайте погрузимся в компоненты, которые будут представлять эти данные и вызвать действия, начиная с Addmessage :
Этот функциональный компонент очень прост, и создает вход поле в # New-message раздел. Когда Введите Ключ нажата, мы отправляем addmessage Действие, проходящее значение входного поля.
Далее: Сообщение составная часть. Это делает одно сообщение чата, используя Автор: сообщение формат:
Это оказывается MessageList Компонент, который итерации по поводу списка сообщений:
Боковая панель Компонент вместо этого итерации по поводу каждого пользователя и печатает имя пользователя для каждого пользователя, который присоединяется к чату:
Мы генерируем компоненты контейнера для вышеуказанных презентационных компонентов, используя Подключиться () Функция, предоставленная React-redux :
Этот код дает нам этот приятный результат. Когда мы введем сообщение и нажмите Enter, он добавляется в список сообщений:
Добавляя себя в список пользователей
Боковая панель должна показать список пользователей. В частности, с тех пор приложение никому не разговаривает, мы должны увидеть Я в боковой панели. Позже мы добавим дополнительные люди, которые присоединяются к чату. У нас уже есть AddUser Redux Action, так что это вопрос называть его в нашем index.js Файл после инициализации магазина:
Тестирование
Давайте добавим автоматические тесты, чтобы убедиться, что все работает правильно и продолжает правильно работать в будущем, когда добавляем больше функций.
Так как я использую Create-React-App , Jest уже доступен для использования, и я могу просто начать добавлять тесты. Чтобы все было простым, добавляю тестовый файл в папку, содержащую тестируемый файл.
Мы начинаем с тестирования наших действий:
И мы также можем проверить наши редукторы:
Мы также добавляем некоторые основные тесты для наших презентационных компонентов:
Добавление части сервера
Чат, который является местный и не общается с сетью, откровенно, не очень интересное место для проведения времени. Давайте создадим централизованный сервер, в котором пользователи войдут, а где они могут поговорить друг с другом.
Я буду использовать родной объект WebSocket В браузере, который широко поддерживается, а WS Websocket Библиотека На сервере Node.js.
Начнем с сервера, который является Super Simple:
Как только клиент соединяет, мы начнем слушать Add_user и Add_message События. Когда клиент устанавливает соединение, он отправит Add_user событие с именем. Мы будем Добавьте его в список пользователей на стороне сервера и Выдавать трансляцию всем связанным клиентам.
Когда Add_message Событие отправляется, Мы транслировали это всем связанным клиентам Отказ
На связи закрыть, мы Удалить пользователя Имя из списка и транслируйте новый список пользователей.
На стороне клиента нам нужно Инициализировать Websocket Объект и отправить Add_user событие, когда мы подключаемся к чату. Тогда Мы слушаем Add_user а также Add_message События трансляция сервером:
Мы импортируем setupsocket () от главного index.js файл.
Теперь нам нужно представить путь к обрабатывать побочные эффекты В наш код и обрабатывать создание события Websocket, когда пользователь вносит сообщение, поэтому его можно транслировать всем подключенным клиентам.
Чтобы выполнить эту операцию чистым способом, мы собираемся использовать Redux-Saga , библиотека, которая обеспечивает хороший способ обрабатывать побочные эффекты в Redux/React.
Начните с пряжа добавить redux- сага
Мы инициализируем Redux-Saga промежуточное программное обеспечение и подключить его к магазину Redux, чтобы крюкнуть наш Сага :
Redux-Saga это Redux промежуточное ПО Поэтому нам нужно инициализировать его во время создания магазина. Как только это сделано, мы запускаем промежуточное программное обеспечение, и мы передаем имя пользователя и Отправка функция. Перед тем как это делать, мы инициализируем сокет, чтобы мы могли ссылаться на него в сагу.
Ранее пользователь назывался «я», но не приятно, если каждый пользователь звонит себе «я». Так что я добавил Динамический генератор имени пользователя , используя Chance.js Отказ Каждый раз, когда мы войти в систему, у нас есть уникальное имя, созданное для нас, импортируя Utils/name. :
Давайте теперь погрузимся в нашу Сага :
Концептуально это очень просто. Мы принимаем все действия типа Add_message И когда происходит это действие, мы отправляем сообщение на Websocket, передавая действие и некоторые детали. Сообщение чата, отправленное нашим пользователем, может быть отправлено всем подключенным клиентам с помощью сервера.
Здесь мы добираемся до окончательного результата, а ниже вы можете увидеть GIF, который показывает, как работает чат с несколькими подключенными клиентами. Мы можем открыть столько Windows, как мы хотим, и как только мы загрузим URL-адрес сервера, мы будем подключаться к новому имени пользователя для чата. Мы не видим прошлых сообщений, таких как в IRC, но мы увидим каждое сообщение, написанное с момента входа в систему.
Как только мы уходим, наше имя пользователя удалено, а другие люди в чате могут продолжать чат.
Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a/”