diff --git a/templates/conversations/conversation.html b/templates/conversations/conversation.html index cfa8949..98b7e84 100644 --- a/templates/conversations/conversation.html +++ b/templates/conversations/conversation.html @@ -403,7 +403,7 @@ if (typeof window.ChatManager === 'undefined') { transports: ['websocket', 'polling'], upgrade: true, reconnection: true, - reconnectionAttempts: 5, + reconnectionAttempts: Infinity, reconnectionDelay: 1000, reconnectionDelayMax: 5000, timeout: 20000, @@ -422,6 +422,16 @@ if (typeof window.ChatManager === 'undefined') { socketId: socket.id, existingSocketId: state.connectionState.socketId }); + + // Rejoin conversation room on reconnection + if (state.connectionState.hasJoined) { + console.log('Rejoining conversation room:', conversationId); + socket.emit('join_conversation', { + conversation_id: conversationId, + timestamp: new Date().toISOString(), + socketId: socket.id + }); + } }); socket.on('disconnect', function(reason) { @@ -431,13 +441,16 @@ if (typeof window.ChatManager === 'undefined') { connectionState: state.connectionState }); state.connectionState.isConnected = false; - state.connectionState.hasJoined = false; state.connectionState.socketId = null; + // Don't set hasJoined to false to allow reconnection + }); + + socket.on('connect_error', function(error) { + console.error('Connection error:', error); }); socket.on('error', function(error) { console.error('Socket error:', error); - cleanup(); }); instance = { @@ -547,7 +560,7 @@ $(document).ready(function() { } scrollToBottom(); - // Message handling with deduplication + // Message handling with deduplication and reconnection handling socket.on('new_message', function(message) { const timestamp = new Date().toISOString(); const messageKey = `${message.id}-${socket.id}`; @@ -595,7 +608,7 @@ $(document).ready(function() { } }); - // Handle message form submission + // Handle message form submission with better error handling let isSubmitting = false; $('#messageForm').off('submit').on('submit', function(e) { e.preventDefault(); @@ -606,12 +619,6 @@ $(document).ready(function() { return false; } - if (!state.connectionState.isConnected) { - console.error('Socket not connected, cannot send message'); - alert('Connection lost. Please refresh the page.'); - return false; - } - const messageInput = $('#messageInput'); const submitButton = $('#messageForm button[type="submit"]'); const message = messageInput.val().trim(); @@ -639,7 +646,6 @@ $(document).ready(function() { formData.append('csrf_token', $('input[name="csrf_token"]').val()); formData.append('socket_id', socket.id); - // Append each file to the FormData files.forEach((file, index) => { formData.append(`file_${index}`, file); }); @@ -660,6 +666,11 @@ $(document).ready(function() { messageInput.val(''); fileInput.value = ''; $('#selectedFiles').text(''); + + // If socket is disconnected, append message directly + if (!state.connectionState.isConnected) { + appendMessage(response.message); + } } }, error: function(xhr, status, error) {