lont Posts - Answer Overflow

lont

•Created by lont on 5/25/2024 in #workers-help

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

Hi, got this error when running websocket in Cloudflare Pages Function Nextjs I followed this example https://developers.cloudflare.com/workers/examples/websockets/

2.0/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)

2.0/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)

this is my code

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 });
}

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 });
}

If I donext dev, the websocket route wouldn't even fire but when I do pnpm pages:build && wrangler pages dev, it gave me error like the title How do I resolve this? thank you

1 replies

Gaming

Programming