MQTT.js 入门使用教程

目录
  • 简介
  • 安装
    • 使用 npm 或 yarn 安装
    • 使用 CDN 安装
    • 全局安装
  • 使用
    • 简单例子
    • 命令行
    • API 介绍
    • mqtt.connect([url], options)
    • Client 事件
    • Client 方法
  • 总结

简介

MQTT.js 是一个开源的 MQTT 协议的客户端库,使用 JavaScript 编写,主要用于 Node.js 和 浏览器环境中。是目前 JavaScript 生态中使用最为广泛的 MQTT 客户端库

MQTT 是一种基于发布/订阅模式的轻量级物联网消息传输协议,可以用极少的代码和带宽为联网设备提供实时可靠的消息服务,它广泛应用于物联网、移动互联网、智能硬件、车联网、电力能源等行业。

由于 JavaScript 单线程特性,MQTT.js 是全异步 MQTT 客户端,MQTT.js 支持 MQTT/TCP、MQTT/TLS、MQTT/WebSocket,在不同运行环境支持的度如下:

  • 浏览器环境:MQTT over WebSocket(包括微信小程序、支付宝小程序等定制浏览器环境)
  • Node.js 环境:MQTT、MQTT over WebSocket

注意:不同环境里除了少部分连接参数不同,其他 API 均是相同的。且在 MQTT.js v3.0.0 及以上版本后,已经完整支持到 MQTT 5.0。

安装

使用 npm 或 yarn 安装

npm install mqtt --save

# 或使用 yarn

yarn add mqtt

注意:如果您的 Node 环境是 v12 或 v14 及以上版本,请使用 MQTT.js 4.0.0 及以上版本

使用 CDN 安装

浏览器环境中,我们还可以使用 CDN 的方式引入 MQTT.js。MQTT.js 的 bundle 包通过 http://unpkg.com 管理,我们可以直接添加 unpkg.com/mqtt/dist/mqtt.min.js 来进行使用。

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
  // 将在全局初始化一个 mqtt 变量
  console.log(mqtt)
</script>

全局安装

除了上述的安装方式外,MQTT.js 还提供了全局安装的方式,使用命令行工具来完成 MQTT 的连接、发布和订阅等。

npm install mqtt -g

我们会在下文中的一些使用教程中详细描述如何使用 MQTT.js 的命令行工具。

使用

本文将使用 EMQX Cloud 提供的 免费公共 MQTT 服务器 作为本次测试的 MQTT 服务器地址,服务器接入信息如下:

  • Broker: broker.emqx.io
  • TCP Port: 1883
  • SSL/TLS Port: 8883

更多详情请访问 EMQX Cloud 官网,或查看 EMQX Cloud 文档

简单例子

我们简单编写一段代码实现连接到 EMQX Cloud 并完成订阅主题、收发消息的简单例子。因为在浏览器环境中仅支持使用 WebSocket 连接,所以我们将使用在浏览器环境和 Node.js 环境两种不同的连接参数来完成连接。不过除连接地址外,其它参数均是相同的,因此读者可根据自己的实际情况选择使用。

const mqtt = require('mqtt')

/***
 * 浏览器环境
 * 使用协议为 ws 和 wss 的 MQTT over WebSocket 连接
 * EMQX 的 ws 连接默认端口为 8083,wss 为 8084
 * 注意需要在连接地址后加上一个 path, 例如 /mqtt
 */
const url = 'ws://broker.emqx.io:8083/mqtt'
/***
 * Node.js 环境
 * 使用协议为 mqtt 和 mqtts 的 MQTT over TCP 连接
 * EMQX 的 mqtt 连接默认端口为 1883,mqtts 为 8084
 */
// const url = 'mqtt://broker.emqx.io:1883'

// 创建客户端实例
const options = {
  // Clean session
  clean: true,
  connectTimeout: 4000,
  // 认证信息
  clientId: 'emqx_test',
  username: 'emqx_test',
  password: 'emqx_test',
}
const client = mqtt.connect(url, options)
client.on('connect', function () {
  console.log('Connected')
  // 订阅主题
  client.subscribe('test', function (err) {
    if (!err) {
      // 发布消息
      client.publish('test', 'Hello mqtt')
    }
  })
})

