WebSocket proxy fails if HMR is running on same port

[bminer]

🐛 bug report

When running parcel serve where the --port is the same as the --hmr-port (the default behavior AFAIK), the WebSocket proxy (i.e. .proxyrc) no longer functions properly.

🎛 Configuration

$ cat .proxyrc.json

{
	"/ws": {
		"target": "http://localhost:1235/",
		"ws": true
	}
}

Running this command exhibits the bug:

parcel index.html

🤔 Expected Behavior

WebSocket proxy should work. When the browser connects to ws://localhost:1234/ws, it should be proxied to localhost:1235/ws using http-proxy-middleware

😯 Current Behavior

When the browser establishes the WebSocket connection to ws://localhost:1234/ws, parcel indicates that the web browser immediately disconnects:

$ parcel --port 1234 --hmr-port 1234 index.html

Server running at http://localhost:1234
✨ Built in 1.76s
console: [HPM] Upgrading to WebSocket
console: [HPM] Client disconnected

On the WebSocket server running in Go on port 1235, I get an error that seems to indicate that the socket is closed:

failed to get reader: failed to read frame header: EOF

On the browser (Firefox), I get a message like this:

The connection to ws://localhost:1234/ws was interrupted while the page was loading.

which occurs on the line where I create the new WebSocket(...).

💁 Possible Solution

Everything runs fine without parcel. If I parcel build and bypass the parcel server and HMR server, it works.

Running Parcel with a different HMR port also seems to work (note that HMR port is set to 1236):

parcel --port 1234 --hmr-port 1236 index.html

$ parcel --port 1234 --hmr-port 1236 index.html

Server running at http://localhost:1234
✨ Built in 392ms
console: [HPM] Upgrading to WebSocket

... and in this case, it all works splendidly.

This seems to indicate that parcel serve does not properly handle WebSocket proxying with http-proxy-middleware when the HMR server is running on the same port as the normal parcel HTTP server.

🔦 Context

I'm just trying to run parcel serve [entry_point] and have it work (ideally without a separate HMR port).

💻 Code Sample

I can provide a sample upon request, but it will take time.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-rc.0
Node	v14.17.6
npm/Yarn	npm 6.14.15
Operating System	Linux Mint 20.2
Browser	Firefox 92.0.1
Go	1.16.6
Go WebSocket lib	nhooyr.io/websocket v1.8.7

[eirikb]

Thank you. Had the exact same issue, your solution worked perfectly.

[mistakenot]

+1 here also. I'm on parcel ^2.0.1 and socket.io-client ^4.3.2, changing the hmr socket worked for me.

[nunof07]

Thank you. Your solution worked for me.

[dispalt]

Thank you so much! I was getting something like below (in case others run into this) on the server side (Scala/Java).

io.netty.handler.codec.http.websocketx.CorruptedWebSocketFrameException: bytes are not UTF-8

[bminer]

AFAIK, this is still an issue. Either a documentation change should be made to inform users of this, or the bug should be fixed.

[xiemeilong]

This issue is still exist in the latest version.

[mischnic]

This is the relevant code for the case of --port === --hmr-port.

parcel/packages/reporters/dev-server/src/ServerReporter.js

Lines 46 to 55 in 2facd5d

	let hmrServerOptions = {
	port: serveOptions.port,
	host: hmrOptions.host,
	devServer,
	addMiddleware: handler => {
	server?.middleware.push(handler);
	},
	logger,
	};
	hmrServer = new HMRServer(hmrServerOptions);

parcel/packages/reporters/dev-server/src/HMRServer.js

Line 89 in 2facd5d

this.wss = new WebSocket.Server({server});

The HTTP server creation including proxyrc is here (the server here becomes devServer in HMRServer above):

parcel/packages/reporters/dev-server/src/Server.js

Lines 465 to 497 in 2facd5d

	const app = connect();
	app.use((req, res, next) => {
	setHeaders(res);
	next();
	});
	await this.applyProxyTable(app);
	app.use(finalHandler);
	let {server, stop} = await createHTTPServer({
	cacheDir: this.options.cacheDir,
	https: this.options.https,
	inputFS: this.options.inputFS,
	listener: app,
	outputFS: this.options.outputFS,
	host: this.options.host,
	});
	this.stopServer = stop;
	server.listen(this.options.port, this.options.host);
	return new Promise((resolve, reject) => {
	server.once('error', err => {
	this.options.logger.error(
	({
	message: serverErrors(err, this.options.port),
	}: Diagnostic),
	);
	reject(err);
	});
	server.once('listening', () => {
	resolve(server);
	});
	});