<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>mqttws31.min.js 测试</title>

    <style>

        .divblock {

            display: inline-block;

            padding: 20px;

            border: 2px solid #00ff00;

            border-radius: 6px;

            margin: 20px 0px;

            user-select: none;

        }

        .divblock:active {

            background-color: #455072;

            border: 1px solid #0044ff;

        }

    </style>

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

        type="text/javascript"></script>

</head>

<body>

    <div>4路开关模块</div>

    <div class="divblock" onclick="Onmqtttest()">mqtt 发送</div>

</body>

<script>

    var client = null;

    // Create a client instance

    client = new Paho.MQTT.Client('gzlema.cn', Number(8083), (Math.random() * 1000000000).toString()); // "clientId" 随机数来代替

    // set callback handlers

    client.onConnectionLost = onConnectionLost; // 指定丢失事件

    client.onMessageArrived = onMessageArrived; // 

    // connect the client 指定mqtt 事件 onSuccess 回调函数

    client.connect({ onSuccess: onConnect });

    // called when the client connects 成功连接mqtt服务器之后的事件函数

    function onConnect() {

        // Once a connection has been made, make a subscription and send a message.

        console.log("onConnect");

        client.subscribe("hotekey_cloud"); // 订阅主题

    }

    // called when the client loses its connection mqtt 丢失或连接不存在而触发的事件函数

    function onConnectionLost(responseObject) {

        if (responseObject.errorCode !== 0) {

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

        }

    }

    // called when a message arrives 接收到订阅消息

    function onMessageArrived(message) {

        console.log("onMessageArrived:" + message.payloadString);

    }

    // 推送消息函数

    function mqttPublish(sendata) {

        message = new Paho.MQTT.Message(sendata); // 消息内容

        message.destinationName = "hotekey_board"; // 目标主题

        client.send(message); // 推送主题

    }

    // 用户程序点击事件

    function Onmqtttest() {

        message = "message from browser with websocket"; // 消息内容

        mqttPublish(message);

    }

</script>

</html>

官网手册    https://www.eclipse.org/paho/clients/js/#

MQTT 浏览器 mqttws31.min.js的更多相关文章

  1. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  2. jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧

    描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了!  图片展示:   兼容浏览器:IE6+/Firefox/Goog ...

  3. Mvc 之System.Web.Optimization 压缩合并如何让*.min.js 脚本不再压缩

    最近项目中用到了easy ui ,但是在配置BundleConfig 的时候出现了问题,easy ui的脚本jquery.easyui.min.js 压缩后出现各种脚本错误,总是莫名其妙的 i标量错误 ...

  4. html5shiv.js and respond.min.js

    因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...

  5. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  6. Java - 字符串和Unicode互转 - 解析小米pm.min.js

    小米JS地址: http://p.www.xiaomi.com/zt/20130313/huodong/pm.min.js 上面这个JS是小米抢手机页面的代码.和抢手机有直接关联.. 虽然我3次都没抢 ...

  7. html5shiv.min.js 和 respond.min.js 作用（bootstrap做IE低版本兼容时需要用到这两个插件）

    1. html5shiv.min.js解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min.js让不支持css3 Media Query的浏览器包括I ...

  8. 为网页生成二维码(jquery.qrcode.min.js)

    做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...

  9. html5shiv.js和respond.min.js

    做页面常用的东西,写这里用的时候省点去找了... html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持css3 Medi ...

随机推荐

  1. try catch 语句中有return 的各类情况

    在牛客上做java题时遇到过多到关于try catch语句的问题,看了很多答案解析,在这里记录一下. 首先给出一道题目: 下面代码的运行结果为? A.catch语句块 和是43 B.编译异常 C.fi ...

  2. Vue实例 动态组件实现选项卡

    动态组件 选项卡 有n种实现方法 哈哈哈哈 <style> #app{ width: 260px; height: 200px; background: #fff; box-shadow: ...

  3. （matlab)自定义图像（matlab)

    clc;clear all;A=[0 230 255 60 30 100];A=uint8(A);imshow(A,'InitialMagnification','fit') 如图: clc;clea ...

  4. 【HTTP与HTTPS的区别】

    目录 一.HTTP和HTTPS的基本概念 二.HTTP与HTTPS有何区别 三.HTTP与HTTPS的工作原理 四.HTTPS的优缺点 五.HTTP切换至HTTPS "超文本传输协议,即HT ...

  5. 为什么安装了淘宝镜像，永用cnpm安装依赖包会报错，而用npm就不会？报错：cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1。。。。

    cnpm - 解决 " cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本.有关详细信息 ... ...

  6. 论STA | 工艺、工具、分析的本与末

    人类从漫长的蒙昧中觉醒之后,不再依靠着奇装异服的巫师通灵来指导生活,巫师进化成了科学家,他们试图对周遭的一切进行概括.分类.抽象,于是有了化学.物理.数学等基科.比如一粒沙,它的化学组成是什么,物理特 ...

  7. SniperOj-compare_flag-Writeup

    SniperOj-compare_flag-Writeup 题干如上,只给了一个nc命令,那么连接到服务器如下 有如下的python代码 #!/usr/bin/env python from time ...

  8. 题解 SP19148【INS14G - Kill them All】

    SP19148[INS14G - Kill them All] 前置知识:组合数 乘法逆元 感觉其他博客讲的不是很清楚,也没有说组合数公式是怎么来的,我这样数论极菜的萌新看了好久才想明白qwq.. 还 ...

  9. 使用php-vmstat遇到的麻烦

    workerman-vmstat是一个基于workerman的扩展,用于监听服务器应用对内存.cpu消耗的友好的查看功能,具体介绍可以去git上看:    https://github.com/wal ...

  10. CentOS7.6配置ip

    查看CentOS版本信息 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) 配置ip [root@loca ...