bluesky-firehose.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bluesky WebSocket Feed Monitor</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .textarea-container {
            margin: 20px 0;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-top: 10px;
            padding: 10px;
            font-family: monospace;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        #output {
            height: 400px;
        }
        .controls {
            margin: 20px 0;
        }
        button {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
        }
        .error {
            color: red;
            margin-top: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>Bluesky WebSocket Feed Monitor</h1>
    <div class="controls">
        <button id="connect">Connect</button>
        <button id="disconnect">Disconnect</button>
        <button id="clear">Clear Log</button>
    </div>
    
    <div class="textarea-container">
        <h3>Send Message</h3>
        <textarea id="input" placeholder="Paste your JSON message here..."></textarea>
        <div id="jsonError" class="error"></div>
        <button id="send">Send Message</button>
<p>Example message to filter for only specific DID handles (<a href="https://tools.simonwillison.net/bluesky-resolve">resolve those here</a>):</p>
<pre><code>
{
  "type": "options_update",
  "payload": {
    "wantedCollections": ["app.bsky.feed.post"],
    "wantedDids": ["did:plc:kft6lu4trxowqmter2b6vg6z"],
    "maxMessageSizeBytes": 1000000
  }
}</code></pre>
    </div>

    <div class="textarea-container">
        <h3>Log Output</h3>
        <textarea id="output" readonly></textarea>
    </div>

    <script>
        let ws = null;
        const output = document.getElementById('output');
        const input = document.getElementById('input');
        const jsonError = document.getElementById('jsonError');
        
        function log(message) {
            const timestamp = new Date().toISOString();
            output.value += `[${timestamp}] ${message}\n`;
            output.scrollTop = output.scrollHeight;
        }

        function connect() {
            if (ws) {
                log('Already connected!');
                return;
            }

            try {
                ws = new WebSocket('wss://jetstream2.us-east.bsky.network/subscribe?wantedCollections=app.bsky.feed.post');
                
                ws.onopen = () => {
                    log('Connected to Bluesky WebSocket');
                };

                ws.onmessage = (event) => {
                    try {
                        const data = JSON.parse(event.data);
                        log(`Received: ${JSON.stringify(data, null, 2)}`);
                    } catch (e) {
                        log(`Raw message: ${event.data}`);
                    }
                };

                ws.onerror = (error) => {
                    log(`WebSocket Error: ${error.message}`);
                };

                ws.onclose = () => {
                    log('Disconnected from Bluesky WebSocket');
                    ws = null;
                };

            } catch (error) {
                log(`Connection Error: ${error.message}`);
                ws = null;
            }
        }

        function disconnect() {
            if (ws) {
                ws.close();
                ws = null;
                log('Disconnected by user');
            } else {
                log('Not connected');
            }
        }

        function sendMessage() {
            if (!ws) {
                log('Not connected to WebSocket');
                return;
            }

            const message = input.value.trim();
            if (!message) {
                jsonError.textContent = 'Please enter a message';
                return;
            }

            try {
                // Validate JSON
                const jsonMessage = JSON.parse(message);
                
                // Send the message
                ws.send(JSON.stringify(jsonMessage));
                log(`Sent: ${message}`);
                jsonError.textContent = '';
            } catch (error) {
                jsonError.textContent = 'Invalid JSON format';
                log(`Failed to send message: Invalid JSON format`);
            }
        }

        // Event Listeners
        document.getElementById('connect').addEventListener('click', connect);
        document.getElementById('disconnect').addEventListener('click', disconnect);
        document.getElementById('clear').addEventListener('click', () => {
            output.value = '';
        });
        document.getElementById('send').addEventListener('click', sendMessage);

        // Add keyboard shortcut (Ctrl/Cmd + Enter) to send message
        input.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>