本文只介绍如何进行消息的发布，接收，至于emqx服务器需要靠 小伙伴们自己
本文章emq服务器为企业版试用，但消息的接收发布与emqx broker是一样的
Paho.mqtt.js
Paho 是 Eclipse 的一个 MQTT 客户端项目，Paho JavaScript Client 是其基于浏览器 JavaScript 运行环境的库，它使用 WebSockets 连接到 MQTT 服务器。相较于 MQTT.js 来说，其功能较少，不推荐使用。
MQTT.js 可用于 Node.js 环境和浏览器环境。在 Node.js 上可以通过全局安装使用命令行连接，同时还支持 MQTT ，MQTT TLS 证书连接；值得一提的是 MQTT.js 对微信小程序有较好的支持。
实现一个简单的客户端
mqtt.js 在浏览器环境下支持 WebSocket MQTT 连接，Node.js 环境下支持 TCP(SSL/TLS) MQTT 连接，请根据您的使用场景选择对应的连接方式：
-
使用 connect() 函数连接并返回一个 client 实例
-
client 有多个事件，在 client 事件中使用回调函数处理相关逻辑：
- connect：连接成功事件
- reconnect：连接错误、异常断开后重连的事件 error：连接错误、终止连接事件
- message：收到订阅消息事件
-
client有多个基本函数
- 使用 subscribe() 函数订阅主题
- 使用 publish() 函数发布消息
- 使用 end() 函数连断开和 broker 的连接
这里我们只对 MQTT.js 客户端做简单的介绍，关于该客户端的更详尽的说明请参阅 MQTT.js 文档
好了 直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- <script src="js/mqtt.min.js"></script> -->
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> <!-- emqx官方提供的js-->
<body>
<script>
// WebSocket 连接字符串
const WebSocket_URL = 'ws://localhost:8083/mqtt'
// TCP/TLS 连接字符串，仅限 Node.js 环境
const TCP_URL = 'mqtt://localhost:1883'
const TCP_TLS_URL = 'mqtts://localhost:8883'
// 连接选项
const options = {
// 超时时间
connectTimeout: 4000,
// 认证信息
clientId: 'emqx', //可自己定义，最好不要重复
username: 'admin', //emq 用户名（我这里用的默认的）
password: 'public', //密码
// 心跳时间
keepalive: 60,
clean: true,
}
const client = mqtt.connect(WebSocket_URL, options)
// 连接成功后初始化订阅
client.on('connect', () => {
console.log('Connected to', WebSocket_URL)
// 订阅主题
client.subscribe('hello', (err) => {
console.log(err || '订阅成功')
})
// 发布消息
/* client.publish('hello', 'Hello EMQ X', (err) => {
console.log(err || '发布成功')
}) */ 这里需要自己测试哦
})
// 为 message 时间添加处理函数
client.on('message', (topic, message) => {
console.log('收到来自', topic, '的消息:', message.toString());
alert('收到来自' +topic+'的消息:'+ message);
// 断开连接
//client.end() ；//只能接收一次消息，因为关闭了连接
//client.end() ；//若要一直接收消息，则不能关闭连接,本案例这里没有关闭
})
</script>
</body>
</html>
运行该html后，在emqx管理界面可以看到订阅信息
连接信息
在管理界面自带的工具消息，看看web界面能收到消息不，输入用户名，密码，点击连接
发布消息 这里的topic 必须和web端订阅的topic保持一致，否则web端会收不到消息，Payload 就是我们发送的消息内容，点击发布按钮，消息就发送了
然后看web界面 已经收到消息了，就完成啦
