jsgui3-server 0.0.140 → 0.0.141

package/examples/controls/15) window, observable SSE/client.js

@@ -0,0 +1,395 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control} = jsgui;
+
+const Active_HTML_Document = require('../../../controls/Active_HTML_Document');
+
+/**
+ * Demo showing Server-Sent Events (SSE) with observable pattern.
+ * 
+ * This demonstrates:
+ * 1. Server publishing an observable that emits events over time
+ * 2. Client consuming SSE stream and updating UI reactively
+ * 3. Real-time updates from server to client via SSE
+ */
+class Observable_Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'observable_demo_ui';
+        super(spec);
+        const {context} = this;
+
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('observable-demo-ui');
+        }
+
+        const compose = () => {
+            // Container
+            const container = new controls.div({
+                context: context,
+                'class': 'sse-container'
+            });
+            this.body.add(container);
+
+            // Header
+            const header = new controls.div({
+                context: context,
+                'class': 'sse-header'
+            });
+            container.add(header);
+            
+            const title = new controls.h2({
+                context: context
+            });
+            title.add('Observable SSE Demo - Real-Time Tick Stream');
+            header.add(title);
+
+            // Status display
+            const status_div = new controls.div({
+                context: context,
+                'class': 'status-section'
+            });
+            status_div.dom.attributes.id = 'status-label';
+            status_div.add('Status: Not connected');
+            container.add(status_div);
+
+            // Tick counter display
+            const tick_display = new controls.div({
+                context: context,
+                'class': 'tick-display'
+            });
+            container.add(tick_display);
+
+            const tick_count = new controls.div({
+                context: context,
+                'class': 'tick-count'
+            });
+            tick_count.dom.attributes.id = 'tick-count';
+            tick_count.add('--');
+            tick_display.add(tick_count);
+
+            const tick_label = new controls.div({
+                context: context,
+                'class': 'tick-label'
+            });
+            tick_label.add('Server Ticks');
+            tick_display.add(tick_label);
+
+            // Event log
+            const log_label = new controls.div({
+                context: context,
+                'class': 'log-label'
+            });
+            log_label.add('Event Log (SSE messages):');
+            container.add(log_label);
+
+            const event_log = new controls.div({
+                context: context,
+                'class': 'event-log'
+            });
+            event_log.dom.attributes.id = 'event-log';
+            container.add(event_log);
+
+            // Control buttons
+            const button_container = new controls.div({
+                context: context,
+                'class': 'button-container'
+            });
+            container.add(button_container);
+
+            const connect_button = new controls.Button({
+                context: context,
+                text: 'Connect to SSE'
+            });
+            connect_button.dom.attributes.id = 'connect-btn';
+            button_container.add(connect_button);
+
+            const disconnect_button = new controls.Button({
+                context: context,
+                text: 'Disconnect'
+            });
+            disconnect_button.dom.attributes.id = 'disconnect-btn';
+            button_container.add(disconnect_button);
+
+            const clear_button = new controls.Button({
+                context: context,
+                text: 'Clear Log'
+            });
+            clear_button.dom.attributes.id = 'clear-btn';
+            button_container.add(clear_button);
+        };
+
+        if (!spec.el) {
+            compose();
+        }
+    }
+
+    activate() {
+        if (!this.__active) {
+            super.activate();
+
+            // Get DOM references via getElementById (works on client)
+            const status_label = document.getElementById('status-label');
+            const tick_count_el = document.getElementById('tick-count');
+            const event_log = document.getElementById('event-log');
+            const connect_button = document.getElementById('connect-btn');
+            const disconnect_button = document.getElementById('disconnect-btn');
+            const clear_button = document.getElementById('clear-btn');
+
+            let event_source = null;
+            let message_count = 0;
+
+            const log_event = (message, type = 'info') => {
+                const timestamp = new Date().toLocaleTimeString();
+                const log_entry = document.createElement('div');
+                log_entry.textContent = `[${timestamp}] ${message}`;
+                log_entry.className = `log-entry log-${type}`;
+                event_log.appendChild(log_entry);
+                
+                // Auto-scroll to bottom
+                event_log.scrollTop = event_log.scrollHeight;
+
+                // Keep only last 50 entries
+                message_count++;
+                if (message_count > 50) {
+                    const first_child = event_log.firstChild;
+                    if (first_child) {
+                        event_log.removeChild(first_child);
+                    }
+                }
+            };
+
+            const connect_sse = () => {
+                if (event_source) {
+                    event_source.close();
+                }
+
+                status_label.textContent = 'Status: Connecting...';
+                log_event('Connecting to /api/tick-stream...', 'info');
+
+                // Connect to the observable SSE endpoint
+                event_source = new EventSource('/api/tick-stream');
+
+                event_source.onopen = () => {
+                    status_label.textContent = 'Status: Connected (streaming)';
+                    log_event('Connected! Receiving real-time tick events...', 'success');
+                };
+
+                event_source.onmessage = (event) => {
+                    try {
+                        // Handle the initial "OK" message
+                        if (event.data === 'OK') {
+                            log_event('SSE handshake complete', 'info');
+                            return;
+                        }
+
+                        const data = JSON.parse(event.data);
+                        
+                        // Update the tick counter display
+                        if (data.tick !== undefined) {
+                            tick_count_el.textContent = data.tick.toString();
+                            log_event(`Tick #${data.tick}: ${data.message}`, 'tick');
+                        }
+                        
+                        if (data.error) {
+                            status_label.textContent = 'Status: Error';
+                            log_event(`Error: ${data.error}`, 'error');
+                        }
+                    } catch (e) {
+                        // Non-JSON message (like "OK")
+                        log_event(`Raw: ${event.data}`, 'info');
+                    }
+                };
+
+                event_source.onerror = (err) => {
+                    status_label.textContent = 'Status: Disconnected';
+                    log_event('Connection lost or error occurred', 'warning');
+                    if (event_source) {
+                        event_source.close();
+                        event_source = null;
+                    }
+                };
+            };
+
+            const disconnect_sse = () => {
+                if (event_source) {
+                    event_source.close();
+                    event_source = null;
+                    status_label.textContent = 'Status: Disconnected';
+                    log_event('Manually disconnected from SSE stream', 'info');
+                }
+            };
+
+            // Button handlers
+            connect_button.addEventListener('click', () => {
+                connect_sse();
+            });
+
+            disconnect_button.addEventListener('click', () => {
+                disconnect_sse();
+            });
+
+            clear_button.addEventListener('click', () => {
+                event_log.innerHTML = '';
+                message_count = 0;
+                tick_count_el.textContent = '--';
+                status_label.textContent = 'Status: Not connected';
+                log_event('Log cleared', 'info');
+            });
+
+            log_event('Observable SSE Demo ready. Click "Connect to SSE" to begin streaming.', 'info');
+        }
+    }
+}
+
+Observable_Demo_UI.css = `
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: #1a1a2e;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.observable-demo-ui {
+    padding: 20px;
+}
+
+.sse-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #16213e;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.sse-header {
+    text-align: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e94560;
+}
+
+.sse-header h2 {
+    color: #e94560;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.status-section {
+    padding: 12px;
+    margin-bottom: 15px;
+    background: #0f3460;
+    border-radius: 6px;
+    color: #e0e0e0;
+    font-weight: 500;
+    text-align: center;
+}
+
+.tick-display {
+    text-align: center;
+    padding: 25px;
+    margin-bottom: 20px;
+    background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%);
+    border-radius: 10px;
+    border: 2px solid #e94560;
+}
+
+.tick-count {
+    font-size: 64px;
+    font-weight: bold;
+    color: #e94560;
+    text-shadow: 0 0 30px rgba(233, 69, 96, 0.6);
+    font-family: 'Consolas', 'Monaco', monospace;
+    line-height: 1;
+}
+
+.tick-label {
+    color: #7ec8e3;
+    font-size: 14px;
+    margin-top: 10px;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+}
+
+.log-label {
+    color: #e0e0e0;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.event-log {
+    height: 180px;
+    overflow-y: auto;
+    background: #0f0f23;
+    border: 1px solid #333;
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 15px;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 12px;
+}
+
+.log-entry {
+    padding: 4px 0;
+    border-bottom: 1px solid #222;
+}
+
+.log-info { color: #7ec8e3; }
+.log-success { color: #50c878; }
+.log-warning { color: #ffa500; }
+.log-error { color: #ff6b6b; }
+.log-tick { color: #e94560; }
+
+.button-container {
+    display: flex;
+    gap: 10px;
+}
+
+.button-container button {
+    flex: 1;
+    padding: 14px 20px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.button-container button:first-child {
+    background: linear-gradient(135deg, #0f3460 0%, #e94560 100%);
+    color: white;
+}
+
+.button-container button:first-child:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
+}
+
+.button-container button:nth-child(2) {
+    background: #e94560;
+    color: white;
+}
+
+.button-container button:nth-child(2):hover {
+    background: #d63850;
+}
+
+.button-container button:last-child {
+    background: #333;
+    color: #e0e0e0;
+}
+
+.button-container button:last-child:hover {
+    background: #444;
+}
+`;
+
+controls.Observable_Demo_UI = Observable_Demo_UI;
+
+module.exports = jsgui;

