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