websocket - MQTT WebSocket 连接失败
问题描述
我是编程新手,遇到了障碍。我正在做一个 DRTLS 项目并遇到问题。每当我运行我的代码并在 Chrome 浏览器的控制台中查看时,我总是让 WebSocket 连接到 'ws://192.168.0.156:1883/' failed:"。任何专业人士都可以帮忙吗?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.0.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.0.min.js"
crossorigin="anonymous"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div id="map0"></div>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
if(window.screen.width > 600){
var width = window.screen.width/2 - 40
}else{
var width = window.screen.width
}
var height = 700;
var i = 0;
async function fetch_plot(){
const response = await fetch('/api-Map-w='+width+'&h='+height);
var item = await response.json();
Bokeh.embed.embed_item(item, "map0");
}
async function fetch_path(count, startPoint, endPoint){
document.getElementById("map" + count).remove();
var elemDiv = document.createElement('div');
count = count + 1;
elemDiv.id = "map" + count;
document.body.appendChild(elemDiv);
const response = await fetch('/api-Path-s='+startPoint+'&e='+endPoint);
var newItem = await response.json();
Bokeh.embed.embed_item(newItem, "map" + i);
}
fetch_plot();
// var options = {
// mqtt_user: "dwmuser",
// mqtt_password: "dwmpass",
// will: {
// mqtt_topic_prefix: 'dwm',
// }
// }
const client = mqtt.connect("ws://192.168.0.156:1883", { clientId: "ee9ea05d56814fd9992bf1ef34119683", username: "dwmuser", password: "dwmpass" });
// var client = mqtt.connect('ws://192.168.0.156:1883', options=options);
// console.log(client);
// function insertpoint(name, x, y) {
// var ds = Bokeh.documents[0].get_model_by_name(name)
// var len = ds.data.x.push(x)
// ds.data.y.push(y)
// if(len > 5){
// ds.data.x.shift()
// ds.data.y.shift()
// }
// ds.change.emit()
// }
</script>
</body>
解决方案
对于几乎所有 MQTT 代理(包括 mosquitto),您需要为本地 MQTT 和 MQTT over WebSockets 配置单独的侦听器。
本机 MQTT 的默认端口是 1883,您将无法使用浏览器中的 Paho JavaScript MQTT 客户端库连接到此端口。
您需要确保您的代理正确配置了 MQTT over WebSockets 侦听器,然后确保在连接时使用网页中的连接端口。
屏幕截图中的 MQTTfx 正在连接到本机 MQTT。
推荐阅读
- angular - @angular/cdk/在 panzoom 中拖放
- vba - 无法使用 Outlook VBA 聚焦 Outlook 窗口并单击通讯簿
- c# - 我想防止使用 Asp.net 核心流式验证更新属于对象的 FirstName 和 LastName 属性
- python - Radial Axis plotly express显示浮点数而不是整数?
- sql-server - 有没有一种方便的方法来比较 SQL 中的每周数据?
- r - 为每一行数据填充一个矩阵的函数
- javascript - 选择 iframe 内的元素返回空数组
- java - Cassandra -f 找不到依赖库 java.lang.UnsatisfiedLinkError
- python - 搜索 json 文件返回数据框列中键的一部分
- bash - 如何在bash中忽略diff的输出