${message.content}
${new Date(message.created_at).toLocaleTimeString()}
`;
messagesContainer.appendChild(messageDiv);
});
// Scroll to bottom
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
// Display a single message
displayMessage(message) {
const messagesContainer = document.getElementById('messages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${message.sender_id === this.currentUserId ? 'own' : 'other'}`;
messageDiv.innerHTML = `
${message.content}
${new Date(message.created_at).toLocaleTimeString()}
`;
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
// Send a message
async sendMessage() {
const messageInput = document.getElementById('message-text');
const message = messageInput.value.trim();
if (!message) return;
try {
const response = await fetch('/api/messages/send', {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
conversation_id: this.currentConversationId,
content: message,
type: 'text'
})
});
if (response.ok) {
messageInput.value = '';
}
} catch (error) {
console.error('Error sending message:', error);
}
}
// Mark messages as read
async markMessagesAsRead() {
try {
await fetch(`/api/messages/conversation/${this.currentConversationId}/read`, {
method: 'PUT',
headers: {
'Authorization': `Bearer ${this.token}`
}
});
} catch (error) {
console.error('Error marking messages as read:', error);
}
}
// Show typing indicator
showTypingIndicator(userName, isTyping) {
const indicator = document.getElementById('typing-indicator');
const typingUser = document.getElementById('typing-user');
if (isTyping) {
typingUser.textContent = userName;
indicator.style.display = 'block';
} else {
indicator.style.display = 'none';
}
}
// Handle typing events
handleTyping() {
const messageInput = document.getElementById('message-text');
let typingTimeout;
messageInput.addEventListener('input', () => {
// Start typing
this.socket.emit('typing_start', {
conversationId: this.currentConversationId
});
// Clear previous timeout
clearTimeout(typingTimeout);
// Stop typing after 2 seconds of inactivity
typingTimeout = setTimeout(() => {
this.socket.emit('typing_stop', {
conversationId: this.currentConversationId
});
}, 2000);
});
}
// Setup event listeners
setupEventListeners() {
// Send message on button click
document.getElementById('send-btn').addEventListener('click', () => {
this.sendMessage();
});
// Send message on Enter key
document.getElementById('message-text').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.sendMessage();
}
});
// Back button
document.getElementById('back-btn').addEventListener('click', () => {
this.goBackToUsers();
});
// Typing indicator
this.handleTyping();
}
// Go back to users list
goBackToUsers() {
// Leave conversation room
if (this.currentConversationId) {
this.socket.emit('leave_conversation', {
conversationId: this.currentConversationId
});
}
// Reset state
this.currentConversationId = null;
this.otherUserId = null;
// Show users list
document.getElementById('user-list').style.display = 'block';
document.getElementById('chat-container').style.display = 'none';
}
}
// Initialize the messaging system when page loads
document.addEventListener('DOMContentLoaded', () => {
window.messaging = new IndividualMessaging();
});
```
### CSS Styling
```css
```
## API Endpoints for Individual Messaging
### 1. Create Direct Conversation
```http
POST /api/conversations
{
"type": "direct",
"participant_ids": [other_user_id]
}
```
### 2. Get User's Conversations
```http
GET /api/conversations
```
### 3. Send Message
```http
POST /api/messages/send
{
"conversation_id": conversation_id,
"content": "Your message",
"type": "text"
}
```
### 4. Get Messages
```http
GET /api/messages/conversation/{conversationId}?page=1&limit=50
```
### 5. Mark as Read
```http
PUT /api/messages/conversation/{conversationId}/read
```
## Socket.IO Events for Individual Messaging
### Client Events
```javascript
// Join conversation
socket.emit('join_conversation', { conversationId: 1 });
// Start typing
socket.emit('typing_start', { conversationId: 1 });
// Stop typing
socket.emit('typing_stop', { conversationId: 1 });
```
### Server Events
```javascript
// New message received
socket.on('new_message', (data) => {
console.log('New message:', data.message);
});
// User typing
socket.on('user_typing', (data) => {
console.log('User typing:', data.user.name, data.isTyping);
});
// Messages read
socket.on('messages_read', (data) => {
console.log('Messages read by:', data.user_id);
});
```
## Key Features of Individual Messaging
1. **Automatic Conversation Creation** - Direct conversations are created automatically between two users
2. **No Duplicates** - The system prevents duplicate direct conversations between the same users
3. **Real-time Updates** - Messages appear instantly for both users
4. **Typing Indicators** - See when the other person is typing
5. **Read Receipts** - Know when your messages have been read
6. **Message History** - All previous messages are preserved
7. **User Status** - See if the other person is online, offline, or busy
This implementation provides a complete one-to-one messaging system that's perfect for individual conversations between users! 🚀