docs: update documentation with chat enhancements

Document three recent chat improvements:

1. Real-time Active Users Fix (dd31761)
   - Fixed bug where users list didn't update when new users joined
   - Rewrote getAllDisplayUsers() to prioritize Socket.IO data

2. Message Length Limits (4a91a10)
   - Added 2000 character limit with visual counter
   - Backend + frontend validation

3. Spam Protection System (ace3311)
   - Rate limiting: 10 messages per minute
   - Duplicate detection within 60 second window
   - Profanity filter with Polish + English words

Updated:
- README.md: Added chat features to Events & Chat section
- SESSION_CONTEXT.md: New "Chat Enhancements" section
- COMPLETED.md: Comprehensive entry with problem/solution/impact
- Last updated dates: 2025-12-03
This commit is contained in:
Radosław Gierwiało
2025-12-03 00:03:37 +01:00
parent ace33111a4
commit f6fd983c68
3 changed files with 187 additions and 6 deletions

View File

@@ -1436,7 +1436,153 @@ activityLog({
---
**Last Updated:** 2025-12-02 (Activity Log System completed)
## ✅ Chat Enhancements (COMPLETED 2025-12-03)
**Status:** Production Ready
**Time Spent:** ~2 hours
**Commits:** 3 commits (`dd31761`, `4a91a10`, `ace3311`)
**Tests:** Manual testing
### Overview
Enhanced chat system with real-time updates, message validation, and comprehensive spam protection. Improves UX with instant active user updates, prevents abuse with rate limiting and profanity filtering, and protects against excessive message lengths.
### 1. Real-time Active Users Fix (dd31761)
**Problem:**
- When new users joined event chat, existing users didn't see them in the active users list without page refresh
- Socket.IO was working correctly and emitting `active_users` events
- Frontend was receiving updates but users weren't displayed in UI
**Root Cause:**
- `getAllDisplayUsers()` function in `EventChatPage.jsx` used `checkedInUsers` (static, loaded once from API) as the base list
- `activeUsers` (real-time Socket.IO data) was only used to set `isOnline` flag
- When new user joined: appeared in `activeUsers` but not in `checkedInUsers`, so not displayed
**Solution:**
- Rewrote `getAllDisplayUsers()` to prioritize real-time data:
1. Use `activeUsers` (Socket.IO) as primary source of truth
2. Merge with `checkedInUsers` for offline users who checked in
3. Enrich Socket.IO data with database data when available
4. Sort online users first, offline second
**Files Modified:**
- `frontend/src/pages/EventChatPage.jsx` - Rewrote `getAllDisplayUsers()` function
- `frontend/src/hooks/useEventChat.js` - Added debug logging
- `backend/src/socket/index.js` - Added debug logging for active_users emissions
**Impact:**
- Instant real-time updates when users join/leave event chat
- No page refresh required
- Improved user experience for active chat monitoring
### 2. Message Length Limits (4a91a10)
**Problem:**
- No character limit for chat messages
- Database TEXT field could accept very long messages
- Risk of UI breaking with extremely long messages
- Poor UX with no feedback about message length
**Solution:**
- Implemented 2000 character limit across the stack:
**Backend:**
- Added `MESSAGE_MAX_LENGTH = 2000` constant
- Validation in `send_event_message` handler
- Validation in `send_match_message` handler
- User-friendly error message
**Frontend:**
- Added `MESSAGE_MAX_LENGTH = 2000` constant
- `maxLength={MESSAGE_MAX_LENGTH}` attribute on input field
- Character counter appears at 80% threshold (1600+ characters)
- Red warning text when at/over limit
- Submit button disabled when over limit
**Files Modified:**
- `backend/src/constants/index.js` - Added MESSAGE_MAX_LENGTH constant
- `backend/src/socket/index.js` - Added validation to both message handlers
- `frontend/src/constants/index.js` - Added MESSAGE_MAX_LENGTH export
- `frontend/src/components/chat/ChatInput.jsx` - Enhanced with counter and validation
**Impact:**
- Prevents database/UI issues from excessively long messages
- Clear visual feedback for users approaching limit
- Consistent validation across event and match chat
- Better UX with proactive character counter
### 3. Spam Protection System (ace3311)
**Problem:**
- No protection against chat abuse
- Users could spam messages rapidly
- No duplicate message detection
- No profanity filtering (especially important for Polish users)
**Solution:**
- Created comprehensive `messageValidation.js` middleware with 3 protection mechanisms:
**1. Rate Limiting**
- 10 messages per minute per user
- Sliding time window (60 seconds)
- In-memory tracking with Map: `userId -> timestamps[]`
- Auto-cleanup of expired timestamps
**2. Duplicate Detection**
- Prevents identical messages within 1 minute window
- Tracks last 5 messages per user
- In-memory tracking with Map: `userId -> [{ content, timestamp }]`
- Auto-cleanup of old messages
**3. Profanity Filter**
- Uses `bad-words` library v2.0.0 (CommonJS compatible)
- English profanity words (built-in)
- 11 Polish profanity words added
- User-friendly error message: "Message contains inappropriate language"
**Implementation Details:**
- Single `validateMessage(userId, content)` function for all checks
- Returns `{ valid: boolean, error?: string }`
- Integrated into both `send_event_message` and `send_match_message` handlers
- Replaced basic validation (empty/length checks only) with comprehensive validation
- Memory management: Periodic cleanup every 5 minutes
**Technical Note:**
- Initially installed `bad-words` v3.0.4 (ES module)
- Backend crashed: "exports is not defined in ES module scope"
- Fixed by downgrading to v2.0.0 (CommonJS compatible)
**Files Created:**
- `backend/src/middleware/messageValidation.js` (200 lines)
**Files Modified:**
- `backend/src/socket/index.js` - Import and integrate validateMessage()
- `backend/package.json` - Added bad-words@2.0.0
**Impact:**
- Prevents chat spam and abuse
- Maintains respectful chat environment
- Protects against duplicate message flooding
- Bilingual profanity filtering (English + Polish)
- User-friendly error messages for each violation type
- Never blocks legitimate users (reasonable limits)
### Git Commits
1. `dd31761` - fix(chat): real-time active users list updates
2. `4a91a10` - feat(chat): add 2000 character limit for messages
3. `ace3311` - feat(chat): implement spam protection and profanity filter
### Access Information
- Feature available to all logged-in users in event chat and match chat
- Spam protection runs automatically on every message
- Rate limit: 10 messages per minute
- Duplicate window: 60 seconds
- Character limit: 2000 characters (counter appears at 1600+)
---
**Last Updated:** 2025-12-03 (Chat Enhancements completed)
**Note:** This file is an archive of completed phases. For current status, see SESSION_CONTEXT.md or TODO.md
**MVP Status:** ✅ 100% Complete - All core features implemented, tested, and production-ready