The exception 'ws does not work in the browser' if I try connecting from a worker thread

[a1leks]

The Issue

I use MQTT 5.1.0 in a browser inside a worker thread, but I can't connect and I get an exception: ws does not work in the browser

As I see this code can be the root reason of issue:

MQTT.js/src/lib/is-browser.ts

Lines 1 to 2 in 5006aea

	const isBrowser =
	typeof window !== 'undefined' && typeof window.document !== 'undefined'

I have isBrowser false because I don't have the window object inside a worker. It leads to executing streamBuilder and then I get mentioned exception in createWebSocket

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

Line 141 in 5006aea

const streamBuilder: StreamBuilder = (client, opts) => {

however I expect executing browserStreamBuilder

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

Line 158 in 5006aea

const browserStreamBuilder: StreamBuilder = (client, opts) => {

In case I fix the browser checking, everything works fine for me, and the connection is successful.

The proposal/question

Could you consider improving the 'is-browser' checking or giving me an advice on how to properly make MQTT connecting from a browser worker thread? I appreciate your answer.

[expcapitaldev]

do not see any info about Web worker and MQTT, is it supported ?

[robertsLando]

import * as mqtt from 'mqtt/dist/mqtt'

[a1leks]

@robertsLando

I import exactly like you wrote. It works fine from main JS thread but it doesn't work from web worker JS thread. I've read the doc. Your advise unfortunately didn't help.

Have you ever tested this lib inside worker? Could you clarify is mqtt.js 5.x.x compatible with WebWorkers in browser (or not)? Thanks for answer!

[robertsLando]

@a1leks any hints about the error thrown?

[a1leks]

I run my app in chrome

1. install mqtt 5.1.0 - npm i [email protected] --save-exact
2. Create new worker thread using new Worker('./my-worker', {type: 'module'});
3. Import mqtt inside my-worker.ts using import * as mqtt from 'mqtt/dist/mqtt';
4. Do connect also inside my-worker.ts using code:

mqtt.connect(
    this.brokerUrl, 
    {
        defaultProtocol: 'wss',
	protocol: 'wss',
	username: this.userName,
	password: this.password,
	clientId: this.deviceId,
    }
);

And then I encountered an error during the connection process (screenshots below):

There is no window in worker.

I can't provide my code, but if there isn't enough information, I can prepare a code sample. Just let me know if it will be useful.

[robertsLando]

what you could try is to manually create your websocket by using the createWebsocket option

[robertsLando]

something like:

mqtt.connect(
    this.brokerUrl, 
    {
	    defaultProtocol: 'wss',
		protocol: 'wss',
		username: this.userName,
		password: this.password,
		clientId: this.deviceId,
		createWebsocket(url, [protocol], opts) {
				return new WebSocket(url, [protocol])
		}
    }
);

[a1leks]

Thanks! I've tried. However in this case I have an error ws_1.default.createWebSocketStream is not a function:

It looks like code from https://github.com/websockets/ws which doesn't work in browser.

This is the root issue I guess. Could you please have a look

const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';

It doesn't look compatible with web workers in browser.

[robertsLando]

Could you test this? #1711

[a1leks]

The fix works good for me. Connection is successful from a web worker.

[robertsLando]

Perfect, will merge and release tomorrow a new patch

[a1leks]

Thanks!

[robertsLando]

FYI starting from 5.2.1 you can now import mqtt using:

import mqtt from 'mqtt'