cdez/CS460-Projects
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new features to the webclient, and allow for message history to be displayed in the webclient.

Browse source
This commit is contained in:
Charles Descamps 2025-03-28 18:29:23 -07:00
parent 20287030ac
commit 8a1728f083
1 changed files with 49 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

49
chatserver/templates/index.html
View file

@ -159,6 +159,25 @@
console.log('Joining chat room:', { username: username, chat_room: chatRoom });
socket.emit('join', { username: username, chat_room: chatRoom });
// Fetch message history for the initial chat room
fetch(`/get_history?chat_room=${chatRoom}`)
.then(response => response.json())
.then(data => {
if (data.messages) {
data.messages.forEach(message => {
const messageElement = document.createElement('div');
messageElement.textContent = message;
chatDiv.appendChild(messageElement);
});
chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
} else {
console.log("No message history found for this chat room.");
}
})
.catch(error => {
console.error("Error fetching message history:", error);
});
// Log connection status
socket.on('connect', () => {
console.log('Connected to WebSocket server');
@ -214,6 +233,25 @@
console.log(`Switched to chat room: ${chatRoom}`);
socket.emit('join', { username: username, chat_room: chatRoom });
chatDiv.innerHTML = ""; // Clear the chat history
// Fetch message history for the new chat room
fetch(`/get_history?chat_room=${chatRoom}`)
.then(response => response.json())
.then(data => {
if (data.messages) {
data.messages.forEach(message => {
const messageElement = document.createElement('div');
messageElement.textContent = message;
chatDiv.appendChild(messageElement);
});
chatDiv.scrollTop = chatDiv.scrollHeight; // Auto-scroll to the bottom
} else {
console.log("No message history found for this chat room.");
}
})
.catch(error => {
console.error("Error fetching message history:", error);
});
}
}
@ -249,6 +287,17 @@
}
}
// Reconnect to the server
function reconnectServer() {
if (!socket.connected) {
console.log("Reconnecting to the server...");
socket.connect();
alert("Reconnected to the server.");
} else {
alert("You are already connected to the server.");
}
}
// Toggle between light mode and dark mode
function toggleTheme() {
const body = document.body;