// 接收消息
client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

命令行

在全局安装完 MQTT.js 后,我们同样可以使用命令行工具来完成主题订阅消息发布接收的动作。

示例连接到 broker.emqx.io 并订阅 testtopic/# 主题:

mqtt sub -t 'testtopic/#' -h 'broker.emqx.io' -v

示例连接到 broker.emqx.io 并向 testtopic/hello 主题发送消息

mqtt pub -t 'testtopic/hello' -h 'broker.emqx.io' -m 'from MQTT.js'

如需使用功能更加全面的 MQTT 命令行工具,可参考使用 MQTT X CLI

API 介绍

mqtt.connect([url], options)

连接到指定的 MQTT Broker 的函数,并始终返回一个 Client 对象。第一个参数传入一个 URL 值,URL 可以是以下协议:mqttmqttstcptlswswss。URL 也可以是一个由 URL.parse() 返回的对象。然后再传入一个 Options 对象,用于配置 MQTT 连接时的选项。当使用 WebSocket 连接时需要注意地址后是否需要加上一个 path,例如 /mqtt

下面列举一些常用的 Options 对象中的属性值:

  • Options

    • keepalive: 单位为,数值类型,默认为 60 秒,设置为 0 时禁止
    • clientId: 默认为 'mqttjs_' + Math.random().toString(16).substr(2, 8),可以支持自定义修改的字符串
    • protocolVersion: MQTT 协议版本号,默认为 4(v3.1.1)可以修改为 3(v3.1)和 5(v5.0)
    • clean: 默认为 true,是否清除会话。当设置为 true 时,断开连接后将清除会话,订阅过的 Topics 也将失效。当设置为 false 时,离线状态下也能收到 QoS 为 1 和 2 的消息
    • reconnectPeriod: 重连间隔时间,单位为毫秒,默认为 1000 毫秒,注意:当设置为 0 以后将取消自动重连
    • connectTimeout: 连接超时时长,收到 CONNACK 前的等待时间,单位为毫秒,默认 30000 毫秒
    • username: 认证用户名,如果 Broker 要求用户名认证的话,请设置该值
    • password: 认证密码,如果 Broker 要求密码认证的话,请设置该值
    • will: 遗嘱消息,一个可配置的对象值,当客户端非正常断开连接时,Broker 就会向遗嘱 Topic 里面发布一条消息,格式为:
      • topic: 遗嘱发送的 Topic
      • payload: 遗嘱发布的消息
      • QoS: 遗嘱发送的 QoS 值
      • retain: 遗嘱发布的消息的 retain 标志
    • propertiesMQTT 5.0 新增,可配置的对象的属性值,详情请参考:https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
  • 如果需要配置 SSL/TLS 连接,Option 对象会被传递给 tls.connect() ,因此可以在 option 中配置以下属性
    • rejectUnauthorized: 是否验证服务端证书链和地址名称,设置为 false 时将跳过验证,会暴露在中间人的攻击之下,所以不建议在生产环境中使用这种配置,当设置为 true 时,将开启强认证模式,且如果是自签名证书,请在证书配置时设置 Alt name。
    • ca: 只有在服务器使用自签名证书时才有必要,自签名证书中生成的 CA 文件
    • cert: 只有当服务器需要客户证书认证时才有必要(双向认证),客户端证书
    • key: 只有当服务器需要客户证书认证时才有必要(双向认证),客户端密钥

Client 事件

当连接成功后,返回的 Client 对象可通过 on 方法监听多个事件,业务逻辑可在监听的回调函数中完成。以下列举一些常用的事件:

connect

当连接成功时触发,参数为 connack

client.on('connect', function (connack) {
  console.log('Connected')
})

reconnect

当断开连接后,经过重连间隔时间重新自动连接到 Broker 时触发

client.on('reconnect', function () {
  console.log('Reconnecting...')
})

