Web Socket Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Test</title>
    <style>
        #log {
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <h1>WebSocket Test</h1>
    <div>
        <input type="text" id="messageInput" placeholder="Type a message..." />
        <button onclick="sendMessage()">Send Message</button>
    </div>
    <div id="log"></div>

    <script>
        let socket;
        const log = document.getElementById('log');

        function logMessage(message) {
            log.textContent += message + '\n';
            log.scrollTop = log.scrollHeight;
        }

        function connectWebSocket() {
            logMessage("Connecting to WebSocket...");
            
            socket = new WebSocket('wss://starbasedb.YOUR-IDENTIFIER.dev/socket?token=ABC123');

            socket.onopen = function() {
                logMessage("WebSocket connection opened.");
            };

            socket.onmessage = function(event) {
                logMessage("Received: " + event.data);
            };

            socket.onclose = function(event) {
                logMessage(`WebSocket closed with code: ${event.code}, reason: ${event.reason}, clean: ${event.wasClean}`);
            };

            socket.onerror = function(error) {
                logMessage("WebSocket error: " + error.message);
            };
        }

        function sendMessage() {
            const message = document.getElementById('messageInput').value;
            if (socket && socket.readyState === WebSocket.OPEN) {
                logMessage("Sending: " + message);

                socket.send(JSON.stringify({
                    sql: message, // Submit the messsage with a SQL statement such as "SELECT 1 + 1;"
                    params: [],
                    action: 'query'
                }));
            } else {
                logMessage("WebSocket is not open.");
            }
        }

        window.onload = connectWebSocket;
    </script>
</body>
</html>