npm - @ghostty-web/demo - Versions diffs - 0.3.0 → 0.4.0 - Mend

@ghostty-web/demo 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -14,9 +14,10 @@ Works on **Linux** and **macOS** (no Windows support yet).
 ## What it does
 - Starts an HTTP server on port 8080 (configurable via `PORT` env var)
-- Starts a WebSocket server on port 3001 for PTY communication
+- Serves WebSocket PTY on the same port at `/ws` endpoint
 - Opens a real shell session (bash, zsh, etc.)
 - Provides full PTY support (colors, cursor positioning, resize, etc.)
+- Supports reverse proxies (ngrok, nginx, etc.) via X-Forwarded-\* headers
 ## Usage
@@ -30,6 +31,49 @@ PORT=3000 npx @ghostty-web/demo@next
 Then open http://localhost:8080 in your browser.
+## Reverse Proxy Support
+The server now supports reverse proxies like ngrok, nginx, and others by:
+- Serving WebSocket on the same HTTP port (no separate port needed)
+- Using relative WebSocket URLs on the client side
+- Automatic protocol detection (HTTP/HTTPS, WS/WSS)
+This means the WebSocket connection automatically adapts to use the same protocol and host as the HTTP connection, making it work seamlessly through any reverse proxy.
+### Example with ngrok
+```bash
+# Start the demo server
+npx @ghostty-web/demo@next
+# In another terminal, expose it via ngrok
+ngrok http 8080
+```
+The terminal will work seamlessly through the ngrok URL! Both HTTP and WebSocket traffic will be properly proxied.
+### Example with nginx
+```nginx
+server {
+    listen 80;
+    server_name example.com;
+    location / {
+        proxy_pass http://localhost:8080;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
+```
 ## Security Warning
 ⚠️ **This server provides full shell access.**

package/bin/demo.js CHANGED Viewed

@@ -23,7 +23,6 @@ const __dirname = path.dirname(__filename);
 const DEV_MODE = process.argv.includes('--dev');
 const HTTP_PORT = process.env.PORT || (DEV_MODE ? 8000 : 8080);
-const WS_PORT = 3001;
 // ============================================================================
 // Locate ghostty-web assets
@@ -239,8 +238,9 @@ const HTML_TEMPLATE = `<!doctype html>
         statusText.textContent = text;
       }
-      // Connect to WebSocket PTY server
-      const wsUrl = 'ws://' + window.location.hostname + ':${WS_PORT}/ws?cols=' + term.cols + '&rows=' + term.rows;
+      // Connect to WebSocket PTY server (use same origin as HTTP server)
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const wsUrl = protocol + '//' + window.location.host + '/ws?cols=' + term.cols + '&rows=' + term.rows;
       let ws;
       function connect() {
@@ -286,6 +286,33 @@ const HTML_TEMPLATE = `<!doctype html>
       window.addEventListener('resize', () => {
         fitAddon.fit();
       });