close

在断开连接以后触发

client.on('close', function () {
  console.log('Disconnected')
})

disconnect

在收到 Broker 发送过来的断开连接的报文时触发,参数 packet 即为断开连接时接收到的报文,MQTT 5.0 中的功能

client.on('disconnect', function (packet) {
  console.log(packet)
})

offline

当客户端下线时触发

client.on('offline', function () {
  console.log('offline')
})

error

当客户端无法成功连接时或发生解析错误时触发,参数 error 为错误信息

client.on('error', function (error) {
  console.log(error)
})

message

当客户端收到一个发布过来的 Payload 时触发,其中包含三个参数,topic、payload 和 packet,其中 topic 为接收到的消息的 topic,payload 为接收到的消息内容,packet 为 MQTT 报文信息,其中包含 QoS、retain 等信息

client.on('message', function (topic, payload, packet) {
  // Payload is Buffer
  console.log(`Topic: ${topic}, Message: ${payload.toString()}, QoS: ${packet.qos}`)
})

Client 方法

Client 除监听事件外,也内置一些方法,用来进行发布订阅的操作等,以下列举一些常用的方法。

Client.publish(topic, message, [options], [callback])

向某一 topic 发布消息的函数方法,其中包含四个参数:

// 向 testtopic 主题发送一条 QoS 为 0 的测试消息
client.publish('testtopic', 'Hello, MQTT!', { qos: 0, retain: false }, function (error) {
  if (error) {
    console.log(error)
  } else {
    console.log('Published')
  }
})
  • topic: 要发送的主题,为字符串
  • message: 要发送的主题的下的消息,可以是字符串或者是 Buffer
  • options: 可选值,发布消息时的配置信息,主要是设置发布消息时的 QoS、Retain 值等。
  • callback: 发布消息后的回调函数,参数为 error,当发布失败时,该参数才存在

Client.subscribe(topic/topic array/topic object, [options], [callback])

订阅一个或者多个 topic 的方法,当连接成功需要订阅主题来获取消息,该方法包含三个参数:

// 订阅一个名为 testtopic QoS 为 0 的 Topic
client.subscribe('testtopic', { qos: 0 }, function (error, granted) {
  if (error) {
    console.log(error)
  } else {
    console.log(`${granted[0].topic} was subscribed`)
  }
})
  • topic: 可传入一个字符串,或者一个字符串数组,也可以是一个 topic 对象,{'test1': {qos: 0}, 'test2': {qos: 1}}
  • options: 可选值,订阅 Topic 时的配置信息,主要是填写订阅的 Topic 的 QoS 等级的
  • callback: 订阅 Topic 后的回调函数,参数为 error 和 granted,当订阅失败时 error 参数才存在, granted 是一个 {topic, qos} 的数组,其中 topic 是一个被订阅的主题,qos 是 Topic 是被授予的 QoS 等级

Client.unsubscribe(topic/topic array, [options], [callback])

取消订阅单个主题或多个主题,该方法包含三个参数:

// 取消订阅名为 testtopic 的 Topic
client.unsubscribe('testtopic', function (error) {
  if (error) {
    console.log(error)
  } else {
    console.log('Unsubscribed')
  }
})
  • topic: 可传入一个字符串或一个字符串数组
  • options: 可选值,取消订阅时的配置信息
  • callback: 取消订阅时的回调函数,参数为 error,当取消订阅失败时 error 参数才存在

Client.end([force], [options], [callback])

关闭客户端,该方法包含三个参数:

client.end()
  • force: 设置为 true 时将立即关闭客户端,而无需等待断开连接的消息被接受。这个参数是可选的,默认为 false。注意:使用该值为 true 时,Broker 无法接收到 disconnect 的报文
  • options: 可选值,关闭客户端时的配置信息,主要是可以配置 reasonCode,断开连接时的 Reason Code
  • callback: 当客户端关闭时的回调函数

总结

至此就简单的介绍了 MQTT.js 一些常用的 API 的使用方法等,具体在实际项目中的使用请参考以下链接:

