mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
New README
This commit is contained in:
+251
@@ -0,0 +1,251 @@
|
||||
# FromChat Web Client — Messaging Web App
|
||||
|
||||
[Читать на других языках: Русский](./README.md)
|
||||
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/fromchat-messenger/android/main/app/android/src/main/ic_launcher-playstore.png" width="120" alt="FromChat Logo" />
|
||||
|
||||
**Web client for FromChat messenger**
|
||||
|
||||
[🌐 Web Client](https://github.com/fromchat-messenger/web) • [🖥️ Backend](https://github.com/fromchat-messenger/backend) • [📱 Android](https://github.com/fromchat-messenger/android) • [🌍 Website](https://github.com/fromchat-messenger/site)
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 📝 Description
|
||||
|
||||
FromChat Web Client is a React application for messaging via browser. It's a modern interface for accessing the FromChat server.
|
||||
|
||||
---
|
||||
|
||||
## 📊 Client Comparison
|
||||
|
||||
| Feature | Android | Web | iOS |
|
||||
|---|---|---|---|
|
||||
| **Messaging & Profiles** | ✅ | ✅ | ✅ |
|
||||
| **Voice/Video Calls** | ✅ | ❌ | ❌ |
|
||||
| **Screen Sharing** | ✅ | ❌ | ❌ |
|
||||
| **Message Reactions** | ❌ | ✅ | ❌ |
|
||||
| **Rich Attachment Support** | ✅ | ❌ | ❌ |
|
||||
|
||||
**Note:** Landing pages and legal documents are in a separate repository [fromchat-messenger/site](https://github.com/fromchat-messenger/site).
|
||||
|
||||
---
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- **Protected Messages** — legal message encryption
|
||||
- **Message Reactions** — unique to the web client
|
||||
- **Profile Management** — update user data
|
||||
- **Device Management** — control active sessions
|
||||
- **Public Chats** — join communities
|
||||
- **WebSocket** — real-time updates
|
||||
- **Dark Mode** — easy on the eyes
|
||||
- **Open Source** — full transparency
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Tech Stack
|
||||
|
||||
| Component | Version |
|
||||
|---|---|
|
||||
| React | 19 |
|
||||
| TypeScript | latest |
|
||||
| Vite | latest |
|
||||
| MDUI | Material Design |
|
||||
| Zustand | state management |
|
||||
| Framer Motion | animations |
|
||||
| TweetNaCl.js | cryptography |
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Security
|
||||
|
||||
- **Message Encryption** — legal server-side encryption
|
||||
- **WebSocket SSL/TLS** — secure connection
|
||||
- **Token Management** — secure JWT storage
|
||||
- **CORS** — cross-site request protection
|
||||
- **Open Source** — full transparency
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Development
|
||||
|
||||
### Requirements
|
||||
|
||||
- Node.js 20+
|
||||
- npm
|
||||
- Backend API running on `http://localhost:8300`
|
||||
|
||||
### Quick Start
|
||||
|
||||
**1. Clone repository:**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/fromchat-messenger/web.git
|
||||
cd web
|
||||
```
|
||||
|
||||
**2. Install dependencies:**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
**3. Configure .env:**
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Edit `.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. Start dev server:**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Web client will be available at `http://localhost:8304`
|
||||
|
||||
**5. Open in browser:**
|
||||
|
||||
Go to `http://localhost:8304` and log in.
|
||||
|
||||
### Commands
|
||||
|
||||
```bash
|
||||
# Dev server (with hot reload)
|
||||
npm run dev
|
||||
|
||||
# Type checking (TypeScript)
|
||||
npm run typecheck
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
|
||||
# Lint (code style check)
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
web/
|
||||
├── src/
|
||||
│ ├── pages/ # Application pages
|
||||
│ │ ├── auth/ # Authentication (login, register)
|
||||
│ │ ├── chat/ # Chat interface
|
||||
│ │ └── profile/ # User profile
|
||||
│ ├── core/ # Core business logic
|
||||
│ │ ├── api/ # API client
|
||||
│ │ ├── calls/ # WebRTC/LiveKit integration
|
||||
│ │ ├── websocket.ts # WebSocket manager
|
||||
│ │ └── types.d.ts # TypeScript definitions
|
||||
│ ├── state/ # Zustand stores
|
||||
│ ├── utils/ # Utility functions
|
||||
│ └── css/ # SCSS modules (Material Design)
|
||||
├── vite.config.ts # Vite configuration
|
||||
├── .env.example # Example environment variables
|
||||
└── package.json # Dependencies
|
||||
```
|
||||
|
||||
### API Configuration
|
||||
|
||||
Connect to the backend API via `.env`:
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
The API supports both URL variants:
|
||||
- `/api/endpoint`
|
||||
- `/endpoint` (without prefix)
|
||||
|
||||
Both work identically.
|
||||
|
||||
---
|
||||
|
||||
## 🐳 Docker
|
||||
|
||||
### Build image
|
||||
|
||||
```bash
|
||||
docker build -t fromchat-web:latest .
|
||||
```
|
||||
|
||||
### Run container
|
||||
|
||||
```bash
|
||||
docker run -p 8304:8304 \
|
||||
-e VITE_API_URL=http://localhost:8300 \
|
||||
-e VITE_WS_URL=ws://localhost:8300 \
|
||||
fromchat-web:latest
|
||||
```
|
||||
|
||||
### Production with Caddy
|
||||
|
||||
Web client is automatically routed to `web.fromchat.ru` when using Caddy.
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
Contributions are welcome! Please:
|
||||
|
||||
1. Create a branch for your feature
|
||||
2. Submit a pull request with description
|
||||
3. Ensure TypeScript checks pass: `npm run typecheck`
|
||||
|
||||
---
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is licensed under the GNU Affero General Public License v3.0. See [LICENSE](./LICENSE) for details.
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Related Repositories
|
||||
|
||||
- [Backend API](https://github.com/fromchat-messenger/backend) — Python FastAPI server
|
||||
- [Android Client](https://github.com/fromchat-messenger/android) — Android application
|
||||
- [Website](https://github.com/fromchat-messenger/site) — Landing & legal pages
|
||||
|
||||
---
|
||||
|
||||
## ❓ FAQ
|
||||
|
||||
**Q: How do I use the web client?**
|
||||
A: Open `http://localhost:8304` in your browser and log in with FromChat credentials.
|
||||
|
||||
**Q: Which browsers are supported?**
|
||||
A: Chrome, Firefox, Safari, Edge (latest versions).
|
||||
|
||||
**Q: Are video calls supported?**
|
||||
A: No, video calls are only available in the Android client. Use Android for calls.
|
||||
|
||||
**Q: How do I report a bug?**
|
||||
A: Open an issue on GitHub with a description, reproduction steps, and screenshots.
|
||||
|
||||
---
|
||||
|
||||
**[⬆ back to top](#fromchat-web-client--messaging-web-app)**
|
||||
@@ -1,31 +1,251 @@
|
||||
# FromChat
|
||||
# FromChat Web Client — веб-приложение для обмена сообщениями
|
||||
|
||||
FromChat - полностью открытый мессенджер.
|
||||
[Read in other languages: English](./README.en.md)
|
||||
|
||||
Его можно попробовать на [сайте](http://fromchat.ru).
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/fromchat-messenger/android/main/app/android/src/main/ic_launcher-playstore.png" width="120" alt="FromChat Logo" />
|
||||
|
||||
## Содержание:
|
||||
**Веб-клиент для FromChat мессенджера**
|
||||
|
||||
- [Основные моменты](#highlights)
|
||||
- [Использование](#usage)
|
||||
- [Часто задаваемые вопросы](#faq)
|
||||
- [Внос вклада](#contributing)
|
||||
[🌐 Веб-клиент](https://github.com/fromchat-messenger/web) • [🖥️ Backend](https://github.com/fromchat-messenger/backend) • [📱 Android](https://github.com/fromchat-messenger/android) • [🌍 Website](https://github.com/fromchat-messenger/site)
|
||||
</div>
|
||||
|
||||
## Основные моменты
|
||||
---
|
||||
|
||||
- Написан на HTML, SCSS, TypeScript (фронтэнд) и Python (бэкэнд).
|
||||
- 100% открытый исходный код позволяет настроить вид и поведение мессенджера полностью под себя.
|
||||
## 📝 Описание
|
||||
|
||||
## Использование
|
||||
Веб-клиент FromChat — это React приложение для обмена сообщениями через браузер. Это современный интерфейс для доступа к серверу FromChat.
|
||||
|
||||
*В разработке.*
|
||||
---
|
||||
|
||||
## Часто задаваемые вопросы
|
||||
## 📊 Сравнение клиентов
|
||||
|
||||
| Возможность | Android | Веб | iOS |
|
||||
|---|---|---|---|
|
||||
| **Обмен сообщениями и профили** | ✅ | ✅ | ✅ |
|
||||
| **Голосовые/видеозвонки** | ✅ | ❌ | ❌ |
|
||||
| **Совместное использование экрана** | ✅ | ❌ | ❌ |
|
||||
| **Реакции на сообщения** | ❌ | ✅ | ❌ |
|
||||
| **Расширенная поддержка вложений** | ✅ | ❌ | ❌ |
|
||||
|
||||
**Примечание:** Лендинг-страницы и юридические документы находятся в отдельном репозитории [fromchat-messenger/site](https://github.com/fromchat-messenger/site).
|
||||
|
||||
*В разработке.*
|
||||
---
|
||||
|
||||
## Внос вклада
|
||||
## ✨ Возможности
|
||||
|
||||
Внести свой вклад в разработку FromChat можно при помощи pull request или вступления в нашу команду. Заявку на вступление в команду можно оставить [здесь](https://t.me/denis0001-dev).
|
||||
- **Защищённые сообщения** — легальное шифрование сообщений
|
||||
- **Реакции на сообщения** — уникальная функция веб-клиента
|
||||
- **Управление профилем** — обновление данных пользователя
|
||||
- **Управление устройствами** — контроль активных сеансов
|
||||
- **Публичные чаты** — присоединяйтесь к сообществам
|
||||
- **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. Клонировать репозиторий:**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/fromchat-messenger/web.git
|
||||
cd web
|
||||
```
|
||||
|
||||
**2. Установить зависимости:**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
**3. Настроить .env:**
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Отредактируйте `.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-сервер:**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Веб-клиент будет доступен на `http://localhost:8304`
|
||||
|
||||
**5. Открыть в браузере:**
|
||||
|
||||
Перейдите на `http://localhost:8304` и войдите с учётными данными.
|
||||
|
||||
### Команды
|
||||
|
||||
```bash
|
||||
# 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`:
|
||||
|
||||
```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
|
||||
|
||||
```bash
|
||||
docker build -t fromchat-web:latest .
|
||||
```
|
||||
|
||||
### Run container
|
||||
|
||||
```bash
|
||||
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](./LICENSE).
|
||||
|
||||
---
|
||||
|
||||
## 🔗 Связанные репозитории
|
||||
|
||||
- [Backend API](https://github.com/fromchat-messenger/backend) — Python FastAPI сервер
|
||||
- [Android Client](https://github.com/fromchat-messenger/android) — Android приложение
|
||||
- [Website](https://github.com/fromchat-messenger/site) — Лендинг и юридические страницы
|
||||
|
||||
---
|
||||
|
||||
## ❓ Часто задаваемые вопросы
|
||||
|
||||
**Q: Как я могу использовать веб-клиент?**
|
||||
A: Откройте `http://localhost:8304` в браузере и войдите с учётными данными FromChat.
|
||||
|
||||
**Q: Какой браузер поддерживается?**
|
||||
A: Chrome, Firefox, Safari, Edge (последние версии).
|
||||
|
||||
**Q: Поддерживаются ли видеозвонки?**
|
||||
A: Нет, видеозвонки доступны только в Android клиенте. Используйте Android для звонков.
|
||||
|
||||
**Q: Как сообщить об ошибке?**
|
||||
A: Откройте issue на GitHub с описанием проблемы, шагами воспроизведения и скриншотами.
|
||||
|
||||
---
|
||||
|
||||
**[⬆ вернуться к началу](#fromchat-web-client--веб-приложение-для-обмена-сообщениями)**
|
||||
|
||||
Reference in New Issue
Block a user