@ghostty-web/demo 0.2.1-next.12.g5d6bd7b → 0.2.1-next.13.g7b2dd99

package/bin/demo.js

@@ -7,7 +7,6 @@
  * Run with: npx @ghostty-web/demo
  */
 
-import crypto from 'crypto';
 import fs from 'fs';
 import http from 'http';
 import { homedir } from 'os';
@@ -16,6 +15,8 @@ import { fileURLToPath } from 'url';
 
 // Node-pty for cross-platform PTY support
 import pty from '@lydell/node-pty';
+// WebSocket server
+import { WebSocketServer } from 'ws';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -349,7 +350,7 @@ function serveFile(filePath, res) {
 }
 
 // ============================================================================
-// WebSocket Server (using native WebSocket upgrade)
+// WebSocket Server (using ws package)
 // ============================================================================
 
 const sessions = new Map();
@@ -380,196 +381,85 @@ function createPtySession(cols, rows) {
   return ptyProcess;
 }
 
-// WebSocket server
-const wsServer = http.createServer();
+// WebSocket server using ws package
+const wss = new WebSocketServer({ port: WS_PORT, path: '/ws' });
 
-wsServer.on('upgrade', (req, socket, head) => {
+wss.on('connection', (ws, req) => {
   const url = new URL(req.url, `http://${req.headers.host}`);
-
-  if (url.pathname !== '/ws') {
-    socket.destroy();
-    return;
-  }
-
   const cols = Number.parseInt(url.searchParams.get('cols') || '80');
   const rows = Number.parseInt(url.searchParams.get('rows') || '24');
 
-  // Parse WebSocket key and create accept key
-  const key = req.headers['sec-websocket-key'];
-  const acceptKey = crypto
-    .createHash('sha1')
-    .update(key + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')
-    .digest('base64');
-
-  // Send WebSocket handshake response
-  socket.write(
-    'HTTP/1.1 101 Switching Protocols\r\n' +
-      'Upgrade: websocket\r\n' +
-      'Connection: Upgrade\r\n' +
-      'Sec-WebSocket-Accept: ' +
-      acceptKey +
-      '\r\n\r\n'
-  );
-
-  const sessionId = crypto.randomUUID().slice(0, 8);
-
   // Create PTY
   const ptyProcess = createPtySession(cols, rows);
-  sessions.set(socket, { id: sessionId, pty: ptyProcess });
+  sessions.set(ws, { pty: ptyProcess });
 
   // PTY -> WebSocket
   ptyProcess.onData((data) => {
-    if (socket.writable) {
-      sendWebSocketFrame(socket, data);
+    if (ws.readyState === ws.OPEN) {
+      ws.send(data);
     }
   });
 
   ptyProcess.onExit(({ exitCode }) => {
-    sendWebSocketFrame(socket, `\r\n\x1b[33mShell exited (code: ${exitCode})\x1b[0m\r\n`);
-    socket.end();
+    if (ws.readyState === ws.OPEN) {
+      ws.send(`\r\n\x1b[33mShell exited (code: ${exitCode})\x1b[0m\r\n`);
+      ws.close();
+    }
   });
 
   // WebSocket -> PTY
-  let buffer = Buffer.alloc(0);
-
-  socket.on('data', (chunk) => {
-    buffer = Buffer.concat([buffer, chunk]);
-
-    while (buffer.length >= 2) {
-      const fin = (buffer[0] & 0x80) !== 0;
-      const opcode = buffer[0] & 0x0f;
-      const masked = (buffer[1] & 0x80) !== 0;
-      let payloadLength = buffer[1] & 0x7f;
-
-      let offset = 2;
-
-      if (payloadLength === 126) {
-        if (buffer.length < 4) break;
-        payloadLength = buffer.readUInt16BE(2);
-        offset = 4;
-      } else if (payloadLength === 127) {
-        if (buffer.length < 10) break;
-        payloadLength = Number(buffer.readBigUInt64BE(2));
-        offset = 10;
-      }
-
-      const maskKeyOffset = offset;
-      if (masked) offset += 4;
-
-      const totalLength = offset + payloadLength;
-      if (buffer.length < totalLength) break;
-
-      // Handle different opcodes
-      if (opcode === 0x8) {
-        // Close frame
-        socket.end();
-        break;
-      }
-
-      if (opcode === 0x1 || opcode === 0x2) {
-        // Text or binary frame
-        let payload = buffer.slice(offset, totalLength);
-
-        if (masked) {
-          const maskKey = buffer.slice(maskKeyOffset, maskKeyOffset + 4);
-          payload = Buffer.from(payload);
-          for (let i = 0; i < payload.length; i++) {
-            payload[i] ^= maskKey[i % 4];
-          }
+  ws.on('message', (data) => {
+    const message = data.toString('utf8');
+
+    // Check for resize message
+    if (message.startsWith('{')) {
+      try {
+        const msg = JSON.parse(message);
+        if (msg.type === 'resize') {
+          ptyProcess.resize(msg.cols, msg.rows);
+          return;
         }
-
-        const data = payload.toString('utf8');
-
-        // Check for resize message
-        if (data.startsWith('{')) {
-          try {
-            const msg = JSON.parse(data);
-            if (msg.type === 'resize') {
-              ptyProcess.resize(msg.cols, msg.rows);
-              buffer = buffer.slice(totalLength);
-              continue;
-            }
-          } catch (e) {
-            // Not JSON, treat as input
-          }
-        }
-
-        // Send to PTY
-        ptyProcess.write(data);
+      } catch (e) {
+        // Not JSON, treat as input
       }
-
-      buffer = buffer.slice(totalLength);
     }
+
+    // Send to PTY
+    ptyProcess.write(message);
   });
 
-  socket.on('close', () => {
-    const session = sessions.get(socket);
+  ws.on('close', () => {
+    const session = sessions.get(ws);
     if (session) {
       session.pty.kill();
-      sessions.delete(socket);
+      sessions.delete(ws);
     }
   });
 
-  socket.on('error', () => {
+  ws.on('error', () => {
     // Ignore socket errors (connection reset, etc.)
   });
 
   // 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
-    sendWebSocketFrame(
-      socket,
-      `${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`
-    );
-    sendWebSocketFrame(
-      socket,
+    ws.send(`${C}╔══════════════════════════════════════════════════════════════╗${R}\r\n`);
+    ws.send(
       `${C}║${R}  ${G}Welcome to ghostty-web!${R}                                     ${C}║${R}\r\n`
     );
-    sendWebSocketFrame(
-      socket,
-      `${C}║${R}                                                              ${C}║${R}\r\n`
-    );
-    sendWebSocketFrame(
-      socket,
-      `${C}║${R}  You have a real shell session with full PTY support.        ${C}║${R}\r\n`
-    );
-    sendWebSocketFrame(
-      socket,
+    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`
     );
-    sendWebSocketFrame(
-      socket,
-      `${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`
-    );
+    ws.send(`${C}╚══════════════════════════════════════════════════════════════╝${R}\r\n\r\n`);
   }, 100);
 });
 
-function sendWebSocketFrame(socket, data) {
-  const payload = Buffer.from(data, 'utf8');
-  let header;
-
-  if (payload.length < 126) {
-    header = Buffer.alloc(2);
-    header[0] = 0x81; // FIN + text frame
-    header[1] = payload.length;
-  } else if (payload.length < 65536) {
-    header = Buffer.alloc(4);
-    header[0] = 0x81;
-    header[1] = 126;
-    header.writeUInt16BE(payload.length, 2);
-  } else {
-    header = Buffer.alloc(10);
-    header[0] = 0x81;
-    header[1] = 127;
-    header.writeBigUInt64BE(BigInt(payload.length), 2);
-  }
-
-  socket.write(Buffer.concat([header, payload]));
-}
-
 // ============================================================================
 // Startup
 // ============================================================================
@@ -596,16 +486,14 @@ function printBanner(url) {
 // Graceful shutdown
 process.on('SIGINT', () => {
   console.log('\n\nShutting down...');
-  for (const [socket, session] of sessions.entries()) {
+  for (const [ws, session] of sessions.entries()) {
     session.pty.kill();
-    socket.destroy();
+    ws.close();
   }
+  wss.close();
   process.exit(0);
 });
 
-// Start WebSocket PTY server (runs in both modes)
-wsServer.listen(WS_PORT);
-
 // Start HTTP/Vite server
 if (DEV_MODE) {
   // Dev mode: use Vite for hot reload

package/package.json

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