5.2 KiB
5.2 KiB
Система статуса пользователей для 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()для получения статуса пользователей
Как это работает
-
Подключение пользователя:
- Пользователь входит в игру
- WebSocket middleware добавляет его в
onlineUsers - Обновляется
lastSeenTimes - Отправляется событие
userStatusChangedвсем клиентам
-
Отключение пользователя:
- Пользователь выходит из игры или теряет соединение
- Обновляется
lastSeenTimes - Отправляется событие
userStatusChangedвсем клиентам - Пользователь удаляется из
onlineUsers
-
Отображение в Telegram:
- При открытии Telegram загружается список пользователей с их статусом
- Статус обновляется в реальном времени через WebSocket
- Периодически обновляется через API для синхронизации
Файлы, которые были изменены
server.js- добавлена логика отслеживания статуса и WebSocket событияsrc/Game.js- обновлено Telegram приложение для отображения статусаsrc/api/auth.js- добавлена функция для получения статуса пользователейtest_telegram_status.html- тестовый файл для проверки API
Тестирование
- Запустите сервер
- Откройте
test_telegram_status.htmlв браузере - Введите JWT токен пользователя
- Нажмите "Тестировать API"
- Проверьте, что статус пользователей отображается корректно
Особенности
- Реальное время: Статус обновляется мгновенно при подключении/отключении
- Надежность: Периодическое обновление через API обеспечивает синхронизацию
- Производительность: WebSocket события отправляются только при изменении статуса
- Визуальная обратная связь: Зеленые точки и цветной текст для лучшего UX
Возможные улучшения
- Кэширование: Добавить кэширование статуса пользователей
- Группировка: Группировать пользователей по статусу
- Уведомления: Уведомления о том, что пользователь стал онлайн
- Статистика: Время, проведенное онлайн, активность и т.д.