html文件里直接调用

<!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>mqtt.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://unpkg.com/mqtt/dist/mqtt.min.js"></script> <!-- 引处MQTT.MINI.JS库文件 -->

</head>

<body>

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

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

</body>

<script>

    // Create a client instance

    var options = {

        //mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档

        clientId: 'mqttjs_' + (Math.random() * 1000000).toString()

    }

    //console.log(options.clientId);

    //浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt

    var client = mqtt.connect("ws://gzlema.cn:8083/mqtt", options) // you add a ws:// url here

    //建立连接

    client.on('connect', function () {

        console.log("connect success!")

        //订阅主题 presence

        client.subscribe('presence', function (err) {

            if (!err) {

                console.log("subscribe success!")

            } else {

                //打印错误

                console.log(err)

            }

        })

    })

    //如果连接错误，打印错误

    client.on('error', function (err) {

        console.log(err)

        client.end()

    })

    //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑

    client.on('message', function (topic, message) {

        // message is Buffer,此处就是打印消息的具体内容

        console.log('-> ' + message.toString())

    })

    // 用户程序点击事件

    function Onmqtttest() {

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

        //发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收

        client.publish('presence', 'Hello mqtt ' + message)

    }

</script>

</html>

mqtt.mini.js 使用的更多相关文章

  1. MQTT.js browser node 均支持

    npm - mqtt 官网手册 https://www.npmjs.com/package/mqtt#weapp 简书用户 使用笔记 https://www.jianshu.com/p/4fd95ca ...

  2. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  3. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  4. 移动端js调取手机相册和拍照功能

    前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> & ...

  5. bootStrap table 和 JS 开发过程中遇到问题汇总

    1..bootStrap-table表头固定 在table定义的时候给高度属性就可以自动生成滚动条,并且固定表头[height: 220,] 2.为动态生成的DOM元素绑定事件 on("cl ...

  6. 使用 WebSocket 客户端连接 MQTT 服务器

    简介 近年来随着 Web 前端的快速发展,浏览器新特性层出不穷,越来越多的应用可以在浏览器端或通过浏览器渲染引擎实现,Web 应用的即时通信方式 WebSocket 得到了广泛的应用. WebSock ...

  7. 图片上传前 压缩，base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  8. js压缩图片并上传，不失真，保证图片清晰度

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  9. html5+js压缩图片上传

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

随机推荐

  1. 题解【洛谷P2863】 [USACO06JAN]牛的舞会The Cow Prom

    题面 题解 \(Tarjan\)板子题. 统计出大小大于\(1\)的强连通分量数量输出即可. 代码 #include <iostream> #include <cstdio> ...

  2. angular 读写电脑本地文件

    angular 读写本地电脑文件 angular将数据写进到电脑文件 在前端写一个按钮,然后点击按钮的时候在本地电脑保存一个text文件. 这时候我们需要用到一个angular的插件,叫做" ...

  3. JavaScript中的 typeof，null，和undefined

    typeof操作符 null 在JavaScript中null表示“什么都没有”. null是一个只有一个值的特殊类型.表示一个空对象引用. typeof null; 返回的是object 可以将nu ...

  4. 每天进步一点点------Allegro 原理图到PCB网表导入

  5. 2019年9月2日，亲自最新JDK12.0.2和JRE1.8.0的下载和配置（64bit），被其他教程坑了几圈忍不住自己写一篇

    前因/ 新买了电脑,想在家写前端页面,看到最新版的JDK12.0.2和JRE1.8.0,就想着要用就用最新的,才对得起我的I9电脑.本人也是半生不熟,公司用的都是前辈配置好的环境,并且是JDK8很老了 ...

  6. Java+Selenium自动化测试学习（一）

    自动化测试基本流程 1.设置chromedriver的地址System.setProperty(); 2.创建一个默认浏览器ChromeDriver driver = new ChromeDriver ...

  7. 关于DLL搜索路径的顺序问题

    DLL的动态链接有两种方法.一种是加载时动态链接(Load_time dynamic linking).Windows搜索要装入的DLL时,按以下顺序:应用程序所在目录→当前目录→Windows SY ...

  8. DataGridView 更改Header样式

    '必须先设置 EnableHeadersVisualStyles 属性 才能设置Header颜色dgv.EnableHeadersVisualStyles = Falsedgv.ColumnHeade ...

  9. MySQL执行外部sql脚本文件的命令

    sql脚本是包含一到多个sql命令的sql语句,我们可以将这些sql脚本放在一个文本文件中(我们称之为“sql脚本文件”),然后通过相关的命令执行这个sql脚本文件.基本步骤如下:1.创建包含sql命 ...

  10. Linux centos7 shell 介绍、 命令历史、命令补全和别名、通配符、输入输出重定向

    一.shell介绍 shell脚本是日常Linux系统管理工作中必不可少的,不会shell,就不是一个合格管理员. shell是系统跟计算机硬件交互使用的中间介质,一个系统工具.实际上在shell和计 ...