1、MQTT Server使用EMQTTD开源库，自行安装配置；
2、JS使用Websocket连接通信。
3、JS的MQTT库为paho-mqtt，git地址：https://github.com/eclipse/paho.mqtt.javascript.git
 
代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js” type=“text/javascript”> </script> -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>

    <script>

        var hostname = '127.0.0.1', //'192.168.1.2',

            port = 8083,

            clientId = 'client-mao2080',

            timeout = 5,

            keepAlive = 100,

            cleanSession = false,

            ssl = false,

            // userName = 'mao2080',

            // password = '123',

            topic = '/World';

        client = new Paho.MQTT.Client(hostname, port, clientId);

        //建立客户端实例

        var options = {

            invocationContext: {

                host: hostname,

                port: port,

                path: client.path,

                clientId: clientId

            },

            timeout: timeout,

            keepAliveInterval: keepAlive,

            cleanSession: cleanSession,

            useSSL: ssl,

            // userName: userName,

            // password: password,

            onSuccess: onConnect,

            onFailure: function (e) {

                console.log(e);

                s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onFailure()}";

                console.log(s);

            }

        };

        client.connect(options);

        //连接服务器并注册连接成功处理事件

        function onConnect() {

            console.log("onConnected");

            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnected()}";

            console.log(s);

            client.subscribe(topic);

        }

        client.onConnectionLost = onConnectionLost;

        //注册连接断开处理事件

        client.onMessageArrived = onMessageArrived;

        //注册消息接收处理事件

        function onConnectionLost(responseObject) {

            console.log(responseObject);

            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onConnectionLost()}";

            console.log(s);

            if (responseObject.errorCode !== 0) {

                console.log("onConnectionLost:" + responseObject.errorMessage);

                console.log("连接已断开");

            }

        }

        function onMessageArrived(message) {

            s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", onMessageArrived()}";

            console.log(s);

            console.log("收到消息:" + message.payloadString);

        }

        function send() {

            var s = document.getElementById("msg").value;

            if (s) {

                s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (s) + ", from: web console}";

                message = new Paho.MQTT.Message(s);

                message.destinationName = topic;

                client.send(message);

                document.getElementById("msg").value = "";

            }

        }

        var count = 0;

        function start() {

            window.tester = window.setInterval(function () {

                if (client.isConnected) {

                    var s = "{time:" + new Date().Format("yyyy-MM-dd hh:mm:ss") + ", content:" + (count++) +

                        ", from: web console}";

                    message = new Paho.MQTT.Message(s);

                    message.destinationName = topic;

                    client.send(message);

                }

            }, 1000);

        }

        function stop() {

            window.clearInterval(window.tester);

        }

        Date.prototype.Format = function (fmt) { //author: meizz

            var o = {

                "M+": this.getMonth() + 1, //月份

                "d+": this.getDate(), //日

                "h+": this.getHours(), //小时

                "m+": this.getMinutes(), //分

                "s+": this.getSeconds(), //秒

                "q+": Math.floor((this.getMonth() + 3) / 3), //季度

                "S": this.getMilliseconds() //毫秒

            };

            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

            for (var k in o)

                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[

                    k]) : (("00" + o[k]).substr(("" + o[k]).length)));

            return fmt;

        }

    </script>

</head>

<body>

    <input type="text" id="msg" />

    <input type="button" value="Send" onclick="send()" />

    <input type="button" value="Start" onclick="start()" />

    <input type="button" value="Stop" onclick="stop()" />

</body>

</html>
 