package/examples/controls/15) window, observable SSE/server.js

@@ -0,0 +1,111 @@
+const jsgui = require('./client');
+const Server = require('../../../server');
+const {Observable_Demo_UI} = jsgui.controls;
+const {obs, observable} = require('fnl');
+
+// Import the Observable Publisher
+const Observable_Publisher = require('../../../publishers/http-observable-publisher');
+
+/**
+ * Server demonstrating HTTP_Observable_Publisher with Server-Sent Events (SSE).
+ * 
+ * This example shows:
+ * 1. Creating an observable that emits progress events over time
+ * 2. Publishing it via HTTP_Observable_Publisher (uses SSE transport)
+ * 3. Client consuming the stream with EventSource API
+ * 
+ * The fnl observable pattern:
+ * - obs((next, complete, error) => {...}) creates an observable
+ * - next(data) emits intermediate values (progress updates)
+ * - complete(result) signals successful completion
+ * - error(err) signals failure
+ * 
+ * IMPORTANT: This example uses a "hot" observable that emits a continuous
+ * tick stream. The HTTP_Observable_Publisher creates an SSE connection
+ * and forwards all 'next' events to the client.
+ */
+
+if (require.main === module) {
+
+    const server = new Server({
+        Ctrl: Observable_Demo_UI,
+        'src_path_client_js': require.resolve('./client.js'),
+    });
+
+    server.on('ready', () => {
+        console.log('Server ready, setting up observable endpoints...');
+
+        // ========================================
+        // Create a "hot" observable for tick stream
+        // This emits continuously, clients join the stream
+        // ========================================
+        let tick_count = 0;
+        const tick_observable = observable((next, complete, error) => {
+            // Start a tick interval that all subscribers share
+            const interval = setInterval(() => {
+                tick_count++;
+                next({
+                    tick: tick_count,
+                    timestamp: Date.now(),
+                    message: `Server tick #${tick_count}`
+                });
+            }, 1000); // Tick every second
+            
+            // Return cleanup (called when observable is disposed)
+            return [() => {
+                clearInterval(interval);
+                console.log('Tick observable cleanup');
+            }];
+        });
+
+        // Create the observable publisher for the tick stream
+        const tick_publisher = new Observable_Publisher({
+            obs: tick_observable
+        });
+
+        // Register the SSE endpoint with the server's router
+        server.server_router.set_route('/api/tick-stream', tick_publisher, tick_publisher.handle_http);
+        console.log('  ✓ /api/tick-stream - Hot tick stream (SSE)');
+
+        // ========================================
+        // Also publish a simple JSON API endpoint for comparison
+        // ========================================
+        server.publish('/api/status', () => {
+            return {
+                status: 'ok',
+                tick_count: tick_count,
+                uptime: process.uptime(),
+                note: 'This is a regular JSON endpoint (one-shot). Use /api/tick-stream for SSE.'
+            };
+        });
+        console.log('  ✓ /api/status - Regular JSON API (comparison)');
+
+        // Start the server (allow PORT env variable for testing)
+        const port = parseInt(process.env.PORT, 10) || 52015;
+        server.start(port, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                console.log('');
+                console.log('='.repeat(60));
+                console.log('Observable SSE Demo Server Started');
+                console.log('='.repeat(60));
+                console.log('');
+                console.log(`Open http://localhost:${port} in your browser`);
+                console.log('');
+                console.log('This demo shows:');
+                console.log('  • Server-side observable emitting tick events');
+                console.log('  • HTTP_Observable_Publisher serving as SSE endpoint');
+                console.log('  • Client consuming stream with EventSource API');
+                console.log('  • Real-time UI updates from server events');
+                console.log('');
+                console.log('Endpoints:');
+                console.log('  GET /api/tick-stream - SSE stream (text/event-stream)');
+                console.log('  GET /api/status      - JSON status (application/json)');
+                console.log('');
+                console.log('Click "Connect to SSE" to see real-time streaming!');
+                console.log('='.repeat(60));
+            }
+        });
+    });
+}

