web/README.md

FromChat Web Client — веб-приложение для обмена сообщениями

Read in other languages: English

Веб-клиент для FromChat мессенджера

🌐 Веб-клиент • 🖥️ Backend • 📱 Android • 🌍 Website

---

📝 Описание

Веб-клиент FromChat — это React приложение для обмена сообщениями через браузер. Это современный интерфейс для доступа к серверу FromChat.

---

📊 Сравнение клиентов

Возможность	Android	Веб	iOS
Обмен сообщениями и профили	✅	✅	✅
Голосовые/видеозвонки	✅	❌	❌
Совместное использование экрана	✅	❌	❌
Реакции на сообщения	❌	✅	❌
Расширенная поддержка вложений	✅	❌	❌

Примечание: Лендинг-страницы и юридические документы находятся в отдельном репозитории fromchat-messenger/site.

---

✨ Возможности

• Защищённые сообщения — легальное шифрование сообщений
• Реакции на сообщения — уникальная функция веб-клиента
• Управление профилем — обновление данных пользователя
• Управление устройствами — контроль активных сеансов
• Публичные чаты — присоединяйтесь к сообществам
• WebSocket — реал-тайм обновления
• Тёмный режим — удобно для глаз
• Открытый исходный код — полная прозрачность

---

🏗️ Технологический стек

Компонент	Версия
React	19
TypeScript	последняя
Vite	последняя
MDUI	Material Design
Zustand	управление состоянием
Framer Motion	анимации
TweetNaCl.js	криптография

---

🔒 Безопасность

• Шифрование сообщений — легальное серверное шифрование
• WebSocket SSL/TLS — безопасное соединение
• Управление токенами — безопасное хранение JWT
• CORS — защита от межсайтовых запросов
• Открытый исходный код — полная прозрачность

---

🔧 Разработка

Требования

• Node.js 20+
• npm
• Backend API работает на http://localhost:8300

Быстрый старт

1. Клонировать репозиторий:

git clone https://github.com/fromchat-messenger/web.git
cd web

2. Установить зависимости:

npm install

3. Настроить .env:

cp .env.example .env

Отредактируйте .env:

# Backend API
VITE_API_URL=http://localhost:8300
VITE_WS_URL=ws://localhost:8300

# App settings
VITE_APP_NAME=FromChat
VITE_APP_VERSION=1.0.0

4. Запустить dev-сервер:

npm run dev

Веб-клиент будет доступен на http://localhost:8304

5. Открыть в браузере:

Перейдите на http://localhost:8304 и войдите с учётными данными.

Команды

# Dev сервер (с горячей перезагрузкой)
npm run dev

# Type checking (TypeScript)
npm run typecheck

# Build для production
npm run build

# Preview production build
npm run preview

# Lint (проверка стиля кода)
npm run lint

Структура проекта

web/
├── src/
│   ├── pages/              # Страницы приложения
│   │   ├── auth/           # Аутентификация (вход, регистрация)
│   │   ├── chat/           # Интерфейс чата
│   │   └── profile/        # Профиль пользователя
│   ├── core/               #核心业务逻辑
│   │   ├── api/            # API клиент
│   │   ├── calls/          # Интеграция WebRTC/LiveKit
│   │   ├── websocket.ts    # WebSocket менеджер
│   │   └── types.d.ts      # TypeScript определения
│   ├── state/              # Zustand stores
│   ├── utils/              # Вспомогательные функции
│   └── css/                # SCSS модули (Material Design)
├── vite.config.ts          # Конфигурация Vite
├── .env.example            # Пример переменных окружения
└── package.json            # Зависимости

API Configuration

Backend API можно подключить через .env:

# Development
VITE_API_URL=http://localhost:8300
VITE_WS_URL=ws://localhost:8300

# Production
VITE_API_URL=https://api.fromchat.ru
VITE_WS_URL=wss://api.fromchat.ru

API поддерживает оба варианта URL:

• /api/endpoint
• /endpoint (без префикса)

Оба варианта работают одинаково.

---

🐳 Docker

Build image

docker build -t fromchat-web:latest .

Run container

docker run -p 8304:8304 \
  -e VITE_API_URL=http://localhost:8300 \
  -e VITE_WS_URL=ws://localhost:8300 \
  fromchat-web:latest

Production с Caddy

Веб-клиент автоматически маршрутизируется на web.fromchat.ru при использовании Caddy.

---

🤝 Внесение вклада

Приветствуются внесение вклада! Пожалуйста:

1. Создайте ветку для вашей функции
2. Отправьте пулл-реквест с описанием
3. Убедитесь, что TypeScript проверка проходит: npm run typecheck

---

📄 Лицензия

Этот проект лицензирован в соответствии с лицензией GNU Affero General Public License v3.0. Подробности см. в файле LICENSE.

---

🔗 Связанные репозитории

• Backend API — Python FastAPI сервер
• Android Client — Android приложение
• Website — Лендинг и юридические страницы

---

❓ Часто задаваемые вопросы

Q: Как я могу использовать веб-клиент? A: Откройте http://localhost:8304 в браузере и войдите с учётными данными FromChat.

Q: Какой браузер поддерживается? A: Chrome, Firefox, Safari, Edge (последние версии).

Q: Поддерживаются ли видеозвонки? A: Нет, видеозвонки доступны только в Android клиенте. Используйте Android для звонков.

Q: Как сообщить об ошибке? A: Откройте issue на GitHub с описанием проблемы, шагами воспроизведения и скриншотами.

---

⬆ вернуться к началу