111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
const form = document.getElementById('form');
|
|
const input = document.getElementById('input');
|
|
const recipientForm = document.getElementById('recipientForm');
|
|
const recipientInput = document.getElementById('recipient');
|
|
const messages = document.getElementById('messages');
|
|
const error = document.getElementById('error');
|
|
document.getElementById('input').placeholder = `Send message as: ${localStorage.getItem('username')}`;
|
|
let currentRecipient = null;
|
|
|
|
window.onload = () => {
|
|
document.getElementById('recipient').focus();
|
|
}
|
|
|
|
1
|
|
function initializeRecipient() {
|
|
const savedRecipient = localStorage.getItem('currentRecipient');
|
|
if (savedRecipient) {
|
|
currentRecipient = savedRecipient;
|
|
recipientInput.value = savedRecipient;
|
|
return currentRecipient;
|
|
}
|
|
}
|
|
|
|
async function getToken() {
|
|
try {
|
|
const response = await fetch('/auth/token');
|
|
if (!response.ok) {
|
|
console.log('Network response was not ok');
|
|
return null;
|
|
}
|
|
return await response.text();
|
|
} catch (error) {
|
|
console.error('There was a problem with token fetching', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function initializeSocket() {
|
|
const token = await getToken();
|
|
if (!token) {
|
|
console.error('Not logged in');
|
|
return;
|
|
}
|
|
|
|
const socket = io({
|
|
auth: {
|
|
token: token,
|
|
serverOffset: 0
|
|
}
|
|
});
|
|
|
|
socket.on('connect', () => {
|
|
console.log('Connected to server');
|
|
const initialRecipient = initializeRecipient();
|
|
socket.emit('get messages', initialRecipient);
|
|
});
|
|
|
|
socket.on('chat message', (msg) => {
|
|
console.log('Received message:', msg);
|
|
|
|
const { username, content, recipient } = msg;
|
|
console.log('Current recipient:', currentRecipient, 'Sender:', username, 'Recipient:', recipient);
|
|
|
|
if (recipient === currentRecipient || username === currentRecipient) {
|
|
const item = document.createElement('li');
|
|
item.textContent = `${username}: ${content}`;
|
|
messages.appendChild(item);
|
|
window.scrollTo(0, document.body.scrollHeight);
|
|
}
|
|
});
|
|
socket.on('no messages', () => {
|
|
console.log('No previous messages found');
|
|
messages.innerHTML = '<p>No messages found</p>';
|
|
});
|
|
socket.on('socket error', (msg) => {
|
|
console.log('There was an error: ', msg)
|
|
error.innerHTML = msg;
|
|
messages.innerHTML = '<p>No messages found</p>';
|
|
})
|
|
recipientForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
if (recipientInput.value) {
|
|
currentRecipient = recipientInput.value;
|
|
localStorage.setItem('currentRecipient', currentRecipient);
|
|
messages.innerHTML = '';
|
|
console.log('Requesting messages for recipient:', currentRecipient);
|
|
socket.emit('get messages', currentRecipient);
|
|
}
|
|
});
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
if (input.value && currentRecipient) {
|
|
console.log('Sending message:', input.value, 'to', currentRecipient);
|
|
socket.emit('chat message', { content: input.value, recipient: currentRecipient });
|
|
input.value = '';
|
|
}
|
|
});
|
|
socket.on('messages history', (messagesHistory) => {
|
|
console.log('Received messages history:', messagesHistory);
|
|
messages.innerHTML = ''; // Clear previous messages
|
|
for (const message of messagesHistory) {
|
|
const item = document.createElement('li');
|
|
item.textContent = `${message.username}: ${message.content}`;
|
|
messages.appendChild(item);
|
|
}
|
|
window.scrollTo(0, document.body.scrollHeight);
|
|
});
|
|
}
|
|
|
|
initializeSocket(); |