GoLang Chat Application

### Implementing WebSocket Client Connection Logic in JavaScript Now that we have our WebSocket server set up, let's move on to implementing the client-side WebSocket connection logic. This will allow our chat application to communicate with the server and handle real-time messaging. #### Step 1: Create the HTML Structure First, let's create a simple HTML file (`index.html`) that will serve as our chat interface. This will include: - A text input for users to type messages - A button to send messages - A display area to show messages - A status indicator for connection status ```html GoLang Chat Application

Connecting...

``` #### Step 2: Implement WebSocket Connection Logic Next, let's create a JavaScript file (`chat.js`) that will handle the WebSocket connection and messaging logic. ```javascript // Configure WebSocket connection const wsUrl = 'ws://localhost:8080/ws'; const messageDisplay = document.getElementById('message-display'); const messageInput = document.getElementById('message-input'); const sendButton = document.getElementById('send-button'); const connectionStatus = document.getElementById('connection-status'); // Store the WebSocket connection let ws = null; // Connect to WebSocket server function connectToWebSocket() { ws = new WebSocket(wsUrl); // Handle connection open ws.onopen = function(event) { console.log('Connected to the WebSocket server'); connectionStatus.textContent = 'Connected'; connectionStatus.style.backgroundColor = '#4CAF50'; // Enable send button sendButton.disabled = false; // Send initial message ws.send(JSON.stringify({ type: 'connection', message: 'New client connected' })); }; // Handle incoming messages ws.onmessage = function(event) { console.log('Received message:', event.data); handleIncomingMessage(event.data); }; // Handle connection close ws.onclose = function(event) { console.log('Disconnected from server'); connectionStatus.textContent = 'Disconnected'; connectionStatus.style.backgroundColor = '#f44336'; // Disable send button sendButton.disabled = true; }; // Handle connection errors ws.onerror = function(event) { console.error('WebSocket error:', event); connectionStatus.textContent = 'Connection Error'; connectionStatus.style.backgroundColor = '#ff9800'; }; } // Handle incoming messages function handleIncomingMessage(data) { try { const message = JSON.parse(data); if (message.type === 'message') { appendMessage(message.data, 'other'); } else if (message.type === 'connection') { appendMessage(message.message, 'info'); } } catch (error) { console.error('Error parsing message:', error); appendMessage(data, 'error'); } } // Send message to server function sendMessage() { const messageInput = document.getElementById('message-input'); const message = messageInput.value.trim(); if (message) { const messageData = { type: 'message', data: message }; ws.send(JSON.stringify(messageData)); messageInput.value = ''; appendMessage(message, 'self'); } } // Append message to display area function appendMessage(message, sender) { const messageElement = document.createElement('div'); messageElement.className = `message ${sender}`; let messageHTML = ` ${message} `; if (sender === 'self') { messageHTML += ` You `; } else { messageHTML += ` Other `; } messageElement.innerHTML = messageHTML; messageDisplay.appendChild(messageElement); // Scroll to bottom messageDisplay.scrollTop = messageDisplay.scrollHeight; } // Event Listeners sendButton.addEventListener('click', sendMessage); messageInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessage(); } }); // Initialize connection connectToWebSocket(); ``` #### Step 3: Add Message Input Validation Let's add some basic input validation to ensure that messages are valid before sending them. ```javascript // Modified sendMessage function with validation function sendMessage() { const messageInput = document.getElementById('message-input'); const message = messageInput.value.trim(); if (!message) { alert('Please enter a message'); return; } if (message.length > 500) { alert('Message too long! Maximum 500 characters.'); return; } const messageData = { type: 'message', data: message }; ws.send(JSON.stringify(messageData)); messageInput.value = ''; appendMessage(message, 'self'); } ``` #### Step 4: Implement Connection Status Indicator We've already included a connection status indicator in our HTML. The JavaScript code updates this status based on the WebSocket connection state. #### Step 5: Style the Interface We've included basic CSS styling in the HTML file to make the interface look clean and professional. You can further customize the styles as needed. #### Step 6: Test the Application 1. Start your GoLang WebSocket server 2. Open two or more browser tabs 3. Navigate to `http://localhost:8080` in each tab 4. Test sending messages between different tabs ### Next Steps Now that we've implemented the basic client connection logic, you can move on to: 1. Adding user authentication 2. Implementing message history 3. Adding error handling and recovery 4. Implementing SSL/TLS support 5. Adding rate limiting 6. Implementing logging and monitoring ### What to Read More About 1. [WebSocket Protocol Specification](https://tools.ietf.org/html/rfc6455) 2. [JavaScript WebSocket API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) 3. [Gorilla WebSocket Package Documentation](https://pkg.go.dev/github.com/gorilla/websocket) 4. [HTML5 WebSocket Tutorial](https://www.tutorialspoint.com/html5/html5_websocket.htm) This implementation provides a solid foundation for a real-time chat application. You can now build upon this foundation by adding additional features and enhancements as needed.