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

Improve the selfhosted webclient with a few new buttons!

Browse source
This commit is contained in:
Charles Descamps 2025-03-28 18:18:51 -07:00
parent 38e5049447
commit 20287030ac
1 changed files with 40 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

42
chatserver/templates/index.html
View file

@ -109,11 +109,13 @@
<body class="dark-mode">
<!-- Top Bar -->
<div id="topBar">
<span id="userInfo">Username: <strong id="currentUsername"></strong> | Chat Room: <strong id="currentChatRoom"></strong></span>
<span id="userInfo">Username: <strong id="currentUsername"></strong> | Chat Room: <strong id="currentChatRoom"></strong> | Server: <strong id="currentServer"></strong></span>
<div>
<button onclick="changeUsername()">Change Username</button>
<button onclick="changeChatRoom()">Change Chat Room</button>
<button onclick="toggleTheme()">Toggle Theme</button>
<button onclick="disconnectServer()">Disconnect</button>
<button onclick="changeServer()">Change Server</button>
</div>
</div>
@ -131,7 +133,7 @@
const defaultServerUrl = `${window.location.protocol}//${window.location.hostname}:5000`;
// Ask the user for the server URL, defaulting to the web client's host
const serverUrl = prompt(`Enter the WebSocket server URL (default: ${defaultServerUrl}):`) || defaultServerUrl;
let serverUrl = prompt(`Enter the WebSocket server URL (default: ${defaultServerUrl}):`) || defaultServerUrl;
// Connect to the WebSocket server
const socket = io(serverUrl);
@ -140,6 +142,10 @@
const messageInput = document.getElementById('message');
const currentUsernameElement = document.getElementById('currentUsername');
const currentChatRoomElement = document.getElementById('currentChatRoom');
const currentServerElement = document.getElementById('currentServer');
// Set the initial server URL in the top bar
currentServerElement.textContent = serverUrl;
// Ask the user for their username and chat room
let username = prompt("Enter your username:") || "Anonymous";
@ -211,6 +217,38 @@
}
}
// Disconnect from the current server
function disconnectServer() {
if (socket.connected) {
socket.disconnect();
console.log("Disconnected from the server");
alert("You have been disconnected from the server.");
currentServerElement.textContent = "Disconnected"; // Update the displayed server URL
} else {
alert("You are not connected to any server.");
}
}
// Change the server to connect to
function changeServer() {
if (socket.connected) {
socket.disconnect();
console.log("Disconnected from the current server");
}
const newServerUrl = prompt("Enter the new WebSocket server URL (e.g., http://localhost:5000):");
if (newServerUrl && newServerUrl.trim() !== "") {
serverUrl = newServerUrl.trim();
console.log(`Connecting to new server: ${serverUrl}`);
socket.io.uri = serverUrl; // Update the server URL
socket.connect(); // Reconnect to the new server
currentServerElement.textContent = serverUrl; // Update the displayed server URL
alert(`Connected to the new server: ${serverUrl}`);
} else {
alert("Server URL cannot be empty.");
}
}
// Toggle between light mode and dark mode
function toggleTheme() {
const body = document.body;