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. 事务：Transaction详解

    1.事务概念: 一组sql语句操作单元,组内所有SQL语句完成一个业务,如果整组成功:意味着全部SQL都实现:如果其中任何一个失败,意味着整个操作都失败.失败,意味着整个过程都是没有意义的.应该是数据 ...

  2. 【转载】SpringMVC框架介绍

    转自:http://com-xpp.iteye.com/blog/1604183 SpringMVC框架图   SpringMVC接口解释   DispatcherServlet接口: Spring提 ...

  3. 上传图片时使用crop进行裁剪

    上传图片时,往往需要对图片进行裁剪. 实现方法为: 1.引入crop.css body{background:#}.upload-container{position:absolute;left:%; ...

  4. ubuntu16.04无法打开终端

    最近将自带的python3.5更改为默认的python3.6,所以就出现了终端打不开的情况,以下是我的解决办法: 首先,按ctrl+alt+F1进入命令行模式,也就是无图形截面,这时候会让你输入用户名 ...

  5. SCROLLINFO结构详解

    在刚开始使用SCROLLINFO结构时感觉很不顺手,尤其其中的成员fMask理解不太深刻,经过查询资料才理解一二. 在使用滚动条功能时,如果要设置它的范围和位置可以用以前的函数,例如:SetScrol ...

  6. Jmeter学习之-聚合报告详解

    在对接口进行性能测试时,经常用到jmeter的聚合报告来分析数据 首先在待测试的接口或线程组下添加“监听器>聚合报告” 执行请求后,将生成聚合报告,聚合报告包括以下结果参数(中文版+英文版) A ...

  7. 其他 - 02. poolmon 安装

    1. 概述 遇到 win10 的内存泄露 32G 内存都能给吃光 2. 思路 rammap 对整体内存做一个诊断 主要是内存分配 用途 状态 poolmon 确认内存的用途 比 rammap 更精确 ...

  8. 老大难的 Java ClassLoader，到了该彻底理解它的时候了

    ClassLoader 是 Java 届最为神秘的技术之一,无数人被它伤透了脑筋,摸不清门道究竟在哪里.网上的文章也是一篇又一篇,经过本人的亲自鉴定,绝大部分内容都是在误导别人.本文我带读者彻底吃透 ...

  9. Python面向对象基础语法

    目标 dir 内置函数 定义简单的类(只包含方法) 方法中的 self 参数 初始化方法 内置方法和属性 01. dir 内置函数(知道) 在 Python 中 对象几乎是无所不在的,我们之前学习的  ...

  10. VMware下Linux虚拟机访问本地Win共享文件夹

    VMware下Linux虚拟机访问本地Win共享文件夹 : 访问共享文件夹的步骤如下: 1.先在本地Win创建一个需要共享到虚拟机中的共享目录,如  F:\share. 2.打开你的VMware,选择 ...