fixed messaging!
This commit is contained in:
@@ -3,26 +3,28 @@ $(document).ready(function() {
|
||||
const conversationId = window.conversationId; // Set this in the template
|
||||
const currentUserId = window.currentUserId; // Set this in the template
|
||||
const chat = ChatManager.getInstance(conversationId);
|
||||
const socket = chat.socket;
|
||||
const state = chat.state;
|
||||
|
||||
console.log('Initializing chat for conversation:', conversationId);
|
||||
console.log('[Conversation] Initializing chat for conversation:', conversationId);
|
||||
|
||||
// Join conversation room
|
||||
socket.on('connect', function() {
|
||||
if (!state.connectionState.hasJoined) {
|
||||
console.log('Joining conversation room:', conversationId);
|
||||
socket.emit('join_conversation', {
|
||||
conversation_id: conversationId,
|
||||
timestamp: new Date().toISOString(),
|
||||
socketId: socket.id
|
||||
});
|
||||
state.connectionState.hasJoined = true;
|
||||
}
|
||||
});
|
||||
// Keep track of messages we've already displayed
|
||||
const displayedMessageIds = new Set();
|
||||
|
||||
// Function to append a new message to the chat
|
||||
function appendMessage(message) {
|
||||
console.log('[Conversation] Attempting to append message:', {
|
||||
messageId: message.id,
|
||||
content: message.content,
|
||||
senderId: message.sender_id,
|
||||
currentUserId: currentUserId
|
||||
});
|
||||
|
||||
// Check if we've already displayed this message
|
||||
if (displayedMessageIds.has(message.id)) {
|
||||
return;
|
||||
}
|
||||
displayedMessageIds.add(message.id);
|
||||
|
||||
const isCurrentUser = message.sender_id === currentUserId;
|
||||
const messageHtml = `
|
||||
<div class="message ${isCurrentUser ? 'sent' : 'received'}" data-message-id="${message.id}">
|
||||
@@ -65,9 +67,18 @@ $(document).ready(function() {
|
||||
$('.text-center.text-muted').remove();
|
||||
|
||||
$('#chatMessages').append(messageHtml);
|
||||
console.log('[Conversation] Message appended to chat:', message.id);
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
// Initialize displayedMessageIds with existing messages
|
||||
$('.message').each(function() {
|
||||
const messageId = $(this).data('message-id');
|
||||
if (messageId) {
|
||||
displayedMessageIds.add(messageId);
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to bottom of chat messages
|
||||
function scrollToBottom() {
|
||||
const chatMessages = document.getElementById('chatMessages');
|
||||
@@ -75,41 +86,14 @@ $(document).ready(function() {
|
||||
}
|
||||
scrollToBottom();
|
||||
|
||||
// Message handling with deduplication and reconnection handling
|
||||
socket.on('new_message', function(message) {
|
||||
const timestamp = new Date().toISOString();
|
||||
const messageKey = `${message.id}-${socket.id}`;
|
||||
|
||||
console.log('Message received:', {
|
||||
id: message.id,
|
||||
timestamp: timestamp,
|
||||
socketId: socket.id,
|
||||
messageKey: messageKey,
|
||||
queueSize: state.messageQueue.size
|
||||
// Listen for new messages
|
||||
$(document).on('new_message', function(event, message) {
|
||||
console.log('[Conversation] Received new_message event:', {
|
||||
messageId: message.id,
|
||||
eventType: event.type,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
if (state.messageQueue.has(messageKey)) {
|
||||
console.log('Message already in queue:', messageKey);
|
||||
return;
|
||||
}
|
||||
|
||||
state.messageQueue.add(messageKey);
|
||||
|
||||
if (!state.addedMessageIds.has(message.id)) {
|
||||
console.log('Processing new message:', message.id);
|
||||
appendMessage(message);
|
||||
state.connectionState.lastMessageId = message.id;
|
||||
state.addedMessageIds.add(message.id);
|
||||
} else {
|
||||
console.log('Duplicate message detected:', {
|
||||
messageId: message.id,
|
||||
lastMessageId: state.connectionState.lastMessageId,
|
||||
socketId: socket.id
|
||||
});
|
||||
}
|
||||
|
||||
// Clean up message from queue after processing
|
||||
state.messageQueue.delete(messageKey);
|
||||
appendMessage(message);
|
||||
});
|
||||
|
||||
// Handle file selection
|
||||
@@ -123,14 +107,14 @@ $(document).ready(function() {
|
||||
}
|
||||
});
|
||||
|
||||
// Handle message form submission with better error handling
|
||||
// Handle message form submission
|
||||
let isSubmitting = false;
|
||||
$('#messageForm').off('submit').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (isSubmitting) {
|
||||
console.log('Message submission already in progress');
|
||||
console.log('[Conversation] Message submission already in progress');
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -143,15 +127,14 @@ $(document).ready(function() {
|
||||
const files = Array.from(fileInput.files);
|
||||
|
||||
if (!message && files.length === 0) {
|
||||
console.log('Empty message submission attempted');
|
||||
console.log('[Conversation] Empty message submission attempted');
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('Submitting message:', {
|
||||
console.log('[Conversation] Submitting message:', {
|
||||
hasText: !!message,
|
||||
fileCount: files.length,
|
||||
socketId: socket.id,
|
||||
connectionState: state.connectionState
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
isSubmitting = true;
|
||||
@@ -163,44 +146,46 @@ $(document).ready(function() {
|
||||
const formData = new FormData();
|
||||
formData.append('message', message);
|
||||
formData.append('csrf_token', $('input[name="csrf_token"]').val());
|
||||
formData.append('socket_id', socket.id);
|
||||
formData.append('file_count', files.length);
|
||||
|
||||
files.forEach((file, index) => {
|
||||
formData.append(`file_${index}`, file);
|
||||
});
|
||||
formData.append('file_count', files.length);
|
||||
|
||||
$.ajax({
|
||||
url: window.sendMessageUrl, // Set this in the template
|
||||
url: window.sendMessageUrl,
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
console.log('Message sent successfully:', {
|
||||
console.log('[Conversation] Message sent successfully:', {
|
||||
response: response,
|
||||
socketId: socket.id
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
if (response.success) {
|
||||
messageInput.val('');
|
||||
fileInput.value = '';
|
||||
$('#selectedFiles').text('');
|
||||
|
||||
// If socket is disconnected, append message directly
|
||||
if (!state.connectionState.isConnected && response.message) {
|
||||
console.log('Socket disconnected, appending message directly');
|
||||
// Append the message directly since we sent it
|
||||
if (response.message) {
|
||||
console.log('[Conversation] Appending sent message directly:', response.message.id);
|
||||
// Update the ChatManager's lastMessageId
|
||||
chat.state.connectionState.lastMessageId = response.message.id;
|
||||
appendMessage(response.message);
|
||||
}
|
||||
} else {
|
||||
console.error('Message send failed:', response);
|
||||
console.error('[Conversation] Message send failed:', response);
|
||||
alert('Failed to send message. Please try again.');
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Failed to send message:', {
|
||||
console.error('[Conversation] Failed to send message:', {
|
||||
status: status,
|
||||
error: error,
|
||||
response: xhr.responseText
|
||||
response: xhr.responseText,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
alert('Failed to send message. Please try again.');
|
||||
},
|
||||
@@ -210,6 +195,7 @@ $(document).ready(function() {
|
||||
submitIcon.removeClass('d-none');
|
||||
spinner.addClass('d-none');
|
||||
isSubmitting = false;
|
||||
console.log('[Conversation] Message submission completed');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -218,6 +204,7 @@ $(document).ready(function() {
|
||||
|
||||
// Clean up on page unload
|
||||
$(window).on('beforeunload', function() {
|
||||
console.log('[Conversation] Cleaning up on page unload');
|
||||
chat.cleanup();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user