如何在 Vue 项目中使用 MQTT

如何在 React 项目中使用 MQTT

如何在 Electron 项目中使用 MQTT

如何在 Node.js 项目中使用 MQTT

使用 WebSocket 连接 MQTT 服务器

到此这篇关于MQTT.js 入门教程的文章就介绍到这了,更多相关MQTT.js 入门内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用java 实现mqtt两种常用方式

    目录 前言 Paho Java 库实现 spring boot集成mqtt 核心代码 总结 前言 在开发MQTT时有两种方式一种是使用Paho Java 原生库来完成,一种是使用spring boot 来完成. Paho Java 库实现 Eclipse Paho Java Client (opens new window)是用 Java 编写的 MQTT 客户端库(MQTT Java Client),可用于 JVM 或其他 Java 兼容平台(例如Android).Eclipse Paho J

  • 在Node.js下运用MQTT协议实现即时通讯及离线推送的方法

    前言 前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,但网上并不能很方便地找到一篇目前版本的在node下正确实现这个协议的博客. 自己捣鼓了一段时间,理解不深刻,但也算是基本能够达到使用目的. 本文尚未对离线消息的接收顺序进行处理. 代码 服务端: server.js //服务端引入中间件mosca let mosca = require('mosca') let settings = { port: 5112 } let server = new mosca.Server

  • 解决spring-integration-mqtt频繁报Lost connection错误问题

    目录 问题描述 解决过程 总结 问题描述 在之前的博客介绍了如何在 Spring Boot 集成 MQTT,后面使用中没有发现问题,最近发现一直报错: Lost connection: Connection lost; retrying...Lost connection: 已断开连接; retrying... 解决过程 网上说是因为 client ID 重复,最开始是不相信的,因为我测试只启动了一个客户端.但是却怎么都定位不到异常原因,用重新回到 client ID 重复的这个思路上来: 因为

  • vue3+vite2+mqtt连接遇到的坑及解决

    目录 vue3+vite2+mqtt连接遇到的坑 vue3调用mqtt问题 总结 vue3+vite2+mqtt连接遇到的坑 从vue2版本整合到vue3版本遇到的坑,其实也是自己不够熟悉,哈哈 之前用vue2连接mqtt时是这样的方式 : 1.yarn add mqtt 或 npm install mqtt 2.import mqtt from 'mqtt' 安装完后直接在页面引用,就可以用了 所以在vue2项目里是比较简单的^_^ 但是,但可是,可但是 移到vue3就遇到各种报错了,Refe

  • vue3使用mqtt的示例代码

    目录 vue3使用mqtt 下面再看下vue3调用mqtt vue3使用mqtt 封装类 //封装一个类(可直接cv) class createds { //创建公共变量 static url; //mqtt地址 static oldSubscribe; //取消订阅准备 static subscribe; //订阅地址 static client; //mqtt公共变量 //接受床底来的数据 constructor(subscribe) { console.log(subscribe, "订阅

  • VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)

    目录 场景: 一.安装mqtt 二.暴露出main.js中的vue实例 三.封装mqtt 四.编写mqtt配置文件 五.页面引入并使用 总结 场景: 在做的一个项目中多个页面都需要使用到mqtt接收消息,但这样的话每个页面就都需要连接一次mqtt,并且要再次配置options信息.订阅主题.接收消息,非常的不方便,因此琢磨将mqtt封装到vuex中,使其可以多页面通用,这样只需要连接订阅一次,接收到的消息可以存储在vuex中. mqtt在线测试工具:http://www.emqx.io/onli

  • Android MQTT与WebSocket协议详细讲解

    目录 MQTT WebSocket 总结 MQTT MQTT是一个极其轻量级的发布/订阅消息传输协议,对于需要较小代码占用空间或网络带宽非常宝贵的远程连接非常有用 有如下特点: 开放消息协议,简单易实现: 发布订阅模式,一对多消息发布: 基于TCP/IP网络连接,提供有序,无损,双向连接: 1字节固定报头,2字节心跳报文,最小化传输开销和协议交换,有效减少网络流量: 消息QoS支持,可靠传输保证. 添加依赖 maven { url "https://repo.eclipse.org/conten

  • Next.js入门使用教程

    目录 简介 创建Next.js项目 手动创建Next.js项目 creact-next-app快速创建项目 Pages 路由 Link Router 参数传递与接收 动态路由 钩子事件 获取数据 getStaticProps 构建时请求数据 getServerSideProps 每次访问时请求数据 CSS支持 添加全局样式表 添加组件级CSS 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架. 官网链接:www.nextjs.cn/ 优点: 零配置 自动编译并打包.从一开始就

  • React.js入门实例教程之创建hello world 的5种方式

    一.ReactJS简介 React 是近期非常热门的一个前端开发框架.React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http:

  • Vue.js快速入门实例教程

    什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

  • 详解plotly.js 绘图库入门使用教程

    本文介绍了plotly.js 绘图库入门使用教程,分享给大家,具体如下: Plotly 缘起 这两天想在前端展现数学函数图像,猜测应该有成熟的 js 库. 于是,简单的进行了尝试. 最后决定使用plotly.js,其他的比如function-plot 看起来也不错,以后有时间再看. Plotly plotly.jsis the open source JavaScript graphing library that powers Plotly. Plotly 可以称之为迄今最优秀的绘图库,没有之

  • p5.js入门教程之小球动画示例代码

    一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse

  • p5.js入门教程和基本形状绘制

    一.什么是p5.js 最近接触了一门数字媒体艺术类的课程,名为Interactivity,教的是p5.js. 主讲老师就是开发者之一--还是挺激动的. p5.js是一个为艺术家.设计师而开发的Javascript库,可以看作是Processing的Web版本.如果有Processing学习经验的话,p5.js上手会非常快. 至于p5.js有什么用,这个问题很难回答,因为我本身也是个初学者. 我目前觉得p5.js是一个很好的激发创意的工具,并且你可以将p5.js的内容嵌入网页,让你的网站更炫. 二

  • p5.js入门教程之键盘交互

    一.键盘交互相关关键词与函数 keyIsPressed: 关键词,按下按键时为true,反之为false keyCode: 关键词,用于判断按下哪个按键 keyPressed():函数,按键按下时触发一次 keyReleased():函数,按键松开时触发一次 keyIsDown():函数,按下指定按键时返回true,反之为false 以下是一个较综合的案例,用wsad与zxcv控制小球移动: var x=200; var y=200; var speed=2; function setup()

  • p5.js入门教程之平滑过渡(Easing)

    一.跟随鼠标移动的小球 使用mouseX,mouseY可以创建一个跟随鼠标移动的小球. function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(mouseX,mouseY,20,20); } 二.让小球更加平滑的移动--使用Easing 一般制作精良的UI界面都会用到平滑移动这一效果,也就是利用了名为"Easing"的方法. 实现思路是另外设置变量以进行位置的过渡,代

  • p5.js入门教程之图片加载

    一.preload()函数与图片上传 preload()函数是一个特殊的函数,它同setup()类似,只在程序开始时运行一次,但顺序在setup()之前. 一般我们会将媒体文件(图片.声音)加载的语句放在preload()中,因为preload()有一个特性就是不加载完毕,程序就不会开始,保证了程序运行时不会出错. 在加载图片之前,我们需要先将图片文件上传. 方法是: ①点击编辑器左上角的小三角展开文件目录. ②点击文件目录右上角小三角,展开菜单后Add File. ③可以直接将图片文件拖到框里

  • p5.js入门教程之鼠标交互的示例

    本文介绍了p5.js入门教程之鼠标交互的示例,分享给大家,具体如下: 一.鼠标交互常用关键词 p5.js提供了许多鼠标操作用的关键词与函数,常用的有: mouseIsPressed:关键词,若鼠标按下则为true,反之为false mouseButton:关键词,用来判断鼠标按下的是哪个键 案例如下: function setup() { createCanvas(400, 400); } function draw() { background(220); if (mouseIsPressed

随机推荐