165 lines
8.6 KiB
Markdown
165 lines
8.6 KiB
Markdown
# Улучшения 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 в игре, решая основные проблемы с уведомлениями и отображением информации об отправителях. Система стала более информативной и удобной для пользователей.
|