使用JavaScript MQTT Websockets客户端-(分步示例)



Web浏览器可以使用http和websockets协议,但不能使用MQTT。 为了能够使用浏览器发布和订阅MQTT代理,您将需要通过websockets JavaSript客户端使用MQTT。 这是涵盖MQTT Javascript客户端的简短视频系列的第一部分,其中我们将使用非常简单的脚本通过MQTT和websocket发布和接收消息。 我将逐步引导您完成此脚本,并解释脚本的重要元素。 该脚本从Internet上通过Websockets脚本引入了MQTT,但是您也可以下载该脚本并将其安装在本地。 我们从发布数据的简单脚本开始,然后扩展此脚本以通过MQTT订阅和接收数据。 我们检查经纪人方并观察客户的连接,订阅和发布。 消息已记录到控制台,我将向您展示如何使用devrloper工具在Firefox中查看这些消息。 有关在脚本中使用document.wite()函数尝试并显示消息的警告。 它不起作用,所以不要这样做。 网站上的教程http://www.steves-internet-guide.com/using-javascript-mqtt-client-websockets/其他视频通过Websockets上的MQTT解释了https://youtu.be/EvUI4vRhF88使用JavaScript MQTT客户端-Example2 https ://youtu.be/_6_5ubPfm8U您可以在此处下载脚本http://www.steves-internet-guide.com/downloads/#examples有问题请使用注释,或者如果需要帮助,请使用http:// www .steves-internet-guide.com / ask-steve /如果您发现这些视频有用,那么您可能要考虑向我购买咖啡https://www.paypal.me/StepenCope。

14 comments
  1. I know it's been two years since you published that. I'm a software engineer and as a sign of appreciation for this video I'm offering to help you with web technologies (html, Javascript, css, etc.) so you can build better examples for your audience.

    No catch, just a thank you,
    Jack

  2. Hello.
    getting this error:
    WebSocket connection to 'ws://192.168.0.105:1883/mqtt' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
    that's my laptop IPv4 address checked in cmd (ip config) and that's my Mosquitto broker port, have no idea how to fix it, please help

  3. Hi Steve, thank you very much for these tutorials. A year ago, I used to watch your videos when I was learning Node-Red and MQTT, now because I have to stay at home I'm learning html and JS and I fall in your channel again xD. So thank you again.

  4. Excellent tutorial! I was able to publish and read the posts. BUT I ran into a problem. Example: I have a value of 0 and 1 in the topic. I would like to see when entering the page what value is in the topic and shown me on the page. I think I have to use the retain function but I didn't know how to implement in the code you passed. Would you help me ? Thanks for the help and sorry my english!

Comments are closed.