Шифрование, GIF, хранилище, админка

This commit is contained in:
Халимов Рустам
2026-03-16 14:49:31 +03:00
parent 336f9ea559
commit 6d018e41ea
44 changed files with 1876 additions and 162 deletions
+51 -44
View File
@@ -1,81 +1,88 @@
# Knot Messenger (Knot)
# SelfHost Messenger
Knot Messenger — это современный, безопасный и многофункциональный мессенджер с открытым исходным кодом, который вы полностью можете развернуть на собственных серверах (self-hosted). Проект разработан на стеке **React + TypeScript + Vite** для фронтенда и **.NET (C#) + PostgreSQL + SignalR** для бэкенда.
SelfHost Messenger — это современный, безопасный и многофункциональный мессенджер с открытым исходным кодом, предназначенный для самостоятельного развертывания на собственных серверах (self-hosted). Проект разработан на стеке **React + TypeScript + Vite** для фронтенда и **.NET (C#) 8/10 + PostgreSQL + MinIO + SignalR** для бэкенда.
## 🚀 Текущий функционал
## 🚀 Основной функционал
Мессенджер обладает функциями полноценной современной платформы общения:
Мессенджер обладает всеми функциями полноценной современной платформы для общения и командной работы:
### Чаты и группы
* **Личные сообщения (P2P):** Обмен сообщениями в реальном времени (на базе SignalR). Текстовые сообщения, статусы прочитанности, индикаторы набора текста (typing).
* **Групповые чаты:** Создание закрытых групп. Настройки группы (название, описание, аватар). Добавление и удаление участников администратором.
* **Личные сообщения (P2P):** Обмен сообщениями в реальном времени (SignalR). Текстовые сообщения, статусы отправки, доставки и прочитанности, индикаторы набора текста (typing).
* **Групповые чаты:** Создание групп. Настройки группы (название, описание, аватар). Добавление и удаление участников администратором. В админ-панели можно установить лимит участников.
* **Закрепление чатов (Pin/Unpin):** Важные чаты всегда под рукой вверху списка.
* **Вложения и медиа:** Поддержка отправки фото, видео, обычных файлов, а также удобный просмотр отправленных ссылок (распределение по вкладкам в информации профиля и группы). Изображения открываются во встроенном полноэкранном лайтбоксе.
* **Интеграция GIF (Klipy):** Встроенный поиск и отправка GIF-анимаций через Klipy.
* **Реакции на сообщения:** Стандартный набор эмодзи-реакций с красивой анимацией.
* **Вложения и медиа:** Отправка фото, видео, голосовых сообщений (с генерацией waveform-волны), аудиофайлов и обычных документов. Плавный просмотр изображений и видео во встроенном полноэкранном лайтбоксе (галерее).
* **Интеграция GIF (Klipy):** Встроенный поиск и отправка GIF-анимаций через Klipy. Ключи и ID клиента(Customer ID) настраиваются прямо из панели администратора.
* **Реакции и действия с сообщениями:** Реакции на сообщения (эмодзи), редактирование, пересылка (Forward), ответы (Reply c цитатами), удаление (только для себя или для всех).
* **Отложенные сообщения:** Возможность запланировать отправку сообщения на определенную дату и время.
### Конференц-связь
* **Аудио и видеозвонки:** Интеграция WebRTC для личных звонков и групповых конференций.
* **Демонстрация экрана:** Возможность делиться экраном со всеми участниками беседы.
* Управление микрофоном, камерой, отображение статусов звонка в чате. *Для стабильной работы необходим внешний TURN-сервер.*
### Конференц-связь (WebRTC)
* **Аудио и видеозвонки:** Интеграция WebRTC для личных звонков P2P.
* **Групповые звонки:** Аудио-конференции внутри групповых чатов со всеми участниками беседы.
* **Демонстрация экрана (Screen Sharing):** Возможность поделиться экраном или окном.
* Управление микрофоном, камерой, отображение статусов звонка прямо в чате. *Для стабильной работы необходим внешний TURN-сервер.*
### Социальные функции
* **Истории (Stories):** Публикация фото/видео историй на 24 часа. Просмотр списка посмотревших (Viewer List).
* **Истории (Stories):** Публикация фото/видео историй. Просмотр списка посмотревших (Viewer List). Истории автоматически удаляются через установленное время.
* **Друзья (Friends):** Гибкая система отправки заявок в друзья, подтверждения и удаления из друзей.
* **Продвинутый профиль пользователя:** Смена никнейма, информации "о себе", дня рождения.
* **Клиентский кроп фото:** Идеально ровная обрезка квадратных и круглых аватаров для профиля и групповых чатов происходит прямо в вашем браузере. Решение не смещает координаты кадра и на сервер летит уже готовый результат.
* **Онлайн-статусы:** Индикация того, кто находится онлайн в данный момент.
* **Продвинутый профиль пользователя:** Настройка никнейма, информации "о себе", даты рождения. Клиентский редактор аватарок (Crop/Zoom) с идеальной обрезкой прямо в браузере.
* **Онлайн-статусы:** Индикация того, кто находится онлайн в данный момент (с точным временем "Был(а) в сети...").
### Интерфейс и Кастомизация
* Современно выглядит: эффект стекла (glassmorphism), плавные анимации (Framer Motion).
* **Кастомизация тем:** Встроенное меню выбора цветовых акцентов и фона чата (Ocean, Nebula, Midnight, Forest и д.р.).
### Интерфейс и Панель Управления
* **Премиальный дизайн:** Эффект стекла (glassmorphism), плавные анимации (Framer Motion), кастомизация тем на лету (Ocean, Nebula, Midnight, Forest и д.р.).
* **Админ-панель (Dashboard):** Динамическое управление настройками системы "на лету" без перезагрузки сервера:
* Включение/выключение звонков.
* Настройка ключей Klipy API.
* Установка максимального размера загружаемого файла.
* Лимиты на количество участников в группах.
* Управление пользователями системы.
---
## 🛠 Архитектура
* **Бэкенд:** C# .NET 8/10, Entity Framework Core (PostgreSQL). Паттерн CQRS. Механизм SignalR для мгновенных уведомлений.
* **Фронтенд:** React, zustand (стейт-менеджер), lucide-react (иконки), framer-motion (анимации), react-easy-crop, WebRTC APIs.
* **База данных:** PostgreSQL Server. Хранение медиа происходит прямо на сервере в папке `uploads`.
* **Бэкенд:** C# .NET (ASP.NET Core), Entity Framework Core (PostgreSQL). Паттерн CQRS (MediatR). Механизм SignalR для доставки событий и сообщений в реальном времени.
* **Фронтенд:** React 18, Zustand (стейт-менеджер и кэширование параметров коннекта), TailwindCSS, lucide-react (векторные иконки), framer-motion (анимации), react-easy-crop, WebRTC APIs.
* **База данных и S3:**
* `PostgreSQL Server` — надежное и быстрое хранение реляционных данных.
* `MinIO` (S3) — масштабируемое и независимое объектное хранилище для медиафайлов (аватарки, файлы, вложения).
---
## ⚙️ Установка и развертывание (Docker)
## ⚙️ Установка и развертывание (Docker Compose)
Проект легко разворачивается с помощью `docker-compose`.
Проект изначально готов к `production` развертыванию через `docker-compose`.
1. Клонируйте репозиторий.
2. В корневой директории найдите файл `.env`. Там задаются секреты (базы данных, JWT-секреты, TURN параметры и API ключи).
2. В корневой директории найдите файл `.env`. Там задаются секреты (пароль к базе данных, ключи JWT, доступы MinIO, ключи TURN).
3. Запустите стек:
```bash
docker-compose build --no-cache
docker-compose up -d
docker compose build --no-cache
docker compose up -d
```
В результате поднимутся 3 контейнера:
* `knot-db` — База данных Postgres.
* `knot-server` — Основной бэкенд на порту `:5059`.
* `knot-web` — Фронтенд (Nginx + React) на порту `:9090`.
В результате поднимутся 4 контейнера:
* `knot-db` — База данных PostgreSQL.
* `knot-minio` — S3 хранилище файлов MinIO.
* `knot-server` — Основной бэкенд на порту `:5034` / `:5059`
* `knot-web` — Фронтенд (Nginx + React) на порту `:9090` (или на 80/443 при использовании Traefik/Dokploy).
*Для продакшена (Dokploy) используйте гайд из файла `DOKPLOY.md` и `DEPLOYMENT.md` в этом же или соседних файлах, указав SSL сертификаты и правильные домены.*
*Для продакшена (Dokploy / Coolify) можно использовать стандартный подход публикации через Docker Compose, указав SSL сертификаты и настроив домены.*
---
## 🌐 Настройка TURN-сервера (для звонков)
## 🌐 Настройка TURN-сервера (для стабильности звонков)
Механизм аудио и видео звонков, а также демонстрации экрана основан на технологии **WebRTC**.
**Почему нужен TURN-сервер?**
Чтобы двое (или более) участников могли передавать медиа-трафик друг другу из своих частных сетей (из-за NAT или файрволов), им нужен промежуточный ретранслятор. Если прямое подключение (STUN) не удаётся, соединение будет перенаправлено через TURN. Без него звонки между мобильными сетями и многими домашними провайдерами работать *не будут*.
Механизм аудио и видео звонков, а также демонстрации экрана основан на технологии **WebRTC**.
Чтобы пользователи могли свободно общаться вне зависимости от локальных ограничений сети (NAT/Firewall/мобильные вышки), необходим внешний TURN сервер-ретранслятор.
### Требования к TURN
1. Вам нужен **отдельный сервер с белым (публичным) IP адресом**.
2. В файрволе этого сервера должны быть открыты порты:
* `3478` (TCP/UDP)
* `5349` (TCP/UDP, если настроен TLS)
* Желательно также открыть диапазон портов `49152 - 65535` (UDP) для прохода медиа-трафика.
* Диапазон портов `49152 - 65535` (UDP) для прохода медиа-трафика.
### Развертывание Coturn (самый популярный сервер)
Вы можете развернуть его с помощью Docker (на отдельном VPS):
### Развертывание Coturn
Быстрое развертывание при помощи Docker на отдельном VPS:
```bash
docker run -d \
--network=host \
@@ -89,11 +96,11 @@ docker run -d \
```
*Замените `USER_NAME` и `SECRET_PASSWORD` на собственные логин и пароль.*
### Настройка в проекте
После установки Coturn, перейдите в файл `.env` корневого проекта Knot и задайте переменные:
### Подключение к приложению
После установки Coturn, перейдите в файл `.env` корневого проекта SelfHost Messenger и укажите реквизиты:
```env
TURN_URL=turn:ВАШ_БЕЛЫЙ_IP_ТУТ:3478
TURN_USERNAME=USER_NAME
TURN_PASSWORD=SECRET_PASSWORD
```
Также убедитесь, что ваш React клиент принимает эти параметры для создания WebRTC-соедения, после этого WebRTC звонки будут работать практически в 100% случаев.
(Также эти параметры можно переопределить через админ-панель в будущих версиях). После этого WebRTC звонки будут работать практически в 100% клиентских конфигураций.