Mosquitto与JavaScript交互示例在Firefox浏览器无法运行问题求助

问题排查 #

• clientId冲突：代码中固定写死了clientId: 'test_client'，公共测试服务器上大量用户使用相同ID会导致连接被主动踢下线，需要增加随机后缀保证ID唯一性
• 路径配置错误：test.mosquitto.org的加密WebSocket服务根路径不需要加/mqtt后缀，直接使用端口即可
• TLS兼容性问题：Firefox 89版本较老，公共测试服务器默认启用TLS 1.3，可在火狐地址栏输入about:config搜索security.tls.version.max确认值是否为4（对应TLS 1.3支持）
• 端口拦截问题：可先在终端执行telnet test.mosquitto.org 8081确认端口没有被本地防火墙或运营商网络拦截

可运行参考代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello MQTT World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/mqtt@4.3.7/dist/mqtt.min.js"></script>
<script>
    console.log('MQTT库加载完成', mqtt)

    const options = {
        clean: true,
        connectTimeout: 4000,
        // 增加随机后缀避免clientId重复
        clientId: 'test_client_' + Math.random().toString(16).substring(2, 8),
        // 私有服务器可在此补充用户名密码
        // username: 'your_username',
        // password: 'your_password'
    }

    // 移除多余的/mqtt路径
    const connectUrl = 'wss://test.mosquitto.org:8081'
    const client = mqtt.connect(connectUrl, options)

    client.on('connect', () => {
        console.log('连接成功')
        // 连接成功后订阅测试主题
        client.subscribe('test/topic/demo', (err) => {
            if (!err) {
                // 发布测试消息
                client.publish('test/topic/demo', 'Hello Mosquitto!')
            }
        })
    })

    client.on('reconnect', (error) => {
        console.log('正在重连:', error)
    })

    client.on('error', (error) => {
        console.log('连接失败:', error)
    })

    client.on('message', (topic, message) => {
        console.log('收到消息：', topic, message.toString())
    })
</script>
</head>
<body>
    <div id="logger"></div>
</body>
</html>

私有Mosquitto服务器配置注意事项 #

如果公共服务测试正常，你的私有服务器仍无法连接，需要检查：

• Mosquitto配置文件中已开启WebSocket支持，正确配置listener 8081、protocol websockets参数
• 已填写正确的SSL证书路径，certfile、keyfile、cafile参数无错误
• 服务器防火墙和安全组已放通对应WebSocket端口
• 证书为公共CA签发，自签证书需要手动导入到浏览器信任列表

内容的提问来源于stack exchange，提问作者Christof Bodner