proxy websocket

[jinrilong]

Describe the feature you'd like to request

websocket proxy is needed for many people

Describe the solution you'd like

websocket proxy is needed for many people

Describe alternatives you've considered

websocket proxy is needed for many people

[soren121]

You can use http-proxy-middleware inside an API Route. This library supports proxying WebSockets if you enable the ws option.

// pages/api/proxy/[...path].js

import { createProxyMiddleware } from 'http-proxy-middleware';

const proxy = createProxyMiddleware('/api/proxy/**', {
   target: process.env.BACKEND_URL,
   ws: true, // enable proxying WebSockets
   pathRewrite: { "^/api/proxy": "" }, // remove `/api/proxy` prefix
});

export default async function handler(req, res) {
    proxy(req, res, (err) => {
        if (err) {
            throw err;
        }

        throw new Error(`Local proxy received bad request for ${req.url}`);
    });
}

export const config = {
    api: {
        // Proxy middleware will handle requests itself, so Next.js should 
        // ignore that our handler doesn't directly return a response
        externalResolver: true,
        // Pass request bodies through unmodified so that the origin API server
        // receives them in the intended format
        bodyParser: false,
    },
}

[lngtai001]

How do you call this from the front end?

I want to have a Websocket client connection from the front end like new WebSocket(url), but that url is now a proxy url (/api/socket)?

[nictownsend]

Does next.js now support websocket via api routes? Or does it require a http upgrade rather than ws protocol?

[alexphl]

Can confirm that neither middleware nor catch-all API routes capture websocket traffic as of today.

Rewrites do, but rewrites are configured only at build time - which is a dealbreaker for our CI setup. It would mean separate builds for dev, staging, prod etc.

I have been banging my head against the wall trying to find a solution other than the custom server - which we currently use only for this purpose. ugh.

[unknownsoldier08]

Hey @alexphl, just wondering if you have an example of proxy websockets via rewrites? I've been struggling with this using NextJS 13 and came across this page

[pankaj9296]

same issue here, rewrites don't seem to be proxying WS protocol.

[konsti]

I've solved this using a custom server:

const port = parseInt(process.env.PORT || '3003', 10);
const dev = process.env.NODE_ENV !== 'production';
const hostname = process.env.HOSTNAME || 'localhost';
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

const proxy = httpProxy.createProxyServer({
  target: backendApiUrl,
  changeOrigin: true,
  autoRewrite: false,
  ws: true,
});

const server = createServer(async (req, res) => {
  try {
    const parsedUrl = parse(req.url!, true);

    if (<path-matching-logic>) {
      <add required auth headers or other logic>

      proxy.web(req, res);
      return;
    }

    await handle(req, res, parsedUrl);
  } catch (err) {
    console.error('Error occurred handling', req.url, err);
    res.statusCode = 500;
    res.end('internal server error');
  }
});

// Proxy websocket connections to backend
server.on('upgrade', async (req, socket, head) => {
  if (<path-matching-logic>) {
     <add required auth or other logic>

    proxy.ws(req, socket, head);
    return;
  } else {
    proxy.ws(req, socket, head);
  }
});

app.prepare().then(() => {
  server
    .once('error', (err) => {
      console.error('Error occurred starting server', err);
      process.exit(1);
    })
    .listen(port, () => {
      console.log(
        `> Server listening at http://${hostname}:${port} as ${
          dev ? 'development' : process.env.NODE_ENV
        }`,
      );
    });
});

[tomfun]

To have development server working I had to fix upgrade function.

/* eslint-disable @typescript-eslint/no-var-requires */
const { createServer } = require('http')
const { parse } = require('url')

const httpProxy = require("http-proxy")
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

// https://nextjs.org/docs/pages/building-your-application/configuring/custom-server
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

const proxy = httpProxy.createProxyServer({
  target: process.env.NEXT_PUBLIC_API_PROXY_URL,
  ws: true,
});


app.prepare().then(() => {
  const anotherUpgrade = app.getUpgradeHandler()
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const {pathname} = parsedUrl

      if (pathname.startsWith('/api')) {
        console.log('proxy start: ', req.method, pathname)
        proxy.web(req, res, { target: process.env.NEXT_PUBLIC_API_PROXY_URL });
      } else {
        console.debug('req  ', req.method, pathname)
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .on('upgrade', async (req, socket, head) => {
      const server = await app.getServer()
      const parsedUrl = parse(req.url, true)
      const {pathname} = parsedUrl
      if (pathname.startsWith('/_next')) {
        console.debug('ws to req', req.method, pathname)
        server.hotReloader.onHMR(req, {}, head)
        // socket.write('HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n');
        // socket.destroy();
        return;
      }
      // this doesn't work :(
      if (!pathname.startsWith('/api')) {
        console.debug('ws', req.method, pathname, head)
        const used = await anotherUpgrade(req, socket, head)
        console.debug('end ws', req.method, pathname, used)
        return
      }
      console.log('proxy ws start: ', req.method, pathname, head)
      proxy.ws(req, socket, head, { target: process.env.NEXT_PUBLIC_API_PROXY_URL });
    })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
})

[aaronmusknew]

Something that never worked well in nextjs, very sad 😢

[salazarm]

[joshuademarco]

Sorry but where is the "websocket proxing" part? Maybe I'm just blind...

[salazarm]

Oops, I thought this was a different issue. Yeah I'm not sure you can proxy a websocket ? I tried writing my own proxy to do it and couldn't figure it out.

[laurens-mesure]

I'm able to get the WebSocket proxy working in dev mode but it seems to stop working when I deploy to production on my own server using the node.js runtime.

Config looks like this:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "standalone",
  experimental: {
    serverActions: true,
    outputFileTracingRoot: path.join(__dirname, "../../"),
  },
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `http://0.0.0.0:49153/:path*`,
      },
    ];
  },
};

