html 页面中的 mqtt 客户端

mqtt client in html page

我想要一个可以发布和订阅 mqtt 代理的网页。 我还想使用 1883 端口与代理通信 - 而不是 websoctets。

这可能吗 - 有没有人有任何工作示例.. 我是一个真正的新手,承认我不完全理解 nodejs 和 javascript.

之间的区别

我制作了一个 html 页面,它有一个复选框设置,该复选框设置为通过 mqtt 代理切换 esp8266 上的 LED。在我加载页面后 - 开关工作......但我希望一旦我加载网页,它就会检查 LED 的状态并将其反映在复选框上。即:当我加载页面时,我可以看到 led 是打开还是关闭。

我有一个可以运行的 nodejs 脚本,它可以向 led 发布状态请求,并订阅 repsonce ..它成功地收到了响应..

有什么方法可以将此脚本构建到我的 html 页面中,以便在加载时从脚本中获取响应并相应地设置复选框?

我看到了一些 java mqtt html 客户端的例子,但这些似乎只适用于 websockets。 在我的项目中,我不确定允许将哪些监听器端口用于 websockets(如果有的话),所以我更愿意坚持使用 mqtt 端口 1883。

欢迎所有想法吗? 谢谢

如果您想通过网页连接到 MQTT 代理,您必须使用 MQTT over Websockets。浏览器中的 Javascript 沙箱不允许您以任何其他方式执行此操作。

您将需要使用支持 MQTT over Websockets 的 MQTT 代理,并且您很可能需要对其进行配置才能执行此操作。它需要在一个单独的端口上连接到 1883,因为这传统上用于本机 MQTT。

您可以在浏览器中使用 Paho JavaScript 库 (https://www.eclipse.org/paho/index.php?page=clients/js/index.php) or the MQTT.js library (https://www.npmjs.com/package/mqtt)。两个库都带有示例。

我们不会只在 Stack Overflow 上提供示例,尝试使用库提供的示例,如果您遇到困难,请打开一个 new 问题并展示您尝试过的内容并进行解释什么不起作用,我们会帮助您修复它。