FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 11:05:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix README

Browse Source
This commit is contained in:
denis0001-dev
2026-07-16 00:06:06 +03:00
Unverified
parent d821afa66b
commit 5be4bb9b2c
2 changed files with 135 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.en.md
+78 -147
View File
@@ -4,9 +4,9 @@
<div align="center"> <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" /> <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 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) [🌐 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> </div>
@@ -14,7 +14,9 @@
## 📝 Description ## 📝 Description
FromChat Web Client is a React application for messaging via browser. It's a modern interface for accessing the FromChat server. FromChat Web is a React/TypeScript client (browser and Electron) for the FromChat server.
**Note:** Landing pages and legal documents live in [fromchat-messenger/site](https://github.com/fromchat-messenger/site).
--- ---
@@ -22,50 +24,41 @@ FromChat Web Client is a React application for messaging via browser. It's a mod
| Feature | Android | Web | iOS | | Feature | Android | Web | iOS |
|---|---|---|---| |---|---|---|---|
| **Messaging & Profiles** | ✅ | ✅ | ✅ | | **Messaging & profiles** | ✅ | ✅ | ❌ |
| **Voice/Video Calls** | ✅ | ❌ | ❌ | | **Voice/video calls** | ✅ | ✅ | ❌ |
| **Screen Sharing** | ✅ | ❌ | ❌ | | **Screen sharing** | ✅ | ✅ | ❌ |
| **Message Reactions** | ❌ | ✅ | ❌ | | **Message reactions** | ❌ | ✅ | ❌ |
| **Rich Attachment Support** | ✅ | ❌ | ❌ | | **Rich attachment support** | ✅ | ❌ | ❌ |
**Note:** Landing pages and legal documents are in a separate repository [fromchat-messenger/site](https://github.com/fromchat-messenger/site). ⚠️ **iOS is temporarily not supported.**
--- ---
## ✨ Features ## ✨ Features
- **Protected Messages** — legal message encryption - Protected DMs (legal encryption scheme)
- **Message Reactions** — unique to the web client - Voice/video calls and screen sharing
- **Profile Management** — update user data - Message reactions
- **Device Management** — control active sessions - Public chats and profiles
- **Public Chats** — join communities - Device management
- **WebSocket** — real-time updates - WebSocket real-time updates
- **Dark Mode** — easy on the eyes - Dark mode
- **Open Source** — full transparency - Optional Electron desktop build
--- ---
## 🏗️ Tech Stack ## 🏗️ Tech Stack
| Component | Version | | Component | Notes |
|---|---| |---|---|
| React | 19 | | React 19 | UI |
| TypeScript | latest | | TypeScript | strict typing |
| Vite | latest | | Vite 7 | dev server & build |
| MDUI | Material Design | | MDUI | Material Design |
| Zustand | state management | | Zustand + use-immer | state |
| Framer Motion | animations | | Motion | animations |
| TweetNaCl.js | cryptography | | TweetNaCl.js | cryptography |
| Electron | desktop (optional) |
---
## 🔒 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
--- ---
@@ -73,178 +66,116 @@ FromChat Web Client is a React application for messaging via browser. It's a mod
### Requirements ### Requirements
- Node.js 20+ - Node.js 20+ (Docker image uses Node 24)
- npm - npm
- Backend API running on `http://localhost:8300` - Backend API on `http://localhost:8300` (proxied as `/api`)
### Quick Start ### Quick start
**1. Clone repository:**
```bash ```bash
git clone https://github.com/fromchat-messenger/web.git git clone https://github.com/fromchat-messenger/web.git
cd web cd web
```
**2. Install dependencies:**
```bash
npm install npm install
cp .env.example .env # if needed; install may copy it for you
npm run frontend:dev
``` ```
**3. Configure .env:** Open `http://localhost:8301`.
```bash `.env`:
cp .env.example .env
```
Edit `.env`:
```env ```env
# Backend API # HTTP API host (Vite proxy target for /api)
VITE_API_URL=http://localhost:8300 VITE_API_BASE_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:** In the browser the client uses same-origin `/api` (HTTP and WebSocket, e.g. `/api/chat/ws`).
```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 ### Commands
```bash ```bash
# Dev server (with hot reload) npm run frontend:dev # Vite on :8301
npm run dev npm run frontend:typecheck # TypeScript
npm run frontend:build # typecheck + production build → build/normal
# Type checking (TypeScript) npm run frontend:preview # preview built frontend
npm run typecheck npm run frontend:electron:dev # Electron + Vite
npm run frontend:electron:build # Electron package
# Build for production
npm run build
# Preview production build
npm run preview
# Lint (code style check)
npm run lint
``` ```
### Project Structure ### Project structure
``` ```
web/ web/
├── src/ ├── src/
│ ├── pages/ # Application pages │ ├── index.html
│ │ ├── auth/ # Authentication (login, register) │ ├── main/ # React app (@/)
│ │ ├── chat/ # Chat interface │ │ ├── pages/ # auth, chat, profile, …
│ │ └── profile/ # User profile │ │ ├── core/ # API, websocket, calls, …
│ ├── core/ # Core business logic │ │ ├── state/ # Zustand stores
│ │ ├── api/ # API client │ │ ├── utils/
│ │ ├── calls/ # WebRTC/LiveKit integration │ │ └── css/ # SCSS (Material Design)
│ │ ├── websocket.ts # WebSocket manager │ ├── electron/ # Electron main/preload
│ │ └── types.d.ts # TypeScript definitions │ └── protocol/ # shared protocol (@fromchat/protocol)
│ ├── state/ # Zustand stores ├── plugins/ # Vite plugins
│ ├── utils/ # Utility functions ├── vite.config.ts
│ └── css/ # SCSS modules (Material Design) ├── compose.yml # production web image (:8301→80)
├── vite.config.ts # Vite configuration ├── Dockerfile
├── .env.example # Example environment variables ├── .env.example
└── package.json # Dependencies └── package.json
``` ```
### 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 ## 🐳 Docker
### Build image
```bash ```bash
docker build -t fromchat-web:latest . docker build -t fromchat-web:latest .
# or via compose:
docker compose --env-file .env up --build
``` ```
### Run container Container listens on port **8301** (static server on 80 inside).
```bash Production edge (Caddy/HAProxy) is configured via the deployment repo / backend `compose.prod.yml`.
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 ## 🤝 Contributing
Contributions are welcome! Please: 1. Branch for your change
2. Open a PR with a description
1. Create a branch for your feature 3. Ensure `npm run frontend:typecheck` passes
2. Submit a pull request with description
3. Ensure TypeScript checks pass: `npm run typecheck`
--- ---
## 📄 License ## 📄 License
This project is licensed under the GNU Affero General Public License v3.0. See [LICENSE](./LICENSE) for details. GNU Affero General Public License v3.0 — see [LICENSE](./LICENSE).
--- ---
## 🔗 Related Repositories ## 🔗 Related Repositories
- [Backend API](https://github.com/fromchat-messenger/backend) — Python FastAPI server - [Backend API](https://github.com/fromchat-messenger/backend)
- [Android Client](https://github.com/fromchat-messenger/android) — Android application - [Android Client](https://github.com/fromchat-messenger/android)
- [Website](https://github.com/fromchat-messenger/site) — Landing & legal pages - [Website](https://github.com/fromchat-messenger/site)
- [Deployment](https://github.com/fromchat-messenger/deployment)
--- ---
## ❓ FAQ ## ❓ FAQ
**Q: How do I use the web client?** **Q: How do I run locally?**
A: Open `http://localhost:8304` in your browser and log in with FromChat credentials. A: Start the backend on `:8300`, then `npm run frontend:dev` and open `http://localhost:8301`.
**Q: Which browsers are supported?** **Q: Which browsers?**
A: Chrome, Firefox, Safari, Edge (latest versions). A: Current Chrome, Firefox, Safari, Edge.
**Q: Are video calls supported?** **Q: Do calls work on web?**
A: No, video calls are only available in the Android client. Use Android for calls. A: Yes — voice/video and screen share (server needs LiveKit).
**Q: How do I report a bug?** **Q: How do I report a bug?**
A: Open an issue on GitHub with a description, reproduction steps, and screenshots. A: GitHub Issues with reproduction steps.
--- ---
README.md
+57 -191
View File
@@ -2,143 +2,71 @@
[Read in other languages: English](./README.en.md) [Read in other languages: English](./README.en.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" />
**Веб-клиент для FromChat мессенджера**
[🌐 Веб-клиент](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>
---
## 📝 Описание ## 📝 Описание
Веб-клиент FromChat — это React приложение для обмена сообщениями через браузер. Это современный интерфейс для доступа к серверу FromChat. Веб-клиент FromChat — React/TypeScript приложение (браузер и Electron) для работы с сервером FromChat.
--- ## Развернуть в 1 клик
## 📊 Сравнение клиентов ```bash
docker run -d --restart always -p 8301:80 fromchat/web:latest
| Возможность | Android | Веб | iOS | ```
|---|---|---|---|
| **Обмен сообщениями и профили** | ✅ | ✅ | ✅ |
| **Голосовые/видеозвонки** | ✅ | ❌ | ❌ |
| **Совместное использование экрана** | ✅ | ❌ | ❌ |
| **Реакции на сообщения** | ❌ | ✅ | ❌ |
| **Расширенная поддержка вложений** | ✅ | ❌ | ❌ |
**Примечание:** Лендинг-страницы и юридические документы находятся в отдельном репозитории [fromchat-messenger/site](https://github.com/fromchat-messenger/site).
---
## ✨ Возможности ## ✨ Возможности
- **Защищённые сообщения** — легальное шифрование сообщений - Защищённые личные сообщения (легальная схема шифрования)
- **Реакции на сообщения** — уникальная функция веб-клиента - Голосовые/видеозвонки и демонстрация экрана
- **Управление профилем** — обновление данных пользователя - Реакции на сообщения
- **Управление устройствами** — контроль активных сеансов - Публичные чаты и профили
- **Публичные чаты** — присоединяйтесь к сообществам - Управление устройствами
- **WebSocket** — реал-тайм обновления - WebSocket для реал-тайма
- **Тёмный режим** — удобно для глаз - Тёмный режим
- **Открытый исходный код** — полная прозрачность - Сборка Electron (опционально)
---
## 🏗️ Технологический стек ## 🏗️ Технологический стек
| Компонент | Версия | | Компонент | Примечание |
|---|---| |---|---|
| React | 19 | | React 19 | UI |
| TypeScript | последняя | | TypeScript | строгая типизация |
| Vite | последняя | | Vite 7 | dev-сервер и сборка |
| MDUI | Material Design | | MDUI | Material Design |
| Zustand | управление состоянием | | Zustand + use-immer | состояние |
| Framer Motion | анимации | | Motion | анимации |
| TweetNaCl.js | криптография | | TweetNaCl.js | криптография |
| Electron | десктоп (опционально) |
---
## 🔒 Безопасность
- **Шифрование сообщений** — легальное серверное шифрование
- **WebSocket SSL/TLS** — безопасное соединение
- **Управление токенами** — безопасное хранение JWT
- **CORS** — защита от межсайтовых запросов
- **Открытый исходный код** — полная прозрачность
---
## 🔧 Разработка ## 🔧 Разработка
### Требования ### Требования
- Node.js 20+ - Node.js 20+ (для Docker-образа используется Node 24)
- npm - npm
- Backend API работает на `http://localhost:8300` - Backend API на `http://localhost:8300` (проксируется через `/api`)
### Быстрый старт ### Быстрый старт
**1. Клонировать репозиторий:**
```bash ```bash
git clone https://github.com/fromchat-messenger/web.git git clone https://github.com/fromchat-messenger/web.git
cd web cd web
```
**2. Установить зависимости:**
```bash
npm install npm install
cp .env.example .env # при необходимости; install может скопировать сам
npm run frontend:dev
``` ```
**3. Настроить .env:** Откройте `http://localhost:8301`.
```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 ```bash
# Dev сервер (с горячей перезагрузкой) npm run frontend:dev # Vite на :8301
npm run dev npm run frontend:typecheck # TypeScript
npm run frontend:build # typecheck + production build → build/normal
# Type checking (TypeScript) npm run frontend:preview # preview собранного фронта
npm run typecheck npm run frontend:electron:dev # Electron + Vite
npm run frontend:electron:build # сборка Electron
# Build для production
npm run build
# Preview production build
npm run preview
# Lint (проверка стиля кода)
npm run lint
``` ```
### Структура проекта ### Структура проекта
@@ -146,106 +74,44 @@ npm run lint
``` ```
web/ web/
├── src/ ├── src/
│ ├── pages/ # Страницы приложения │ ├── index.html
│ │ ├── auth/ # Аутентификация (вход, регистрация) │ ├── main/ # React-приложение (@/)
│ │ ├── chat/ # Интерфейс чата │ │ ├── pages/ # auth, chat, profile, …
│ │ └── profile/ # Профиль пользователя │ │ ├── core/ # API, websocket, calls, …
│ ├── core/ #核心业务逻辑 │ │ ├── state/ # Zustand stores
│ │ ├── api/ # API клиент │ │ ├── utils/
│ │ ├── calls/ # Интеграция WebRTC/LiveKit │ │ └── css/ # SCSS (Material Design)
│ │ ├── websocket.ts # WebSocket менеджер │ ├── electron/ # main/preload Electron
│ │ └── types.d.ts # TypeScript определения │ └── protocol/ # общий протокол (@fromchat/protocol)
│ ├── state/ # Zustand stores ├── plugins/ # Vite-плагины
│ ├── utils/ # Вспомогательные функции ├── vite.config.ts
│ └── css/ # SCSS модули (Material Design) ├── compose.yml # production-образ веба (:8301→80)
├── vite.config.ts # Конфигурация Vite ├── Dockerfile
├── .env.example # Пример переменных окружения ├── .env.example
└── package.json # Зависимости └── 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 ## 🐳 Docker
### Build image
```bash ```bash
docker build -t fromchat-web:latest . docker compose up --build
``` ```
### Run container Контейнер слушает порт **8301** (внутри nginx/static-server на 80).
```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. Отправьте PR с описанием
1. Создайте ветку для вашей функции 3. Проверьте типы: `npm run frontend:typecheck`
2. Отправьте пулл-реквест с описанием
3. Убедитесь, что TypeScript проверка проходит: `npm run typecheck`
---
## 📄 Лицензия ## 📄 Лицензия
Этот проект лицензирован в соответствии с лицензией GNU Affero General Public License v3.0. Подробности см. в файле [LICENSE](./LICENSE). GNU Affero General Public License v3.0 — см. [LICENSE](./LICENSE).
---
## 🔗 Связанные репозитории ## 🔗 Связанные репозитории
- [Backend API](https://github.com/fromchat-messenger/backend) — Python FastAPI сервер - [Backend API](https://github.com/fromchat-messenger/backend)
- [Android Client](https://github.com/fromchat-messenger/android) — Android приложение - [Android Client](https://github.com/fromchat-messenger/android)
- [Website](https://github.com/fromchat-messenger/site) — Лендинг и юридические страницы - [Website](https://github.com/fromchat-messenger/site)
- [Deployment](https://github.com/fromchat-messenger/deployment)
---
## ❓ Часто задаваемые вопросы
**Q: Как я могу использовать веб-клиент?**
A: Откройте `http://localhost:8304` в браузере и войдите с учётными данными FromChat.
**Q: Какой браузер поддерживается?**
A: Chrome, Firefox, Safari, Edge (последние версии).
**Q: Поддерживаются ли видеозвонки?**
A: Нет, видеозвонки доступны только в Android клиенте. Используйте Android для звонков.
**Q: Как сообщить об ошибке?**
A: Откройте issue на GitHub с описанием проблемы, шагами воспроизведения и скриншотами.
---
**[⬆ вернуться к началу](#fromchat-web-client--веб-приложение-для-обмена-сообщениями)**