/practics

Primary LanguageJavaScriptMIT LicenseMIT

practics

Разворачиваем бек часть из server/chat - будет разположен по адресу http://localhost:3000/ это сервис чата (сообщения не живут, видны только если был в сети, после будем расширяться) суть работы чата:

  1. вводим имя - как будет видно в системе
  2. вводим текст сообщения - наши последующие сообщения (сейчас можно проверить работу, допустим зайдя несколькими пользователями с разных браузеров)

так же есть репозиторий https://github.com/kucenko/practics , он разделен на 2 части:

  1. client - это папка с react частью сайта которая предназначена на web
  2. server - это nodejs приложения

в каждой папке будут еще подпапки - в зависимости от исследуемой задачи, сейчас там находится папка chat - то что мы изучаем

Предписание: в папке client/chat/ есть скелет web приложения, уже настроенный на удаленный сервис, после запуска будет видит стандартный скелет от create-react-app После запуска в консоле появятся сообщения, 1 - подключился пользователь, 2 - отправилось сообщения, визуально можно посмотреть на http://localhost:3000/ (не забываем что сообщения не сохраняются, потому сервер должен быть открыт первым)

Задание:

  1. изучить работы с WebSocket client/chat/src/App.js (в client/chat/src/utils/ws.js есть описание методов)
  2. попробовать отобразить информацию которая приходит в ws в теле компонента (при этом заготовку можно удалить)
  3. попробовать отправить сообщение, при этом нужно учесть, что первое сообщение - это заполнение имени пользователя

вспомогательная литература:

  1. https://code.tutsplus.com/ru/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541
  2. https://getinstance.info/articles/react/react-and-es6-part2/
  3. https://reactjs.org/tutorial/tutorial.html