🐛 BUG: TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket

[teukuridho]

Which Cloudflare product(s) does this pertain to?

Pages, Workers Runtime

What version(s) of the tool(s) are you using?

3.47.0 Wrangler

What version of Node are you using?

v20.11.1

What operating system and version are you using?

Mac Sonoma 14.4.1

Describe the Bug

Unable to start Websocket server in Cloudflare Pages Functions with Next.js

Observed behavior

Websocket not running

Expected behavior

Websocket running properly

Steps to reproduce

• create new nextjs project pnpm create cloudflare@latest my-next-app -- --framework=next
• add this to src/app/api/websocket/route.ts

import { NextResponse, type NextRequest } from 'next/server'

export const runtime = 'edge'

export function GET(request: NextRequest) {
  if (request.headers.get('upgrade') !== 'websocket') {
    return new Response('Expected websocket', { status: 400 });
  }

  const [client, server] = Object.values(new WebSocketPair());

  // @ts-ignore
  server.accept();

  server.addEventListener('message', event => {
    console.log('Received message:', event.data);
    server.send('Hello from the Next.js route handler!');
  });

  server.addEventListener('close', event => {
    console.log('WebSocket closed:', event.code, event.reason);
  });

  return new Response(null, { status: 101, webSocket: client });
}

• Run next dev and try to connect to the websocket ws://localhost:3000/api/websocket with postman. Got this error Error: socket hang up
• Run pnpm pages:build && wrangler pages dev.
  • got initial error ✘ [ERROR] workerd/jsg/_virtual_includes/jsg/workerd/jsg/modules.h:443: warning: NOSENTRY Worker using multiple modules in a single bundle.
  • try to connect to the websocket ws://localhost:8788/api/websocket with postman. Got this error [wrangler:err] TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket

I followed this example https://developers.cloudflare.com/workers/examples/websockets/ on how to use websocket on workers. How do I resolve this? thank you

Please provide a link to a minimal reproduction

No response

Please provide any relevant error logs

[wrangler:err] SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/body.js:582:15)
    at successSteps (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/body.js:522:23)
    at specConsumeBody (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/body.js:531:5)
    at Request.json (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/undici/lib/fetch/body.js:369:14)
    at handlePrettyErrorRequest (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:5767:54)
    at #handleLoopback (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:8762:26)
    at #handleLoopbackUpgrade (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:8804:48)
    at Server.emit (node:events:518:28)
    at Server.emit (node:domain:488:12)
[wrangler:err] TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket
    at #handleLoopbackUpgrade (/Users/user/Documents/Mac/Works/PersonalWorks/sitkobi/node_modules/.pnpm/[email protected]/node_modules/miniflare/dist/src/index.js:8821:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)