Web Socket connection query support #15

Brayden · 2024-10-08T00:53:08Z

Purpose

Allow clients to query the database from a web socket connection instead of HTTP endpoints. Other changes were required for this to work such as the refactoring of enqueueOperation to return the data, error message and status code instead of a constructed Response object. Sockets need a value returned to them and not a Response.

Tasks

Allow users to establish a connection via web sockets
Authorize the token is passed in and matches the ENV value
Ensure the socket response only is received by the requestor connection
Refactor enqueueOperation to respond with data instead of a response

Verify

socket.html

<!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-ID-HERE}.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>

Before

After

Web Socket connection query support

fc3a9ad

Brayden self-assigned this Oct 8, 2024

Brayden added the enhancement New feature or request label Oct 8, 2024

Brayden added 3 commits October 8, 2024 09:59

Merge with latest from main

bbd4453

Merge remote-tracking branch 'origin/main' into bwilmoth/websocket

ccd4607

Remove connections map for socket connections

d8ec0bc

Brayden marked this pull request as ready for review October 8, 2024 20:25

Brayden added 2 commits October 8, 2024 17:16

Add connections map with tags

cc1848e

Update README

28f60a4

Brayden merged commit 1958099 into main Oct 8, 2024

Brayden deleted the bwilmoth/websocket branch October 8, 2024 23:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web Socket connection query support #15

Web Socket connection query support #15

Brayden commented Oct 8, 2024 •

edited

Loading

Web Socket connection query support #15

Web Socket connection query support #15

Conversation

Brayden commented Oct 8, 2024 • edited Loading

Purpose

Tasks

Verify

Before

After

Brayden commented Oct 8, 2024 •

edited

Loading