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. new和delete的深层次剖析(C++)

    c++ 是公司开发最常用的语言之一, 那new和delete 这两个函数是所有开发者即爱又恨的函数.由new 和delete引发的bug , coredump , 让多少程序员加了多少班. 1. 遇到 ...

  2. python文件读取：遇见的错误及解决办法

    问题一: TypeError: 'str' object is not callable 产生原因: 该错误TypeError: 'str' object is not callable字面上意思:就 ...

  3. poj 2195 Going Home（最小费用流）

    题目链接:http://poj.org/problem?id=2195 题目大意是给一张网格,网格中m代表人,h代表房子,网格中的房子和人数量相等,人可以向上向下走,每走1步花费加1,每个房子只能住一 ...

  4. MongoDB高可用集群配置方案

    原文链接:https://www.jianshu.com/p/e7e70ca7c7e5 高可用性即HA(High Availability)指的是通过尽量缩短因日常维护操作(计划)和突发的系统崩溃(非 ...

  5. 初识hadoop --- (分布式文件系统 + 分块计算)

    [转载] + 整理 2016-11-18 使用范围: Hadoop典型应用有:搜索.日志处理.推荐系统.数据分析.视频图像分析.数据保存等. Hadoop历史 雏形开始于2002年的Apache的Nu ...

  6. IntelliJ IDEA 2017.3尚硅谷-----修改类头的文档注释信息

    /** @author shkstart @create ${YEAR}-${MONTH}-${DAY} ${TIME} */ ${PACKAGE_NAME} - the name of the ta ...

  7. python开发基础02-字符串操作方法练习题

    1.执行 Python 脚本的两种方式 python解释器 py文件  #!/usr/bin/env python 进入python解释器,便捷命令并执行 pycharm或其他pythonIDE sh ...

  8. Blocked Billboard II

    前言 今天比赛真的状态不好(腐了一小会),导致差点爆0. 这个题解真的是在非常非常专注下写出来的,要不然真的心态崩. 刚换了域名,发现了美化脚本的bug,有点担心(汗-_-||). 题目 题目描述 奶 ...

  9. buuctf

    大白 | png图片改高度png图片改高度[外链图片转存失败(img-PojN2D3v-1567086301372)(evernotecid://74A3E6DA-E009-4797-AA60-5DE ...

  10. Python - Git for windows 下使用 交互式命令行

    1. 概述 尝试在 windows 环境的 git 命令行使用 python3 的交互模式 2. 环境 OS win10 1905 git 2.20.1 mintty 2.9.4 python 3.7 ...