Files
rltn/TELEGRAM_STATUS_README.md

5.2 KiB
Raw Blame History

Система статуса пользователей для 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. Статистика: Время, проведенное онлайн, активность и т.д.