134 lines
4.0 KiB
JavaScript
134 lines
4.0 KiB
JavaScript
let ws = null;
|
|
let accessToken = null;
|
|
|
|
const messagesDiv = document.getElementById('messages');
|
|
const messageInput = document.getElementById('messageInput');
|
|
const roomSelect = document.getElementById('roomSelect');
|
|
const authStatus = document.getElementById('authStatus');
|
|
|
|
async function login() {
|
|
const usernameInput = document.getElementById('userInput');
|
|
const username = usernameInput ? usernameInput.value.trim() : '';
|
|
|
|
if (!username) {
|
|
alert('Enter username');
|
|
return;
|
|
}
|
|
|
|
authStatus.textContent = 'Logging in...';
|
|
|
|
const resp = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username }),
|
|
});
|
|
|
|
if (!resp.ok) {
|
|
const text = await resp.text();
|
|
authStatus.textContent = 'Login failed';
|
|
console.error('Login failed:', resp.status, text);
|
|
return;
|
|
}
|
|
|
|
const data = await resp.json();
|
|
accessToken = data.access_token || null;
|
|
|
|
if (!accessToken) {
|
|
authStatus.textContent = 'Login failed';
|
|
return;
|
|
}
|
|
|
|
authStatus.textContent = '✅ Logged in';
|
|
}
|
|
|
|
function loadRooms() {
|
|
fetch('/api/rooms')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
roomSelect.innerHTML = '';
|
|
(data.rooms || []).forEach(room => {
|
|
const option = document.createElement('option');
|
|
option.value = room;
|
|
option.textContent = room;
|
|
roomSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading rooms:', error);
|
|
});
|
|
}
|
|
|
|
function connectRoom() {
|
|
const room = roomSelect.value || 'general';
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const host = window.location.host;
|
|
|
|
if (!accessToken) {
|
|
alert('Please login first');
|
|
return;
|
|
}
|
|
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
|
|
const wsUrl = `${protocol}//${host}/ws/${room}?token=${encodeURIComponent(accessToken)}`;
|
|
ws = new WebSocket(wsUrl);
|
|
|
|
ws.onopen = function() {
|
|
fetch(`/api/messages/${room}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
messagesDiv.innerHTML = '';
|
|
const history = data.messages || [];
|
|
if (history.length > 0) {
|
|
history.reverse().forEach(msg => {
|
|
const msgDiv = document.createElement('div');
|
|
msgDiv.className = 'message';
|
|
msgDiv.textContent = `${msg.user}: ${msg.text}`;
|
|
messagesDiv.appendChild(msgDiv);
|
|
});
|
|
}
|
|
const connectMsg = document.createElement('div');
|
|
connectMsg.className = 'message';
|
|
connectMsg.textContent = `✅ Connected to ${room}`;
|
|
messagesDiv.appendChild(connectMsg);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
})
|
|
.catch(error => {
|
|
console.error('History error', error);
|
|
});
|
|
};
|
|
|
|
ws.onmessage = function(event) {
|
|
const msgDiv = document.createElement('div');
|
|
msgDiv.className = 'message';
|
|
msgDiv.textContent = event.data;
|
|
messagesDiv.appendChild(msgDiv);
|
|
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
};
|
|
|
|
ws.onerror = function(error) {
|
|
console.error('WebSocket error:', error);
|
|
messagesDiv.innerHTML += '<div class="message">❌ Error: ' + error + '</div>';
|
|
};
|
|
|
|
ws.onclose = function() {
|
|
messagesDiv.innerHTML += '<div class="message">⛔ Disconnected</div>';
|
|
};
|
|
}
|
|
|
|
function sendMessage() {
|
|
const text = messageInput.value.trim();
|
|
|
|
if (!text || !ws || ws.readyState !== WebSocket.OPEN) {
|
|
alert('Not connected or empty message');
|
|
return;
|
|
}
|
|
|
|
ws.send(JSON.stringify({ text }));
|
|
messageInput.value = '';
|
|
}
|
|
|
|
loadRooms();
|