WebSocket usage with worktop

I’m using worktop@0.8.0-next.8 with miniflare@2.0.0-rc.. I got this error when trying to connect to ws route. Could you take a look? I understand that I’m using unstable releases.

GET /ws 200 OK (1.74ms)
[mf:err] TypeError: Web Socket request did not return status 101 Switching Protocols response with Web Socket

This is index.js.

import { Router } from 'worktop'
import { listen } from 'worktop/ws'
import { reply } from 'worktop/module'

const API = new Router()

API.add(
  `GET`,
  `/ws`,
  listen((req, ctx, socket) => {
    console.log('connected')
  })
)

export default reply(API.run)

Same error when not using worktop/ws.

import { Router } from 'worktop'
import { reply } from 'worktop/module'

const API = new Router()

API.add(`GET`, `/ws`, async (req, ctx) => {
  const upgradeHeader = req.headers.get(`Upgrade`)

  if (upgradeHeader !== `websocket`) {
    return new Response(`Expected websocket`, { status: 400 })
  }

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

  server.accept()

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

export default reply(API.run)

The minimal ws example works fine.

async function handleRequest(request) {
  try {
    const url = new URL(request.url)
    switch (url.pathname) {
      case `/`:
        return new Response(`hello`)

      case `/ws`:
        const upgradeHeader = request.headers.get(`Upgrade`)

        if (upgradeHeader !== `websocket`) {
          return new Response(`Expected websocket`, { status: 400 })
        }

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

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

      default:
        return new Response(`Not found`, { status: 404 })
    }
  } catch (err) {
    return new Response(err.toString())
  }
}

export default {
  async fetch(request: Request, env) {
    try {
      return await handleRequest(request, env)
    } catch (e) {
      return new Response(`${e}`)
    }
  },
}

I’m also using esbuild with below config, if that is useful.

import { build } from 'esbuild'

build({
  entryPoints: [`src/index.js`],
  outfile: `dist/index.mjs`,

  bundle: true,
  charset: `utf8`,
  format: `esm`,
  mainFields: [`browser`, `module`, `main`],
  platform: `neutral`,
  target: `es2020`,

  sourcemap: true,
  minify: true,
}).catch((err) => {
  console.error(err.stack)
  process.exitCode = 1
})

[mrbbot]

Hey! 👋 miniflare@2.0.0-rc.3 has just been released, including the fix for this. You can find the changelog here.

[lukeed]

Yeah, miniflare’s Response class has a private #webSocket property – it’s a public readonly in the runtime.

And here’s the part where our Response is only looking for a .webSocket property on a ResponseInit value: https://github.com/cloudflare/miniflare/blob/v2/packages/core/src/standards/http.ts#L377-L396