Connection is stuck after multiple calls 'publish' and sending a large (±200kb) WebSocket message in Chrome

[a1leks]

Hello there! First of all, thank you for the library. I appreciate your work.

I faced a strange issue in Chrome 120. My MQTT.js version is 5.3.4, QoS is 1, the broker is custom-made.
My WebSocket MQTT connection stops working after sending numerous packets in a single 200KB WS request in Chrome. The connection seems fine, and there are no errors. However, the server stops responding after receiving a large message. This issue is specific to Chrome; it works well in Firefox and Safari.

More details:

I call client.publish 500-1000 times synchronously in a loop to send numerous small buffered messages.
I see that WS send it in a one big message. It looks like:

The broker correctly handles approximately half of the messages from this WS request and then it's just stuck. Then I can publish new messages, but they are not received/processed by the broker and I don't get a PUBACK message

This might be a broker issue or even a Chrome issue; however, I have several questions about MQTT.js and hope the answers will be useful not only for me.

1. Any advice how to avoid/fix the situation?
2. Does mqtt.js have any options for splitting packages and not sending them in one WS message? Don't see it in the doc.
3. Does mqtt.js have any constraints for the size of uploaded data or frequency of calling client.publish?

Thanks!

[robertsLando]

I suggest you to give a look at:

MQTT.js/src/lib/connect/ws.ts

Lines 262 to 285 in c8b6695

	function socketWriteBrowser(
	chunk: any,
	enc: string,
	next: (err?: Error) => void,
	) {
	if (socket.bufferedAmount > bufferSize) {
	// throttle data until buffered amount is reduced.
	setTimeout(socketWriteBrowser, bufferTimeout, chunk, enc, next)
	return
	}
	if (coerceToBuffer && typeof chunk === 'string') {
	chunk = Buffer.from(chunk, 'utf8')
	}
	try {
	// https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send (note this doesn't have a cb as second arg)
	socket.send(chunk)
	} catch (err) {
	return next(err)
	}
	next()
	}