Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v3 Next.js API Route Websocket multiple requests #916

Open
2 tasks done
ldej opened this issue May 12, 2023 · 3 comments
Open
2 tasks done

v3 Next.js API Route Websocket multiple requests #916

ldej opened this issue May 12, 2023 · 3 comments

Comments

@ldej
Copy link

ldej commented May 12, 2023

Checks

Describe the bug (be clear and concise)

I have used the recipe for next.js and API routes: https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/servers.md#nextjs

When I enable ws: true, it proxies my websocket request successfully. However, when I refresh the page, 2 websocket requests are made to the server, resulting in Invalid frame header errors. When I refresh the page again, 3 websocket requests are made, and so on.

I have the feeling that a new server.on('upgrade' events is registered whenever.

Step-by-step reproduction instructions

1. Use https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/servers.md#nextjs
2. Enable `ws: true`
3. Make a page which creates a websocket on `/api/something`
4. Refresh page multiple times
5. See the number of new websockets grow with each refresh

Expected behavior (be clear and concise)

I would expect that http-proxy-middleware would not create multiple websockets when I create 1 websocket.

How is http-proxy-middleware used in your project?

> $ yarn why http-proxy-middleware
yarn why v1.22.19
[1/4] Why do we have the module "http-proxy-middleware"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "http-proxy-middleware"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "560KB"
info Disk size with unique dependencies: "2.82MB"
info Disk size with transitive dependencies: "4.16MB"
info Number of shared dependencies: 16
Done in 1.21s.

What http-proxy-middleware configuration are you using?

{
  target: `http://${process.env.BACKEND_HOST}`,
  changeOrigin: true,
  ws: true,
  pathRewrite: {
    '^/api/ws/': '/ws/',
  }
}

What OS/version and node/version are you seeing the problem?

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-1280P
    Memory: 42.95 GB / 62.52 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm

Additional context (optional)

For now, changing the handler to read from a global variable works:

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (!global.proxy) {
    global.proxy = proxyMiddleware
  }
  global.proxy(req, res, (result: unknown) => {
    if (result instanceof Error) {
      throw result
    }
  })
}

Any suggestions?

@aaronmusknew
Copy link

aaronmusknew commented Jul 24, 2023

I have the same problem, Next.js does not behave well as a websocket proxy

@anthonytranDev
Copy link

Just so this thread doesn't self resolve. I have this same issue too

@avarayr
Copy link

avarayr commented Nov 27, 2023

@anthonytranDev this workaround might interest you, vercel/next.js#58698 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants