How do I proxy a websocket request?

[unbiased-dev]

So I wrote a proxy to passthrough all my vite port requests to vite within my hono app.

app.get("*", (c) => {
  const url = new URL(c.req.url);
  return fetch(`http://localhost:5173/${url.pathname}`);
});

This works fine however it throws when the websocket tries to connet for hot module reloading.

Here are the details of the requet

GET / HTTP/1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br, zstd
Sec-WebSocket-Version: 13
Origin: http://localhost:3000
Sec-WebSocket-Protocol: vite-hmr
Sec-WebSocket-Extensions: permessage-deflate
Sec-WebSocket-Key: rCe+crlOR2emDfROqjSgbQ==
Sec-GPC: 1
Connection: keep-alive, Upgrade
Cookie: paraglide_lang=en
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: websocket
Sec-Fetch-Site: same-origin
Pragma: no-cache
Cache-Control: no-cache
Upgrade: websocket

The response actually has a status of 200 but under the transferred column in the devtools instead of size it says NS_ERROR_WEBSOCKET_CONNECTION_REFUSED.

[maou-shonen]

fetch does not support WebSocket.
WebSocket is neither an HTTP request nor an HTTP stream.
You might consider something like node-http-proxy.

[soumame]

I’m not sure if this approach is better, but http-proxy-middleware works fine. To use it with Hono, you need to bind HTTPBindings to Hono.

Here’s an example of the setup:

import { createProxyMiddleware } from "http-proxy-middleware";
import { type HttpBindings} from "@hono/node-server";

const proxy = createProxyMiddleware({
... your proxy setup
})
const app = new Hono<{ Bindings: HttpBindings }>();

app.use("*", (c, next) => {
	return new Promise((resolve, reject) => {
		proxy(c.env.incoming, c.env.outgoing, (err) => {
			if (err) {
				reject(err);
			} else {
				resolve();
			}
		});
	});
});

[jacksteamdev]

One note: You'll need to use serve() from @hono/node-server to run the app, c.env.incoming will be undefined if you just export the app config.

[Netail]

Something like the proxy helper, but one to proxy websocket would be nice.

See; https://github.com/orgs/honojs/discussions/4086

[ggodlewski]

In case someone needs it:

import { Context } from 'hono';
import { proxy } from 'hono/proxy';
import { upgradeWebSocket } from 'hono/deno';

export function proxyWs(proxyUrl: Parameters<typeof proxy>[0], proxyInit: Parameters<typeof proxy>[1], c: Context) {
  if (c.req.header('upgrade') === 'websocket') {
    const subProtocol = c.req.header('sec-websocket-protocol');
    const proxyWs = new WebSocket(new Request(proxyUrl).url.replace(/^http/, 'ws'), subProtocol);

    return upgradeWebSocket(c, {
      onOpen(event, wsContext) {
        proxyWs.addEventListener('message', (event) => {
          if (wsContext.readyState === WebSocket.OPEN) {
            wsContext.send(event.data);
          }
        });
        proxyWs.addEventListener('close', () => {
          wsContext.close();
        });
      },
      onMessage(event, wsContext) {
        if (proxyWs.readyState === WebSocket.OPEN) {
          proxyWs.send(event.data);
        }
      },
      onClose() {
        proxyWs.close();
      }
    });
  }

  return proxy(proxyUrl, proxyInit);
}

It works with deno+vite. Didn't test it with anything else.
Probably will work with different adapters if you replace hono/deno.