feat: add WebSocket support for sandbox proxy

- Added WebSocket upgrade request handling in sandbox proxy to support real-time connections
- Modified proxy logic to bypass JSRPC serialization for WebSocket requests using direct fetch
- Updated dependency versions including @cloudflare/sandbox to 0.4.14 for improved WebSocket support
- Enhanced request handler to properly detect and route WebSocket upgrade headers
- Added logging for WebSocket upgrade requests to improve debugging

Author: AshishKumar4

bun.lock

@@ -34,7 +34,7 @@
 	"dependencies": {
 		"@ashishkumar472/cf-git": "1.0.4",
 		"@cloudflare/containers": "^0.0.28",
-		"@cloudflare/sandbox": "0.4.7",
+		"@cloudflare/sandbox": "0.4.14",
 		"@noble/ciphers": "^1.3.0",
 		"@octokit/rest": "^22.0.0",
 		"@radix-ui/react-accordion": "^1.2.12",

package.json

@@ -51,6 +51,11 @@ async function handleUserAppRequest(request: Request, env: Env): Promise<Respons
 	const sandboxResponse = await proxyToSandbox(request, env);
 	if (sandboxResponse) {
 		logger.info(`Serving response from sandbox for: ${hostname}`);
+        // If it was a websocket upgrade, we need to return the response as is
+        if (sandboxResponse.headers.get('Upgrade')?.toLowerCase() === 'websocket') {
+            logger.info(`Serving websocket response from sandbox for: ${hostname}`);
+            return sandboxResponse;
+        }
 
 		// Add headers to identify this as a sandbox response
 		let headers = new Headers(sandboxResponse.headers);

worker/index.ts

@@ -4,6 +4,7 @@ This code is borrowed from Cloudflare Sandbox-sdk's npm package
 
 import { createObjectLogger } from "../../logger";
 import { getSandbox, type Sandbox } from "@cloudflare/sandbox";
+import { switchPort } from '@cloudflare/containers';
 
 const logger = createObjectLogger({
   component: 'sandbox-do',
@@ -36,6 +37,17 @@ export async function proxyToSandbox<E extends SandboxEnv>(
     const { sandboxId, port, path, token } = routeInfo;
     const sandbox = getSandbox(env.Sandbox, sandboxId);
 
+    logger.info("[Proxy] Sandbox", sandbox, "Port", port, "Path", path, "Token", token);
+
+    // Detect WebSocket upgrade request
+    const upgradeHeader = request.headers.get('Upgrade');
+    if (upgradeHeader?.toLowerCase() === 'websocket') {
+      logger.info("[Proxy] WebSocket upgrade request", upgradeHeader, "Port", port, "Path", path, "Token", token);
+      // WebSocket path: Must use fetch() not containerFetch()
+      // This bypasses JSRPC serialization boundary which cannot handle WebSocket upgrades
+      return await sandbox.fetch(switchPort(request, port));
+    }
+
     // Build proxy request with proper headers
     let proxyUrl: string;
 
@@ -55,7 +67,7 @@ export async function proxyToSandbox<E extends SandboxEnv>(
         'X-Original-URL': request.url,
         'X-Forwarded-Host': url.hostname,
         'X-Forwarded-Proto': url.protocol.replace(':', ''),
-        'X-Sandbox-Name': sandboxId, // Pass the friendly name
+        'X-Sandbox-Name': sandboxId // Pass the friendly name
       },
       body: request.body,
       // @ts-expect-error - duplex required for body streaming in modern runtimes
@@ -70,17 +82,22 @@ export async function proxyToSandbox<E extends SandboxEnv>(
       proxyUrl,
     });
 
-    return sandbox.containerFetch(proxyRequest, port);
+    return await sandbox.containerFetch(proxyRequest, port);
   } catch (error) {
-    logger.error('Proxy routing error', error instanceof Error ? error : new Error(String(error)));
+    logger.error(
+      'Proxy routing error',
+      error instanceof Error ? error : new Error(String(error))
+    );
     return new Response('Proxy routing error', { status: 500 });
   }
 }
 
 function extractSandboxRoute(url: URL): RouteInfo | null {
   // Parse subdomain pattern: port-sandboxId-token.domain (tokens mandatory)
   // Token is always exactly 16 chars (generated by generatePortToken)
-  const subdomainMatch = url.hostname.match(/^(\d{4,5})-([^.-][^.]*?[^.-]|[^.-])-([a-z0-9_-]{16})\.(.+)$/);
+  const subdomainMatch = url.hostname.match(
+    /^(\d{4,5})-([^.-][^.]*?[^.-]|[^.-])-([a-z0-9_-]{16})\.(.+)$/
+  );
 
   if (!subdomainMatch) {
     return null;
@@ -117,18 +134,18 @@ export function isLocalhostPattern(hostname: string): boolean {
       return hostname === '[::1]';
     }
   }
-  
+
   // Handle bare IPv6 without brackets
   if (hostname === '::1') {
     return true;
   }
-  
+
   // For IPv4 and regular hostnames, split on colon to remove port
-  const hostPart = hostname.split(":")[0];
-  
+  const hostPart = hostname.split(':')[0];
+
   return (
-    hostPart === "localhost" ||
-    hostPart === "127.0.0.1" ||
-    hostPart === "0.0.0.0"
+    hostPart === 'localhost' ||
+    hostPart === '127.0.0.1' ||
+    hostPart === '0.0.0.0'
   );
 }