package/http/responders/static/Static_Route_HTTP_Responder.js

@@ -29,13 +29,13 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
         // Give it the bundle object as spec...?
 
 
-    }
-    handle_http(req, res) {
-        const r_headers = req.headers;
-        const accept_encoding = r_headers['accept-encoding'];
-
-        // Need to call it with the correct context.
-        //   Seems like jsgui3-html Router and Routing_Tree need some more fixes.
+    }
+    handle_http(req, res) {
+        const r_headers = req.headers;
+        const accept_encoding = r_headers['accept-encoding'] || '';
+
+        // Need to call it with the correct context.
+        //   Seems like jsgui3-html Router and Routing_Tree need some more fixes.
 
         const {type, extension, text, route, response_buffers, response_headers} = this;
 
@@ -46,14 +46,14 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
 
 
 
-        // See about 'gzip'.
-        //   Not sure why br does not show up as normal.
-
-        const supported_encodings = {};
-
-        if (accept_encoding.includes('gzip')) supported_encodings.gzip = true;
-
-        if (accept_encoding.includes('br')) supported_encodings.br = true;
+        // See about 'gzip'.
+        //   Not sure why br does not show up as normal.
+
+        const supported_encodings = {};
+
+        if (typeof accept_encoding === 'string' && accept_encoding.includes('gzip')) supported_encodings.gzip = true;
+
+        if (typeof accept_encoding === 'string' && accept_encoding.includes('br')) supported_encodings.br = true;
 
         //console.log('supported_encodings', supported_encodings);
 
@@ -102,4 +102,4 @@ class Static_Route_HTTP_Responder extends HTTP_Responder {
 
 }
 
-module.exports = Static_Route_HTTP_Responder;
+module.exports = Static_Route_HTTP_Responder;

package/module.js

@@ -20,6 +20,13 @@ const Server = require('./server');
 jsgui.Server = Server;
 jsgui.serve = Server.serve;
 jsgui.fs2 = require('./fs2');
+
+// Port utilities for auto-port selection
+const port_utils = require('./port-utils');
+jsgui.port_utils = port_utils;
+jsgui.get_free_port = port_utils.get_free_port;
+jsgui.is_port_available = port_utils.is_port_available;
+
 //jsgui.Resource = Resource;
 //console.log('pre scs');
 //jsgui.Single_Control_Server = require('./single-control-server');

package/package.json

@@ -7,18 +7,18 @@
     "@babel/generator": "^7.28.5",
     "@babel/parser": "^7.28.5",
     "cookies": "^0.9.1",
-    "esbuild": "^0.25.12",
+    "esbuild": "^0.27.1",
     "fnl": "^0.0.37",
     "fnlfs": "^0.0.34",
-    "jsgui3-client": "^0.0.120",
-    "jsgui3-html": "^0.0.170",
+    "jsgui3-client": "^0.0.122",
+    "jsgui3-html": "^0.0.172",
     "jsgui3-webpage": "^0.0.8",
     "jsgui3-website": "^0.0.8",
-    "lang-tools": "^0.0.41",
+    "lang-tools": "^0.0.43",
     "mocha": "^11.7.4",
     "multiparty": "^4.2.3",
     "ncp": "^2.0.0",
-    "obext": "^0.0.31",
+    "obext": "^0.0.33",
     "rimraf": "^6.1.0",
     "stream-to-array": "^2.3.0",
     "url-parse": "^1.5.10"
@@ -39,7 +39,7 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.140",
+  "version": "0.0.141",
   "scripts": {
     "cli": "node cli.js",
     "serve": "node cli.js serve",
@@ -53,6 +53,7 @@
     "test:content": "node tests/test-runner.js --test=content-analysis.test.js",
     "test:performance": "node tests/test-runner.js --test=performance.test.js",
     "test:errors": "node tests/test-runner.js --test=error-handling.test.js",
+    "test:examples:controls": "node tests/test-runner.js --test=examples-controls.e2e.test.js",
     "test:debug": "node tests/test-runner.js --debug",
     "test:verbose": "node tests/test-runner.js --verbose"
   }