+      // Handle mobile keyboard showing/hiding using visualViewport API
+      if (window.visualViewport) {
+        const terminalContent = document.querySelector('.terminal-content');
+        const terminalWindow = document.querySelector('.terminal-window');
+        const originalHeight = terminalContent.style.height;
+        const body = document.body;
+        window.visualViewport.addEventListener('resize', () => {
+          const keyboardHeight = window.innerHeight - window.visualViewport.height;
+          if (keyboardHeight > 100) {
+            body.style.padding = '0';
+            body.style.alignItems = 'flex-start';
+            terminalWindow.style.borderRadius = '0';
+            terminalWindow.style.maxWidth = '100%';
+            terminalContent.style.height = (window.visualViewport.height - 60) + 'px';
+            window.scrollTo(0, 0);
+          } else {
+            body.style.padding = '40px 20px';
+            body.style.alignItems = 'center';
+            terminalWindow.style.borderRadius = '12px';
+            terminalWindow.style.maxWidth = '1000px';
+            terminalContent.style.height = originalHeight || '600px';
+          }
+          fitAddon.fit();
+        });
+      }
     </script>
   </body>
 </html>`;
@@ -386,8 +413,23 @@ function createPtySession(cols, rows) {
   return ptyProcess;
 }
-// WebSocket server using ws package
-const wss = new WebSocketServer({ port: WS_PORT, path: '/ws' });
+// WebSocket server attached to HTTP server (same port)
+const wss = new WebSocketServer({ noServer: true });
+// Handle HTTP upgrade for WebSocket connections
+httpServer.on('upgrade', (req, socket, head) => {
+  const url = new URL(req.url, `http://${req.headers.host}`);
+  if (url.pathname === '/ws') {
+    // In production, consider validating req.headers.origin to prevent CSRF
+    // For development/demo purposes, we allow all origins
+    wss.handleUpgrade(req, socket, head, (ws) => {
+      wss.emit('connection', ws, req);
+    });
+  } else {
+    socket.destroy();
+  }
+});
 wss.on('connection', (ws, req) => {
   const url = new URL(req.url, `http://${req.headers.host}`);
@@ -446,23 +488,20 @@ wss.on('connection', (ws, req) => {
   });
   // Send welcome message
-  setTimeout(() => {
-    if (ws.readyState !== ws.OPEN) return;
-    const C = '\x1b[1;36m'; // Cyan
-    const G = '\x1b[1;32m'; // Green
-    const Y = '\x1b[1;33m'; // Yellow
-    const R = '\x1b[0m'; // Reset
-    ws.send(`${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`);
-    ws.send(
-      `${C}║${R}  ${G}Welcome to ghostty-web!${R}                                     ${C}║${R}\r\n`
-    );
-    ws.send(`${C}║${R}                                                              ${C}║${R}\r\n`);
-    ws.send(`${C}║${R}  You have a real shell session with full PTY support.        ${C}║${R}\r\n`);
-    ws.send(
-      `${C}║${R}  Try: ${Y}ls${R}, ${Y}cd${R}, ${Y}top${R}, ${Y}vim${R}, or any command!                      ${C}║${R}\r\n`
-    );
-    ws.send(`${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`);
-  }, 100);
+  const C = '\x1b[1;36m'; // Cyan
+  const G = '\x1b[1;32m'; // Green
+  const Y = '\x1b[1;33m'; // Yellow
+  const R = '\x1b[0m'; // Reset
+  ws.send(`${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`);
+  ws.send(
+    `${C}║${R}  ${G}Welcome to ghostty-web!${R}                                     ${C}║${R}\r\n`
+  );
+  ws.send(`${C}║${R}                                                              ${C}║${R}\r\n`);
+  ws.send(`${C}║${R}  You have a real shell session with full PTY support.        ${C}║${R}\r\n`);
+  ws.send(
+    `${C}║${R}  Try: ${Y}ls${R}, ${Y}cd${R}, ${Y}top${R}, ${Y}vim${R}, or any command!                      ${C}║${R}\r\n`
+  );
+  ws.send(`${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`);
 });
 // ============================================================================
@@ -474,7 +513,7 @@ function printBanner(url) {
   console.log('  🚀 ghostty-web demo server' + (DEV_MODE ? ' (dev mode)' : ''));
   console.log('═'.repeat(60));
   console.log(`\n  📺 Open: ${url}`);
-  console.log(`  📡 WebSocket PTY: ws://localhost:${WS_PORT}/ws`);
+  console.log(`  📡 WebSocket PTY: same endpoint /ws`);
   console.log(`  🐚 Shell: ${getShell()}`);
   console.log(`  📁 Home: ${homedir()}`);
   if (DEV_MODE) {
@@ -510,7 +549,34 @@ if (DEV_MODE) {
       strictPort: true,
     },
   });
   await vite.listen();
+  // Attach WebSocket handler AFTER Vite has fully initialized
+  // Use prependListener (not prependOnceListener) so it runs for every request
+  // This ensures our handler runs BEFORE Vite's handlers
+  if (vite.httpServer) {
+    vite.httpServer.prependListener('upgrade', (req, socket, head) => {
+      const pathname = req.url?.split('?')[0] || req.url || '';
+      // ONLY handle /ws - everything else passes through unchanged to Vite
+      if (pathname === '/ws') {
+        if (!socket.destroyed && !socket.readableEnded) {
+          wss.handleUpgrade(req, socket, head, (ws) => {
+            wss.emit('connection', ws, req);
+          });
+        }
+        // Stop here - we handled it, socket is consumed
+        // Don't call other listeners
+        return;
+      }
+      // For non-/ws paths, explicitly do nothing and let the event propagate
+      // The key is: don't return, don't touch the socket, just let it pass through
+      // Vite's handlers (which were added before ours via prependListener) will process it
+    });
+  }
   printBanner(`http://localhost:${HTTP_PORT}/demo/`);
 } else {
   // Production mode: static file server

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ghostty-web/demo",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Cross-platform demo server for ghostty-web terminal emulator",
   "type": "module",
   "bin": {
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@lydell/node-pty": "^1.0.1",
-    "ghostty-web": "0.3.0",
+    "ghostty-web": "0.4.0",
     "ws": "^8.18.0"
   },
   "files": [