Skip to content

EVENT_CHAT_DOCUMENTATION.md

Latest commit

 

History

History
178 lines (137 loc) · 5 KB

EVENT_CHAT_DOCUMENTATION.md

File metadata and controls

178 lines (137 loc) · 5 KB
Raw

Event Chat Feature Documentation

Overview

The Event Chat feature provides real-time communication for attendees of active events. When an event starts, registered users can chat with each other through a sidebar interface.

How It Works

For Users

1. When an event starts

  • If you're registered for an event (Workshop, Trip, Conference, or Bazaar)
  • When the event's start time arrives, a chat becomes available
  • You'll see a minimized chat tab on the right side of your screen showing: 💬 Event Name

2. Opening the chat

  • Click on the minimized chat tab
  • The chat sidebar slides in from the right (350px width)
  • You can view all messages and send new ones

3. During the event

  • Chat remains available throughout the event duration
  • Messages appear in real-time for all registered attendees
  • You can minimize the chat to collapse it back to a tab
  • The chat persists across page navigation

4. After the event ends

  • Chat automatically closes when the event end time is reached
  • Messages are preserved in the database for historical purposes
  • The chat tab disappears from your screen

Features

Real-time Messaging

  • Instant message delivery using Socket.io WebSockets
  • No page refresh needed
  • Messages show sender name and timestamp

User-Friendly Interface

  • Clean, modern design
  • Smooth animations for opening/closing
  • Scrollable message history
  • Character limit: 1000 characters per message

Automatic Management

  • Chats automatically activate when events start
  • Chats automatically deactivate when events end
  • System checks every 5 minutes for event status changes

Technical Implementation

Backend Components

Models

  • EventChat Model (server/models/EventChat.js)
    • Stores chat rooms linked to events
    • Contains message history with user info
    • Tracks active/inactive status

Controllers

  • Chat Controller (server/controllers/chatController.js)
    • Handles REST API endpoints for chat data
    • Manages Socket.io connections
    • Verifies user registration before allowing access

Services

  • Chat Service (server/services/chatService.js)
    • Automatically activates chats for starting events
    • Deactivates chats for ended events
    • Runs every 5 minutes via scheduler

Routes

  • POST /api/chat - Get or create a chat room
  • GET /api/chat/:eventType/:eventId/messages - Fetch messages
  • GET /api/active-chats - Get all active chats for current user
  • POST /api/chat/:eventType/:eventId/close - Close a chat (admin only)

Socket.io Events

  • join-chat - Join an event's chat room
  • send-message - Send a message to the room
  • new-message - Receive new messages (broadcast)
  • leave-chat - Leave the chat room
  • error - Receive error notifications

Frontend Components

Components

  • EventChatSidebar (client/src/components/EventChatSidebar.js)

    • Main chat UI component
    • Handles message display and input
    • Can be minimized or closed

  • ChatManager (client/src/components/ChatManager.js)

    • Manages multiple active chats
    • Shows minimized tabs for all active chats
    • Polls for new active chats every 30 seconds

Services

  • Socket Service (client/src/services/socketService.js)
    • Manages WebSocket connection
    • Provides methods for joining/leaving chats
    • Handles message sending and receiving

Styling

  • EventChatSidebar.css (client/src/styles/EventChatSidebar.css)
    • Modern, responsive design
    • Smooth animations
    • Mobile-friendly

Installation

Dependencies

Backend:

cd server
npm install socket.io

Client:

cd client
npm install socket.io-client

Configuration

The Socket.io server is automatically configured in server/server.js with CORS support for the client application.

Default configuration:

  • Server URL: http://localhost:5001
  • Client URL: http://localhost:3000

Security

  • All chat endpoints require authentication
  • Users must be registered for an event to access its chat
  • Message validation (max 1000 characters)
  • Socket connections verify user registration status

Monitoring

The server logs chat activities:

  • User connections/disconnections
  • Room joins/leaves
  • Message sends
  • Chat activations/deactivations

Check server console for real-time chat activity.

Troubleshooting

Chat not appearing

  • Verify you're registered for an event
  • Check that the event has started
  • Ensure the event status is 'published'

Messages not sending

  • Check Socket.io connection (look for connection logs in browser console)
  • Verify authentication token is valid
  • Ensure chat is still active

Connection issues

  • Check network connectivity
  • Verify server is running on port 5001
  • Check browser console for WebSocket errors

Future Enhancements

Potential improvements:

  • Read receipts and unread message counts
  • Typing indicators
  • Message reactions (emoji)
  • File/image sharing
  • @mentions and notifications
  • Chat moderation tools
  • Message search
  • User presence indicators (online/offline)
  • Message editing/deletion