Spaces:
Sleeping
Sleeping
File size: 2,375 Bytes
057f1c2 5c6cf03 057f1c2 5c6cf03 057f1c2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
document.addEventListener('DOMContentLoaded', () => {
const messagesContainer = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
let userId = localStorage.getItem('samuel_user_id');
if (!userId) {
userId = 'user_' + Math.random().toString(36).substr(2, 9);
localStorage.setItem('samuel_user_id', userId);
}
let socket;
function connectWebSocket() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}/ws/${userId}`;
socket = new WebSocket(wsUrl);
socket.onopen = () => {
console.log('Conexión establecida');
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
addMessage(data.text, 'samuel', data.timestamp);
};
socket.onclose = () => {
console.log('Conexión cerrada. Reintentando en 5 segundos...');
setTimeout(connectWebSocket, 5000);
};
socket.onerror = (error) => {
console.error('Error en WebSocket:', error);
};
}
connectWebSocket();
function sendMessage() {
const message = messageInput.value.trim();
if (message && socket && socket.readyState === WebSocket.OPEN) {
addMessage(message, 'user');
socket.send(JSON.stringify({ text: message }));
messageInput.value = '';
messageInput.focus();
}
}
function addMessage(text, sender, timestamp) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${sender}`;
const messageContent = document.createElement('p');
messageContent.textContent = text;
messageDiv.appendChild(messageContent);
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
sendButton.addEventListener('click', sendMessage);
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
messageInput.focus();
}); |