后端启动 websocket 的 mqtt 服务，前端应该怎么连接

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2151 天前的主题，其中的信息可能已经有所发展或是发生改变。

是这样的，我们公司需要做即时通讯的功能，选择了 mqtt 协议来进行通讯，我自己这边起了一个 node 的 mqtt 的服务端，然后再起一个 node 的 mqtt 的客户端访问正常。用 python 起了一个 mqtt 的客户端也可以正常访问 node 的服务端。但是直接用一个静态 html 里面写 mqtt 的 js 就不能正常访问了。

哪位大佬做过 mqtt 请指教一下
是不是因为 html 是 file://结尾的不能访问
或者是因为跨域的问题不能访问，需要前端再起一个代理去访问 mqtt 的服务吗，因为客户端是后端的时候访问正常，但是客户端是前端的时候就不能访问

这个是 mqtt 的服务 nodejs 代码

const mosca = require('mosca')
const MqttServer = new mosca.Server({
  port: 8081
})

MqttServer.on('clientConnected', function(client){
  console.log('client connected', client.id);
  console.log('客户端连接成功啦啦啦');
});

这个是 node 的客户端代码，访问正常

let mqtt = require('mqtt')
let options = {
}
let client = mqtt.connect('mqtt://127.0.0.1:8081', options)

client.on('connect', function (res) {
  console.log(res)
})

以下是前端代码，访问失败

<meta charset="UTF-8">
<html>
    <head>
        <title> QBB IM WebSocket Example</title>
        <style></style>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type ="text/javascript"> 
            </script>
            <script type="text/javascript" language="javascript">
                var mqtt;
                var reconnectTime=1000;
                // var host="192.168.1.20"; // ws://apiimtest.qbb6.com
				var host="127.0.0.1";
                var port= 8081;
                function onConnect(){
                    console.log("connected");
                    message = new Paho.MQTT.Message("Hello World");
                    mqtt.send(message); 
                }
                function onFailure(){
                    console.log("onFailure");
                }
                function MQTTConnect(){
                    console.log("connecting to "+host+" "+port);
					// console.log(new Paho())
                    mqtt = new Paho.MQTT.Client(host, port, "clientjs");
                    var options={
                        // timeout:3,
						useSSL: false,
						onFailure: onFailure,
                        onSuccess:onConnect
                    };
                    mqtt.connect(options);
					console.log("oo")
                }
            </script>
    </head>
    <body>
        <h1>Main Body</h1>
        <script>
            MQTTConnect();
        </script>
    </body>
</html>

第 1 条附言 · 2019-02-02 20:01:31 +08:00

已经解决，上面的 mqtt 的服务端代码是针对服务器跑的客户端。浏览器访问 mqtt 连接的参数不一样。如下可以正常访问
```
const mosca = require('mosca')

let ascoltatore = {
//using ascoltatore

};
let settings = {
http: {
port: 8081,
bundle: true,
static: './'
},
backend: ascoltatore
};
const MqttServer = new mosca.Server(settings)
MqttServer.on('clientConnected', function(client){
console.log('client connected', client.id);
console.log('客户端连接成功啦啦啦');
console.log(num ++)
});

```

1 条回复 • 2019-02-02 17:58:15 +08:00

chenlaocong

2019-02-02 17:58:15 +08:00 via Android

怎么在客户端看的不是 markdown 啊😯😯