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. Game of Credit Cards

    After the fourth season Sherlock and Moriary have realized the whole foolishness of the battle betwe ...

  2. vue 使用 jsonp 请求数据

    vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...

  3. 【转载】Java反射机制详解

    转自:http://baike.xsoftlab.net/view/209.html#3_8 1反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对 ...

  4. C++11 新特性学习

    在Linux下编译C++11 #include<typeinfo> int main() { auto a=; cout<<typeid(a).name()<<en ...

  5. gVim for windows 简单使用教程

    vim 是一个具有很多命令的功能非常强大的编辑器.限于篇幅,在本教程当中    就不详细介绍了.本教程的设计目标是讲述一些必要的基本命令,而掌握好这    些命令,您就能够很容易将vim当作一个通用的 ...

  6. Go_io操作

    I/O操作也叫输入输出操作.其中I是指Input,O是指Output,用于读或者写数据的,有些语言中也叫流操作,是指数据通信的通道. Golang 标准库对 IO 的抽象非常精巧,各个组件可以随意组合 ...

  7. ssm框架整合,配置文件中的配置内容

    转自:https://www.cnblogs.com/dong-dong-1/p/8724127.html 使用idea工具开发,用maven进行管理. 最近在写毕业设计,因为对ssm框架一直半解,常 ...

  8. 谷歌play上APK的下载

    https://apkcombo.com/tw-hk/ 在google搜索 APK DOWNLAOD就有专门下载谷歌PLAY的APK的

  9. nodejs的req取参req.body,req.params,req.query

    1/req.query: Get:/domo?name=ximiximi&blog=https://home.cnblogs.com/u/ximiximi-blog/ app.get('/do ...

  10. Python中，关于调用带参函数，一些需要注意的问题（监听时）

    1.如果监听调用的函数不带参数(start()) Button.clicked.connect(start)) def strat(): ... 2.如果监听调用的函数带参数(start(x,y)) ...