JavaScript使用MQTT的更多相关文章

  1. 使用javascript连接mqtt协议（自动重连问题）

    因为之前是在rabbitmq的插件"RabbitMQ Web MQTT plugin "中看到使用了mqttws31.js的实例,由于对mqttws31不了解,网上下载了连接成功, ...

  2. 采用MQTT协议实现android消息推送（2）MQTT服务端与客户端软件对比、android客户端示列表

    1.服务端软件对比 https://github.com/mqtt/mqtt.github.io/wiki/servers 名称(点名进官网) 特性 简介 收费 支持的客户端语言 IBM MQ 完整的 ...

  3. MQTT研究之EMQ：【EMQX使用中的一些问题记录（2）】

    我的测试环境: Linux: CentOS7 EMQX:V3.2.3 题外话: 这里主要介绍Websocket的支持问题. 对ws的支持比较正常,但是对wss的支持,调了较长的时间,没有成功. Jav ...

  4. uniapp中mqtt的基本使用

    参考文档: [1] https://www.hivemq.com/blog/mqtt-client-library-mqtt-js/ [2] https://www.tabnine.com/code/ ...

  5. paho_c_pub 使用方法

    Latest Paho Status (2) 摘自:http://modelbasedtesting.co.uk/ I last wrote about the state of Paho in Oc ...

  6. javascript mqtt 发布订阅消息

    js client使用paho-mqtt,官网地址:http://www.eclipse.org/paho/,参考http://www.eclipse.org/paho/clients/js/官网给出 ...

  7. TCP/IP, WebSocket 和 MQTT

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP和MQTT是应用层的协议.在这三者之间, TCP是HTTP和MQTT底层的协议.大家对HTTP很熟悉,这里简要介绍下MQTT.M ...

  8. MQTT 消息 发布 订阅

    当连接向一个mqtt服务器时,clientId必须是唯一的.设置一样,导致client.setCallback总是走到 connectionLost回调.报connection reset.调查一天才 ...

  9. MQTT和WebSocket

    严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的.   MQTT和TCP.WebSocket的关系可以用下图一目了然:   参考资料: http://www.zhihu.com/q ...

随机推荐

  1. 每日一技|巧用 Telnet 调试 Dubbo 服务

    个人博客地址 studyidea.cn,点击查看更多原创文章 0x00. 前言 想象这样一个场景,线上某个服务突发异常,导致上游服务调用异常,数据处于中间状态.服务恢复之后,我们需要修复这笔数据至正常 ...

  2. python基础[1]——python运算符&python数据类型之数值型

    python常用运算符&数字&布尔值 上节回顾 一.变量名和标识符 变量名的命名规范 (1)只能包含数字,字母和下划线 (2)只能以字母和下划线开头(不能以数字开头) (3)标识符是区 ...

  3. CUDA学习（四）之使用全局内存进行归约求和（一个包含N个线程的线程块）

    问题:使用CUDA进行数组元素归约求和,归约求和的思想是每次循环取半. 详细过程如下: 假设有一个包含8个元素的数组,索引下标从0到7,现通过3次循环相加得到这8个元素的和,使用一个间隔变量,该间隔变 ...

  4. springboot打印sql语句及执行时间

    有时候我们程序的接口比较耗时,需要优化,这时我们可能需要了解该接口执行了哪些sql语句以及耗时 1.引入jar包 <!--监控sql日志--> <dependency> < ...

  5. Java并发读书笔记：JMM与重排序

    目录 Java内存模型(JMM) JMM抽象结构 重排序 源码->最终指令序列 编译器重排序 处理器重排序 数据依赖性 as-if-serial happens-before happens-b ...

  6. ubuntu 安装LAMP web 服务器， phpmyadmin 安装后无法打开解决

    安装方法: http://blog.chinaunix.net/uid-26495963-id-3173291.html 在上述文档中需要增加apache 支持mysql 功能. apt-get in ...

  7. Jenkins report 打开样式失败解决方案

    1.临时解决方案(重启Jenkins失效):在系统管理->脚本命令行: 执行: System.setProperty("hudson.model.DirectoryBrowserSup ...

  8. 转AngularJS路由插件

    AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析 标签: angular源码angularjs 2016-05-04 13:14 916人阅读 评论(0) ...

  9. Golang设置https访问，以及http如何重定向到https

    设置https访问: 原始代码为http监听: func main() { server := &http.Server{ Addr: ":8080", ... } go ...

  10. 动态主机配置协议-DHCP

    一.DHCP 概述 当局域网中有大量的PC时.如果我们逐个为每台PC去手动配置IP.那这就是一个吃力也未必讨好的办法 累死你 而DHCP 刚好可以解决这个问题.DHCP全称(动态主机配置协议).使用的 ...