Как подключить React к MQTT через WSS

Я пытаюсь подключиться к MQTT Broker, используя MQTT.js в своем приложении React, но получаю сообщение об ошибке протокола WSS.

Во-первых, мой файл mosquitto.conf:

# mosquitto.conf

pid_file /run/mosquitto/mosquitto.pid

persistence true
persistence_location /var/lib/mosquitto/

log_dest file /var/log/mosquitto/mosquitto.log

include_dir /etc/mosquitto/conf.d

allow_anonymous false
password_file /etc/mosquitto/passwd

listener 3940
protocol mqtt

listener 39393
protocol websockets

listener 3941
protocol mqtt
cafile /etc/mosquitto/certs/ca.crt
certfile /etc/mosquitto/certs/broker.crt
keyfile /etc/mosquitto/certs/broker.key

listener 3942
protocol websockets
cafile /etc/mosquitto/certs/ca.crt
certfile /etc/mosquitto/certs/broker.crt
keyfile /etc/mosquitto/certs/broker.key

И блок кода в моем приложении React:

// some.jsx

useEffect(() => {
        let reconnectAttempts = 0;
        try {
            if (user && !client) {
                const host = "ws://my.domain.io:39393"
                // const host = "wss://my.domain.io:3942
                const options = {
                    keepalive: 60,
                    clientId: `${user.username}_${user.id}_${user.tenant}_${Date.now()}`,
                    username: "username",
                    password: "password",
                    clean: true,
                    rejectUnauthorized: false
                };
                const mqttClient = mqtt.connect(host, options);
                setClient(mqttClient);
                console.info("client: ", mqttClient);

                mqttClient.on("connect", () => {
                    console.info("Connected to MQTT broker");
                    setIsConnected(true);
                    setIsReconnecting(false);
                    setIsDisconnected(false);
                    reconnectAttempts = 0;
                });
                
                mqttClient.on("disconnect", () => {
                    console.info("Disconnected to MQTT broker");
                    setIsConnected(false);
                    setIsDisconnected(true);
                });
                
                mqttClient.on("close", (err) => {
                    console.info("Closed connection to MQTT broker", err);
                });

                mqttClient.on("reconnect", () => {
                    reconnectAttempts++;
                    setIsReconnecting(true);

                    if (reconnectAttempts > 5) {
                        mqttClient.end();
                        console.info("Reconnect attempts exceeded. Closing connection to MQTT broker");
                        setIsConnected(false);
                        setIsDisconnected(true);
                        return;
                    }
                    console.info("Reconnecting to MQTT broker", reconnectAttempts);
                });
                
                mqttClient.on("error", (err) => {
                    console.info("Error from MQTT broker", err); 
                });
            }   
        } catch (error) {
            console.error("Error connecting to MQTT broker", error);
        }

        return () => {
            if (client) {
                console.info("MQTT Hook cleanup")
                client.end();
                setClient(null);
            }
        }
    }, [user, client]);

Я могу подключиться к хосту mqtts://my.domain.io:3941 на своем локальном устройстве, но не могу подключиться к хосту wss://my.domain.io:3942 в производственной среде, поскольку мне нужно подключиться через HTTPS. Кроме того, я могу подключиться к wss://my.domain.io:3942 и без проблем выполнять операции публикации/подписки, используя Python, MQTT Box и MQTT Explorer.

СС из MQTT Box:

ОБНОВЛЯТЬ:

# some.py
    def connect(self):
        self.client.on_message = self.on_message
        self.client.on_connect = self.on_connect
        self.client.on_disconnect = self.on_disconnect
        
        self.client.tls_set(cert_reqs=ssl.CERT_NONE)
        
        self.client.username_pw_set(self.username, self.password)
        
        self.client.connect(self.broker, self.port, keepalive=10)
        self.client.loop_start()

Мои журналы Mosquitto выглядят следующим образом. Мое серверное приложение, работающее в локальной среде, может подключаться к порту 3941 без сертификата, тогда как мое приложение React может подключаться только к порту 39393 без сертификата.

Когда мое приложение React в производственной среде пытается подключиться к порту 39393, моя консоль показывает:

Когда он пытается подключиться к порту 3942, моя консоль показывает:

Наконец, хотя мое приложение React в производственной среде настроено на порт 39393 или 3942, в моих журналах Mosquitto данные не отображаются.

Итак, я хочу подключить React к MQTT через WSS на моем рабочем сервере.