Tg with Notifications, bags fixxed
This commit is contained in:
164
TELEGRAM_IMPROVEMENTS_README.md
Normal file
164
TELEGRAM_IMPROVEMENTS_README.md
Normal file
@@ -0,0 +1,164 @@
|
||||
# Улучшения Telegram в игре
|
||||
|
||||
## Обзор
|
||||
|
||||
Этот документ описывает улучшения, внесенные в приложение Telegram (Shipgram) в игре, включая систему уведомлений, индикаторы непрочитанных сообщений и исправление проблемы "неизвестного отправителя".
|
||||
|
||||
## Основные улучшения
|
||||
|
||||
### 1. Уведомления о новых сообщениях
|
||||
|
||||
**Проблема**: При получении новых сообщений в Telegram не было уведомлений, если приложение не было открыто.
|
||||
|
||||
**Решение**: Реализована система уведомлений, которая показывает красивые всплывающие уведомления в правом верхнем углу экрана.
|
||||
|
||||
**Функциональность**:
|
||||
- Уведомления появляются только когда Telegram не открыт
|
||||
- Отображают имя отправителя и текст сообщения
|
||||
- Автоматически исчезают через 5 секунд
|
||||
- Красивый дизайн с градиентом и анимацией
|
||||
|
||||
**Код**: `showMessageNotification(senderId, messageText)` в `src/Game.js`
|
||||
|
||||
### 2. Исправление проблемы "неизвестного отправителя"
|
||||
|
||||
**Проблема**: В уведомлениях отображалось "Неизвестный" вместо имени отправителя.
|
||||
|
||||
**Решение**: Реализована система поиска информации об отправителе:
|
||||
1. Сначала ищет в списке контактов
|
||||
2. Если не найден, загружает информацию с сервера через новый API endpoint
|
||||
|
||||
**Новые API endpoints**:
|
||||
- `GET /api/users/:userId` - получение информации о пользователе по ID
|
||||
- `GET /api/messages-read/:contactId` - получение количества непрочитанных сообщений
|
||||
|
||||
**Код**: Обновленная функция `showMessageNotification` в `src/Game.js`
|
||||
|
||||
### 3. Индикаторы непрочитанных сообщений
|
||||
|
||||
**Проблема**: Не было визуального индикатора непрочитанных сообщений в списке контактов.
|
||||
|
||||
**Решение**: Добавлены счетчики непрочитанных сообщений:
|
||||
- Красные бейджи с количеством непрочитанных сообщений
|
||||
- Имена контактов выделяются жирным шрифтом при наличии непрочитанных сообщений
|
||||
- Автоматическое обновление счетчиков
|
||||
|
||||
**Функциональность**:
|
||||
- `updateUnreadCount(senderId)` - обновляет счетчик для конкретного отправителя
|
||||
- Автоматическое обновление при получении новых сообщений
|
||||
- Периодическое обновление каждые 30 секунд
|
||||
|
||||
**Код**: Функция `updateUnreadCount` и обновленный UI в `src/Game.js`
|
||||
|
||||
## Технические детали
|
||||
|
||||
### Серверная часть (`server.js`)
|
||||
|
||||
#### Новые API endpoints
|
||||
|
||||
```javascript
|
||||
// Получение информации о пользователе по ID
|
||||
app.get('/api/users/:userId', authenticate, async (req, res) => {
|
||||
// Возвращает: id, firstName, lastName, avatarURL, isOnline, lastSeen
|
||||
});
|
||||
|
||||
// Получение количества непрочитанных сообщений
|
||||
app.get('/api/messages-read/:contactId', authenticate, async (req, res) => {
|
||||
// Возвращает: { unreadCount: number }
|
||||
});
|
||||
```
|
||||
|
||||
#### Исправления для onlineUsers и lastSeenTimes
|
||||
|
||||
- Заменены `onlineUsers.hasOwnProperty()` на `onlineUsers.has()`
|
||||
- Заменены `lastSeenTimes[userId]` на `lastSeenTimes.get(userId)`
|
||||
- Исправлен `console.log` для отображения ключей Map
|
||||
|
||||
### Клиентская часть (`src/Game.js`)
|
||||
|
||||
#### Новые функции
|
||||
|
||||
```javascript
|
||||
// Показ уведомлений о сообщениях
|
||||
const showMessageNotification = async (senderId, messageText) => {
|
||||
// Логика поиска имени отправителя и показа уведомления
|
||||
};
|
||||
|
||||
// Обновление счетчика непрочитанных сообщений
|
||||
const updateUnreadCount = async (senderId) => {
|
||||
// Загрузка и обновление счетчика
|
||||
};
|
||||
```
|
||||
|
||||
#### Обновленный UI
|
||||
|
||||
- Счетчики непрочитанных сообщений (красные бейджи)
|
||||
- Выделение имен контактов жирным шрифтом
|
||||
- Улучшенная структура контактов
|
||||
|
||||
### API функции (`src/api/auth.js`)
|
||||
|
||||
```javascript
|
||||
// Загрузка информации о пользователе по ID
|
||||
export const loadUserInfo = async (userId, token) => {
|
||||
// Запрос к /api/users/:userId
|
||||
};
|
||||
|
||||
// Обновленная функция получения статуса пользователей
|
||||
export const getUsersStatus = async (token) => {
|
||||
// Улучшенная обработка ошибок
|
||||
};
|
||||
```
|
||||
|
||||
## Тестирование
|
||||
|
||||
### Тестовый файл
|
||||
|
||||
Создан `test_telegram_improvements.html` для тестирования новых API endpoints:
|
||||
|
||||
1. **Тест статуса пользователей** - `/api/users/status`
|
||||
2. **Тест информации о пользователе** - `/api/users/:userId`
|
||||
3. **Тест количества непрочитанных сообщений** - `/api/messages-read/:contactId`
|
||||
|
||||
### Инструкции по тестированию
|
||||
|
||||
1. Откройте `test_telegram_improvements.html` в браузере
|
||||
2. Введите JWT токен пользователя
|
||||
3. Протестируйте каждый endpoint
|
||||
4. Проверьте корректность возвращаемых данных
|
||||
|
||||
## Интеграция с существующим кодом
|
||||
|
||||
### WebSocket события
|
||||
|
||||
- `newMessage` - автоматически вызывает `updateUnreadCount` и `showMessageNotification`
|
||||
- `userStatusChanged` - обновляет статус пользователей в реальном времени
|
||||
|
||||
### Интервалы обновления
|
||||
|
||||
- `statusInterval` - каждые 30 секунд обновляет статусы и счетчики непрочитанных сообщений
|
||||
|
||||
### Состояние компонента
|
||||
|
||||
- `telegramContacts` - расширен для хранения `unreadCount`
|
||||
- Автоматическое обновление при изменении данных
|
||||
|
||||
## Преимущества
|
||||
|
||||
1. **Лучший UX**: Пользователи видят уведомления о новых сообщениях
|
||||
2. **Информативность**: Четко видно, от кого пришло сообщение
|
||||
3. **Отслеживание**: Легко понять, какие чаты требуют внимания
|
||||
4. **Производительность**: Эффективное обновление данных через интервалы
|
||||
5. **Надежность**: Обработка ошибок и fallback для неизвестных отправителей
|
||||
|
||||
## Возможные улучшения в будущем
|
||||
|
||||
1. **Звуковые уведомления** - добавление звуковых сигналов
|
||||
2. **Настройки уведомлений** - возможность отключения для определенных контактов
|
||||
3. **Push-уведомления** - интеграция с браузерными push-уведомлениями
|
||||
4. **Группировка уведомлений** - объединение уведомлений от одного отправителя
|
||||
5. **История уведомлений** - сохранение истории показанных уведомлений
|
||||
|
||||
## Заключение
|
||||
|
||||
Реализованные улучшения значительно повышают удобство использования Telegram в игре, решая основные проблемы с уведомлениями и отображением информации об отправителях. Система стала более информативной и удобной для пользователей.
|
||||
Reference in New Issue
Block a user