79 lines
5.2 KiB
Markdown
79 lines
5.2 KiB
Markdown
# Система статуса пользователей для Telegram (Shipgram)
|
||
|
||
## Описание
|
||
|
||
Реализована система отображения статуса "online/offline" для пользователей в Telegram приложении (Shipgram) игрового телефона. Статус показывает, действительно ли игрок находится онлайн в игре.
|
||
|
||
## Что реализовано
|
||
|
||
### 1. Серверная часть (server.js)
|
||
|
||
- **Отслеживание онлайн пользователей**: Переменная `onlineUsers` хранит ID пользователей, которые в данный момент подключены к WebSocket
|
||
- **Отслеживание времени последнего онлайн**: Переменная `lastSeenTimes` хранит время последнего подключения/отключения каждого пользователя
|
||
- **WebSocket события**:
|
||
- При подключении: `userStatusChanged` с `isOnline: true`
|
||
- При отключении: `userStatusChanged` с `isOnline: false`
|
||
- **API endpoint**: `/api/users/status` возвращает список пользователей с их статусом
|
||
|
||
### 2. Клиентская часть (Game.js)
|
||
|
||
- **Обновленный API вызов**: `loadTelegramContacts()` теперь использует `/api/users/status` вместо `/api/users`
|
||
- **WebSocket обработчик**: Слушает события `userStatusChanged` и обновляет статус в реальном времени
|
||
- **Периодическое обновление**: Каждые 30 секунд обновляет статус пользователей
|
||
- **Визуальные индикаторы**:
|
||
- Зеленая точка для онлайн пользователей
|
||
- Цветной текст статуса (зеленый для онлайн, серый для офлайн)
|
||
- Время последнего онлайн для офлайн пользователей
|
||
|
||
### 3. API функции (auth.js)
|
||
|
||
- Добавлена функция `getUsersStatus()` для получения статуса пользователей
|
||
|
||
## Как это работает
|
||
|
||
1. **Подключение пользователя**:
|
||
- Пользователь входит в игру
|
||
- WebSocket middleware добавляет его в `onlineUsers`
|
||
- Обновляется `lastSeenTimes`
|
||
- Отправляется событие `userStatusChanged` всем клиентам
|
||
|
||
2. **Отключение пользователя**:
|
||
- Пользователь выходит из игры или теряет соединение
|
||
- Обновляется `lastSeenTimes`
|
||
- Отправляется событие `userStatusChanged` всем клиентам
|
||
- Пользователь удаляется из `onlineUsers`
|
||
|
||
3. **Отображение в Telegram**:
|
||
- При открытии Telegram загружается список пользователей с их статусом
|
||
- Статус обновляется в реальном времени через WebSocket
|
||
- Периодически обновляется через API для синхронизации
|
||
|
||
## Файлы, которые были изменены
|
||
|
||
- `server.js` - добавлена логика отслеживания статуса и WebSocket события
|
||
- `src/Game.js` - обновлено Telegram приложение для отображения статуса
|
||
- `src/api/auth.js` - добавлена функция для получения статуса пользователей
|
||
- `test_telegram_status.html` - тестовый файл для проверки API
|
||
|
||
## Тестирование
|
||
|
||
1. Запустите сервер
|
||
2. Откройте `test_telegram_status.html` в браузере
|
||
3. Введите JWT токен пользователя
|
||
4. Нажмите "Тестировать API"
|
||
5. Проверьте, что статус пользователей отображается корректно
|
||
|
||
## Особенности
|
||
|
||
- **Реальное время**: Статус обновляется мгновенно при подключении/отключении
|
||
- **Надежность**: Периодическое обновление через API обеспечивает синхронизацию
|
||
- **Производительность**: WebSocket события отправляются только при изменении статуса
|
||
- **Визуальная обратная связь**: Зеленые точки и цветной текст для лучшего UX
|
||
|
||
## Возможные улучшения
|
||
|
||
1. **Кэширование**: Добавить кэширование статуса пользователей
|
||
2. **Группировка**: Группировать пользователей по статусу
|
||
3. **Уведомления**: Уведомления о том, что пользователь стал онлайн
|
||
4. **Статистика**: Время, проведенное онлайн, активность и т.д.
|