module.exports = nextConfig;

[buoyad]

Were you able to solve this? I seem to be running into the same issue. Here's my next.config.js

const nextConfig = {
    rewrites: async () => [
        {
            source: '/api/:path*',
            destination: `${process.env.API_URL}/api/:path*`,
        }
    ]
}

I am able to fetch from http routes and the proxying works correctly. However, trying to make a ws or wss connection hangs indefinitely on production and times out. I'm also running on my own server with the node.js runtime. It works fine locally.

[laurens-mesure]

No, I ended up deploying a second server running express-js. Nextjs does some mutations on the request to handle websockets for its HMR. This interferes with the our "custom" websocket. I have tried running Next.js with a custom server but that didn't work either.

I find it very annoying that Vercel (seemingly) doesn't put a lot of effort into features that don't benefit the Vercel ecosystem such as websockets, custom servers, custom middleware runtimes...

[ronny1020]

Same issue here, and I also use the app router. Did anyone get it to work on the app router?

[liamlows]

I just found this https://github.com/apteryxxyz/next-ws but I have not tested it. We are still using pages router (app router had some serious problems when we initially tried to adopt) and as a result cant use it.

I really wish the next.js team would at least allow rewrites to proxy web sockets. It's quite ridiculous they only push features that directly relate to vercel's offerings. I understand vercel sponsors them but still, a lot of people use next and don't use vercel.

[ronny1020]

I also found the apteryxxyz/next-ws. I think it's for creating a normal websocket connection instead of a proxy websocket?

[ronny1020]

I also regret using the app router. We use it because the next document recommends using it and there are many issues.

[AdytZZa22]

I have a Nest.JS back-end and I use socket.io. I got it working with the following code, I'm using app directory in Next.JS, but for proxy, I'm using pages directory because of http-proxy-middleware

src/pages/api/proxy/[...paths.ts]

import { createProxyMiddleware } from 'http-proxy-middleware';
import { NextApiRequest, NextApiResponse } from 'next';

const apiProxy = createProxyMiddleware({
  target: 'http://localhost:4000',
  changeOrigin: true,
  ws: true,
  router: {
    'socket.io/*': 'http://localhost:4000',
  },
  pathRewrite: {
    '^/api/proxy/socket.io': '/socket.io/', // that end slash is magical
  },
});


export default function handler(req: NextApiRequest, res: NextApiResponse) {
  return new Promise((resolve, reject) => {
    apiProxy(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
}
 
 export const config = {
     api: {
         // Proxy middleware will handle requests itself, so Next.js should 
         // ignore that our handler doesn't directly return a response
         externalResolver: true,
         // Pass request bodies through unmodified so that the origin API server
         // receives them in the intended format
         bodyParser: false,
     },
 }

// some-provider-component.tsx

useEffect(() => {
    const socket = io("", {
      path: '/api/proxy/socket.io', 
    });


    return () => {
      socket.disconnect();
    };
  }, []);

[aczekajski]

This might work only because you didn't specify "transport" when configuring socket.io so it automatically uses a fallback to "polling", which is not an actual WebSocket connection.

[plh97]

Vercel.json definitely does not support WebSocket URL proxy, but DNS can, once setup DNS config. It can directly call api.c.domain.com to connect WebSocket, and one more thing you need to do is ssh on your server side and call certbot to register an SSL certification, after that, your api.c.domain.com is a safe link. Feel free to check my project as an example c.plhh.xyz

[NilsonKr]

Hi, been struggling with this for a while, now I got an implementation of a custom server that actually works, using express and http-proxy-middleware (couldnt make http-proxy properly works, for some reason couldnt get to upgrade connections correctly)

server.js

import express from 'express'
import { createProxyMiddleware } from 'http-proxy-middleware'
import next from 'next'
import { createServer } from 'http'

const dev = process.env.NODE_ENV !== 'production'
const hostname = process.env.HOSTNAME || 'localhost'
const port = process.env.PORT

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => {
    const expressApp = express()
    const server = createServer(expressApp)

    expressApp.use(
      '/api',
      createProxyMiddleware({
        target: 'https://www.server.com',
        secure: false,
        changeOrigin: true,
        logLevel: 'debug',
        ws: false,
      })
    )


    // '/ws' prefix in my case 
    const wsProxy = createProxyMiddleware('/ws', {
      target: 'wss://www.server.com',
      changeOrigin: true,
      ws: true,
      secure: true,
      logLevel: 'debug',
    })

    expressApp.use(wsProxy)

    expressApp.all(/^\/_next\/webpack-hmr(\/.*)?/, async (req, res) => {
      handle(req, res)
    })

    expressApp.all('*', (req, res) => handle(req, res))

    server.on('upgrade', wsProxy.upgrade) //Properly upgrade connection

    server.listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
  })
  .catch(err => {
    console.error('Server failed to start:', err)
  })