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. artTemplate--使用artTemplate时，由于json对象属性有数字命名格式 导致调用报错 syntax error

    案例 今天在使用artTemplate做开发时,遇到一个比较奇葩的问题,就是使用json对象去获取值得时候,报如下错误: Template Error <temp> function an ...

  2. 3、MySQL 索引失效的场景

    索引失效的场景: 1.没有 where 条件 直接看 SQL 语句   2.where 条件中所在的列没有建立索引 show index from t;   3.从表中取得数据超过某个阈值.通常认为是 ...

  3. 9.3.1 map端连接- DistributedCache分布式缓存小数据集

    1.1.1         map端连接- DistributedCache分布式缓存小数据集 当一个数据集非常小时,可以将小数据集发送到每个节点,节点缓存到内存中,这个数据集称为边数据.用map函数 ...

  4. WARNING OGG-00706 Failed to add supplemental log group on table

    在配置OGG时,需要给同步的表添加补充日志,在ggsci命令行执行 add trandata user.table   SQL> desc jack.t1 Name Null? Type --- ...

  5. AD域SSP安全防护

    一.简介 SSP(Security Support Provider)是windows操作系统安全机制的提供者.简单的说,SSP就是DLL文件,主要用于windows操作系统的身份认证功能,例如NTL ...

  6. 常见Bash命令操作

    常见Bash命令操作 查看当前目录 pwd 查看目录下的文件 ls 进入某个目录 cd 返回上一级目录 cd .. 创建一个目录 mkdir abc 创建一个文件 touch a.html 保存文件退 ...

  7. 20200120--python学习第12天

    今日内容 函数中高级(闭包/高价函数) 内置函数 内置模块(.py文件) 内容回顾 函数基础概念 a.函数基本结构 def func(arg): return arg v1 = func(123) b ...

  8. k8s Pipline CI/CD

    一.Pipeline介绍 pipeline是一套jenkins官方提供的插件,它可以用来在jenkins中实现和集成连续交付 用户可以利用Pipeline的许多功能: 代码:pipeline在代码中实 ...

  9. Mysql 导入导出备份

    恢复MySQL服务器上面的txt格式文件(需要FILE权限,各数据值之间用"制表符"分隔)   1.导入数据库服务器上的txt文件 mysql>load data infil ...

  10. 前缀和&差分

    一:差分数组概念  一.差分数组的定义及用途 1.定义:对于已知有n个元素的数列d,建立记录它每项与前一项差值的差分数组f:显然,f[1]=d[1]-0=d[1];对于整数i∈[2,n],我们让f[i ...