1. WebSocket Connection

Use a WebSocket library like socket.io-client or the native WebSocket API to connect to the chat server.

javascript
Copy
const chatSocket = new WebSocket(
  'ws://' + window.location.host +
  '/ws/chat/' + roomId + '/'
);

chatSocket.onmessage = function(e) {
  const data = JSON.parse(e.data);
// Handle different message types
  switch(data.type) {
    case 'new_message':
// Add new message to chat
      break;
    case 'online_count':
// Update online user count
      break;
    case 'typing':
// Show typing indicator
      break;
    case 'online_status':
// Update user's online status
      break;
    case 'user_join_leave':
// Handle user joining or leaving the room
      break;
  }
};

2. Sending Messages

To send a message, use the WebSocket connection:

javascript
Copy
function sendMessage(message) {
  chatSocket.send(JSON.stringify({
    'message': message
  }));
}

3. REST API Endpoints

Room Operations

• List/Create Rooms:
  • GET/POST /api/rooms/
• Room Details:
  • GET/PUT/DELETE /api/rooms/<room_id>/
• Join/Leave Room:
  • POST/DELETE /api/rooms/<room_id>/join/

Message Operations

• List/Create Messages:
  • GET/POST /api/rooms/<room_id>/messages/
• Upload File:
  • POST /api/rooms/<room_id>/upload/

Private Rooms

• Create Private Room:
  • POST /api/rooms/private/<username>/

Group Chats

• Create Group Chat:
  • POST /api/rooms/group/

a. Displaying Messages

Fetch initial messages when entering a room: