通过web套接字将网页连接到MQTT代理
我在cloudMQTT创建了mqtt broker，下面是我获得的关于端口和服务器的信息
现在，我编写了代码来运行连接到该代理并发送hello world的网页。
<html>
<head>
<title>JavaScript MQTT WebSocket Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript">
</script>
<script type = "text/javascript" language = "javascript">
var mqtt;
var reconnectTimeout = 2000;
var host="m23.cloudmqtt.com"; //change this
var port= 38788;
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
console.log("Connected ");
//mqtt.subscribe("sensor1");
message = new Paho.MQTT.Message("Hello world");
message.destinationName = "orange1";
mqtt.send(message);
}
function MQTTconnect() {
console.log("connecting to "+ host +" "+ port);
mqtt = new Paho.MQTT.Client(host,port,"clientjs");
//document.write("connecting to "+ host);
var options = {
timeout: 3,
onSuccess: onConnect,
};
mqtt.connect(options); //connect
}
</script>
</head>
<body>
<h1>Main Body</h1>
<script>
MQTTconnect();
</script>
</body>
</html>每次我打开该页面并打开console.js时，我都会收到该问题消息：
(以下是显示在my console.log中的错误列表。为了帮助任何能看到图片的人)到'ws://m23.cloudmqtt.com:38788/mqtt‘的WebSocket连接失败: WebSocket握手期间出错: net::ERR_CONNECTION_RESET mqttws31.js:979
邮箱: Paho.MQTT.ClientImpl._doConnect @ mqttws31.js:979
邮箱: Paho.MQTT.ClientImpl.connect @ mqttws31.js:849
邮箱: Client.connect @ mqttws31.js:1799
邮箱: MQTTconnect @websockets 1.htm:31
(匿名)@ websockets-1.htm:39
与'ws://m23.cloudmqtt.com:38788/mqtt‘的WebSocket连接失败: WebSocket握手期间出错: net::ERR_CONNECTION_RESET mqttws31.js:977
邮箱: Paho.MQTT.ClientImpl._doConnect @ mqttws31.js:977
邮箱: Paho.MQTT.ClientImpl._disconnected @ mqttws31.js:1459
邮箱: Paho.MQTT.ClientImpl._on_socket_error @ mqttws31.js:1347
(匿名)@ mqttws31.js:157
我试图改变端口，但我得到了相同的问题。我怎么能修复这样的东西呢？如果我尝试连接到https://test.mosquitto.org/，也会遇到同样的问题？如何才能解决这个问题呢？
回答 2
Stack Overflow用户
发布于 2018-03-02 01:39:35
您需要设置标志来启用SSL (正如端口图片所示，Websockets需要TLS )
var options = {
timeout: 3,
onSuccess: onConnect,
useSSL: true
};Stack Overflow用户
发布于 2019-03-13 13:48:37
请检查此代码：
更改websocket和端口以及用户和密码，从cloudmqtt.com获取
<html>
<head>
<title>My First Value</title>
<h1>Main Body</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
</head>
<body>
<h1><div id="connstatus">
Mqtt Not connected.</div></h1>
</body>
<script>
var websocket="m13.cloudmqtt.com";
var port=31609;
var user="test1234";
var pass="test1234";
//client = new Paho.MQTT.Client(websocket, port, "web_" + parseInt(Math.random() * 100, 10));
client = new Paho.MQTT.Client(websocket, port, "Deviceid_34534543");
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
var options = {
useSSL: true,
userName: user,
password: pass,
onSuccess:onConnect,
onFailure:doFail
}
// connect the client
client.connect(options);
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
document.getElementById("connstatus").innerHTML = "Mqtt Connected";
console.log("Mqtt Connected");
client.subscribe("/sensor/#");
message = new Paho.MQTT.Message("Hello world");
message.destinationName = "/sensor/1";
client.send(message);
}
function doFail(e){
console.log(e);
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
document.getElementById("connstatus").innerHTML = "Mqtt Not Connected";
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
function onMessageArrived(message) {
console.log("onMessageArrived:"+message.destinationName);
console.log("message.payloadString:"+message.payloadString);
}
</script>
</html>
https://stackoverflow.com/questions/49054009
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号