dockerfile, other bs

2024-11-14 22:42:38 +02:00
parent 80640ebeab
commit 7678ea3812
9 changed files with 359 additions and 13 deletions
--- a/uploads/index.html
+++ b/uploads/index.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>WebSocket Chat</title>
+<style>
+body {
+font-family: Arial, sans-serif;
+max-width: 800px;
+margin: 20px auto;
+padding: 0 20px;
+}
+
+#chat-container {
+border: 1px solid #ccc;
+border-radius: 4px;
+padding: 20px;
+margin-bottom: 20px;
+}
+
+#messages {
+height: 400px;
+overflow-y: auto;
+border: 1px solid #eee;
+padding: 10px;
+margin-bottom: 20px;
+border-radius: 4px;
+}
+
+.message {
+margin: 5px 0;
+padding: 5px;
+border-radius: 4px;
+}
+
+.message.sent {
+background-color: #e3f2fd;
+margin-left: 20%;
+}
+
+.message.received {
+background-color: #f5f5f5;
+margin-right: 20%;
+}
+
+.input-container {
+display: flex;
+gap: 10px;
+}
+
+#message-input {
+flex-grow: 1;
+padding: 8px;
+border: 1px solid #ccc;
+border-radius: 4px;
+}
+
+button {
+padding: 8px 16px;
+background-color: #2196f3;
+color: white;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+}
+
+button:hover {
+background-color: #1976d2;
+}
+
+button:disabled {
+background-color: #ccc;
+cursor: not-allowed;
+}
+
+#connection-status {
+padding: 10px;
+margin-bottom: 20px;
+border-radius: 4px;
+text-align: center;
+}
+
+.connected {
+background-color: #c8e6c9;
+color: #2e7d32;
+}
+
+.disconnected {
+background-color: #ffcdd2;
+color: #c62828;
+}
+</style>
+</head>
+<body>
+<div id="chat-container">
+<h2>WebSocket Chat</h2>
+<div id="connection-status" class="disconnected">Disconnected</div>
+<div id="messages"></div>
+<div class="input-container">
+<input type="text" id="message-input" placeholder="Type a message..." disabled>
+<button id="send-btn" disabled>Send</button>
+<button id="connect-btn">Connect</button>
+</div>
+</div>
+
+<script>
+const messagesDiv = document.getElementById('messages');
+const messageInput = document.getElementById('message-input');
+const sendButton = document.getElementById('send-btn');
+const connectButton = document.getElementById('connect-btn');
+const statusDiv = document.getElementById('connection-status');
+
+let ws = null;
+let username = null;
+
+function connect() {
+if (ws) {
+ws.close();
+}
+
+// Get username if not already set
+if (!username) {
+username = prompt('Enter your username:');
+if (!username) {
+alert('Username is required!');
+return;
+}
+}
+
+// Create WebSocket connection
+ws = new WebSocket('ws://localhost:8081/chat');
+
+ws.onopen = () => {
+console.log('Connected to WebSocket server');
+statusDiv.textContent = 'Connected';
+statusDiv.className = 'connected';
+messageInput.disabled = false;
+sendButton.disabled = false;
+connectButton.textContent = 'Disconnect';
+};
+
+ws.onclose = () => {
+console.log('Disconnected from WebSocket server');
+statusDiv.textContent = 'Disconnected';
+statusDiv.className = 'disconnected';
+messageInput.disabled = true;
+sendButton.disabled = true;
+connectButton.textContent = 'Connect';
+ws = null;
+};
+
+ws.onerror = (error) => {
+console.error('WebSocket error:', error);
+alert('Error connecting to WebSocket server');
+};
+
+ws.onmessage = (event) => {
+try {
+const data = JSON.parse(event.data);
+addMessage(data.username, data.message, data.username === username);
+} catch (e) {
+console.error('Error parsing message:', e);
+}
+};
+}
+
+function disconnect() {
+if (ws) {
+ws.close();
+}
+}
+
+function sendMessage() {
+if (!ws || ws.readyState !== WebSocket.OPEN) {
+alert('Not connected to server');
+return;
+}
+
+const message = messageInput.value.trim();
+if (message) {
+const data = {
+username: username,
+message: message
+};
+ws.send(JSON.stringify(data));
+messageInput.value = '';
+}
+}
+
+function addMessage(username, message, isSent) {
+const messageDiv = document.createElement('div');
+messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;
+messageDiv.textContent = `${username}: ${message}`;
+messagesDiv.appendChild(messageDiv);
+messagesDiv.scrollTop = messagesDiv.scrollHeight;
+}
+
+// Event listeners
+connectButton.addEventListener('click', () => {
+if (ws) {
+disconnect();
+} else {
+connect();
+}
+});
+
+sendButton.addEventListener('click', sendMessage);
+
+messageInput.addEventListener('keypress', (e) => {
+if (e.key === 'Enter') {
+sendMessage();
+}
+});
+
+// Handle page close/reload
+window.addEventListener('beforeunload', () => {
+if (ws) {
+ws.close();
+}
+});
+</script>
+</body>
+</html>