ЛЕСКАТ! | В реальном времени мессенджер | Pern-Graphql
Приложение чата в реальном времени, сделанное с Pern + GraphQL - включает в себя частные, глобальные и групповые сообщения
Демо
Развернуто на NetLify (Front-Tend) и Heroku (Back-End)
Построен с помощью
Внешний интерфейс
- Reactjs - Frontend Framework
- Apollo Client - Библиотека управления государством для управления локальными и удаленными данными с GraphQL
- Подписки Apollo - Получите обновления в режиме реального времени от вашего сервера GraphQL
- Контекст API с крючками - для состояния пользователя, выбранного чата, тостов, тема, тема и т. Д.
- React Router - для общей маршрутизации и навигации
- React Crow Form - для гибких форм
- Материал -UI с множеством настройки CSS - библиотека пользовательского интерфейса
- Да - для проверки формы
- Date -FNS - для манипулирования и форматирования дат
Бэк-Энд
- Node.js - среда времени выполнения для JS
- Apollo Server - для создания самостоятельного документирования API -сервера GraphQL
- Подписки Apollo - Подписки - это операции GraphQL, которые смотрят события, излучаемые с Apollo Server.
- PostgreSQL - база данных SQL Opens -SQL для хранения данных
- Scentize - Nodejs ORM для баз данных на основе SQL
- JSON Web Token - стандарт для обеспечения/аутентификации HTTP -запросов
- Bcrypt.js - для хэширующих паролей
- Dotenv - для загрузки переменных среды из файла .env
Функции
- Аутентификация (вход в систему/ регистр с именем пользователя и паролем)
- Чат в реальном времени с помощью веб-нок
- Частные сообщения со всеми зарегистрированными пользователями
- Глобальный канал для всех пользователей в одном чате
- Создание групп с выбранными пользователями
- Пользователи могут уйти из группы после добавления
- Создатель группы может добавить/удалить участников из группы
- Создатель группы может удалить группу, и ее сообщения вместе с ней
- Создатель группы может переименовать имя указанной группы
- Управление ошибками с описательными сообщениями
- Тосты уведомлений о действиях: создание групп, удаление пользователей и т. Д.
- Загрузка прядильщиков для соответствующих процессов извлечения
- Отформатированные даты для добавления/обновления вопросов/ответов/комментариев
- Темный режим переключатель с локальным сохранением хранения
- Правильный отзывчивый пользовательский интерфейс для всех экранов
Скриншоты
Настольный компьютер/планшет
Мобильный
Использование
Env Переменная:
Создайте файл .env в каталоге сервера и добавьте следующее:
PORT = 4000
JWT_SECRET = "Your JWT secret"
Клиент:
Откройте клиент/src/backendurls.js и изменить объект "Backendurls" на:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
Запустите сервер разработки клиентов:
cd client
npm install
npm start
Сервер:
Откройте Server/config/config.json и обновите значения ключей разработки, чтобы соответствовать вашим локальным учетным данным PostgreSQL.
Установите «Sedize-Cli» и «Nodemon» как глобальные пакеты, если вы еще этого не сделали.
Запустите эту команду, чтобы перенести таблицу SQL в свой собственный локальный PSQL: sequelize db:migrate
Запустите сервер разработки бэкэнд:
cd server
npm install
npm run dev
