Implement WebSocket real-time updates for notifications and discussions

[JSv4]

Parent Issue

#572, #577

Description

Replace polling-based notification updates with WebSocket connections for real-time notifications and discussion updates. This improves UX by providing instant feedback when new messages, votes, or notifications occur.

Implementation Details

WebSocket Infrastructure:

• Leverage existing Django Channels setup
• Create new consumer for discussion updates
• Create new consumer for notifications

Real-time Events:

• New message posted in thread
• New reply to message
• Upvote/downvote on message
• Thread locked/pinned/deleted
• New notification received
• Badge awarded

Frontend Integration:

• WebSocket connection management
• Automatic reconnection logic
• Event handlers for each event type
• Optimistic UI updates with WebSocket confirmation
• Fallback to polling on connection failure

Components Affected:

• NotificationBell.tsx - Real-time unread count
• ThreadDetail.tsx - Live message updates
• VoteButtons.tsx - Live vote count updates

Technical Considerations

• Connection pooling for multiple tabs
• Graceful degradation to polling
• Rate limiting on reconnections
• Event deduplication

Acceptance Criteria

• WebSocket consumers implemented (backend)
• Frontend WebSocket client created
• Notifications update in real-time
• Discussion messages appear instantly
• Vote counts update live
• Automatic reconnection works
• Fallback to polling on failure
• No duplicate events

Dependencies

• Build notification center UI #577 (Notification Center - needs to be implemented first)
• Build thread list and detail views #573 (Thread List - needs to be implemented first)

Estimated Effort

5 days

Priority

Low - Implement after all core features are working with polling