在浏览器中尝试连接 mqtt

Question

我正在尝试使用 JS 在我的浏览器上建立 mqtt 连接

我正在关注本教程：https://emqx.medium.com/use-websocket-to-connect-to-mqtt-broker-9e7baf1aa773

所以我有这个：

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script>
    // Globally initializes an mqtt variable    
    const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
    
    
    const host = 'ws://broker.***.***.com:9883'
    
    const options = {
        keepalive: 60,
        clientId: clientId,
        username: '***',
        password: '***',
        protocolId: 'MQTT',
        protocolVersion: 4,
        clean: true,
        reconnectPeriod: 1000,
        connectTimeout: 30 * 1000,
        
        will: {
            topic: 'WillMsg',
            payload: 'Connection Closed abnormally..!',
            qos: 0,
            retain: false
        },
    }
    
    console.log('Connecting mqtt client')
    const client = mqtt.connect(host, options)
    
    client.on('connect', () => {
        console.log('Client connected:' + clientId)
        // Subscribe
    })
</script>

在我的浏览器中出现了这个错误：

经过一番研究，有人说需要使用证书：https://github.com/eclipse/paho.mqtt.javascript/issues/187

所以，我有这个：

<script src="../browserMqtt.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

<script>
            var options = {
                keyPath: '../credentials/client-key.pem',
                certPath: '../credentials/client-cert.pem',
                rejectUnauthorized : false, 
                ca: ['../credentials/a-cert.pem'],
                protocolId: 'MQTT',
                username: '***',
                password: '***',
                clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8)
            };

            var client = mqtt.connect('ws://broker.***.***.com:9883',options);

            client.on('connect', function(){
                console.log('Connected');
            });    
                    
</script>

我在浏览器中遇到了同样的错误...

mosquitto 的代理配置，是这样的：

allow_anonymous false
password_file /mosquitto/config/passwd

#TCP
listener 1883
socket_domain ipv4

#SSL
listener 8883
socket_domain ipv4
cafile /mosquitto/config/tls/ca/ca-cert.pem
certfile /mosquitto/config/tls/server/server-cert.pem
keyfile /mosquitto/config/tls/server/server-key.pem
tls_version tlsv1.2
socket_domain ipv4

#WSS
listener 9883
socket_domain ipv4
protocol websockets
cafile /mosquitto/config/tls/ca/ca-cert.pem
certfile /mosquitto/config/tls/server/server-cert.pem
keyfile /mosquitto/config/tls/server/server-key.pem
tls_version tlsv1.2

persistence true
persistence_location /mosquitto/data/

log_dest file /mosquitto/log/mosquitto.log
log_timestamp_format %Y-%m-%dT%H:%M:%S
log_type all

我不明白我该如何解决？感谢您的帮助

Answer 1

您不能在浏览器中使用客户端证书来对客户端进行身份验证（除非您将它们加载到浏览器密钥库中，但即便如此我也不相信它会起作用，除非浏览器只有一个证书/密钥选择为 javascript 代码通常不会提示用户选择正确的代码）。

同样通过 http 从服务器加载客户端证书完全违背了使用客户端证书的意义，因为任何人都可以下载它们。

您需要从options 中删除以下所有内容

keyPath: '../credentials/client-key.pem',
certPath: '../credentials/client-cert.pem',
rejectUnauthorized : false, 
ca: ['../credentials/a-cert.pem'],
protocolId: 'MQTT',

因为路径在浏览器中没有意义（以及我前面提到的原因）

您还应该以 wss:// 开头您的代理 URL，以表明您正在尝试通过安全的 WebSockets 进行连接。