116 lines
3.7 KiB
JavaScript
116 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 logoutButton = document.getElementById('logout');
|
|
|
|
let currentRecipient = null;
|
|
|
|
window.onload = () => {
|
|
document.getElementById('recipient').focus();
|
|
}
|
|
|
|
logoutButton.onclick = logout;
|
|
function logout() {
|
|
fetch('/auth/logout', {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
window.location.href = '/login';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Logout failed:', error);
|
|
});
|
|
}
|
|
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, serverOffset) => {
|
|
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);
|
|
}
|
|
});
|
|
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(); |