1.html头部引入mqtt.js
<script src="https://unpkg.com/mqtt/dist/mqtt.js"></script>
2.连接已打开的mqttServer,若无mqtt服务端,点击下载https://www.emqx.io/zh/downloads
<script>
// 连接选项
const options = {
clean: true, // true: 清除会话, false: 保留会话
connectTimeout: 4000, // 超时时间
// 认证信息
clientId: 'test', //客户端ID
username: 'admin', //连接用户名
password: 'public',//连接密码,默认为public,新版本登录后台界面会让你修改密码
// 心跳时间
keepalive: 60,
}
// 连接字符串, 通过协议指定使用的连接方式
const connectUrl = 'ws://127.0.0.1:8083/mqtt' //连接服务端地址,注意查看ws协议对应的端口号
const client = mqtt.connect(connectUrl, options)
client.on('connect', () => {
console.log('连接成功')
// 订阅多个主题
client.subscribe(
['tourist_enter', 'message_arrived'], //主题
{ qos: 1 },
(err) => {
console.log(err || '订阅成功')
},
);
// 发布消息
client.publish('tourist_enter', 'Hello EMQ X', (err) => {
console.log(err || '发布成功')
})
})
//失败重连
client.on('reconnect', (error) => {
console.log('正在重连:', error)
})
//连接失败
client.on('error', (error) => {
console.log('连接失败:', error)
})
//接收消息
client.on('message', (topic, message) => {
console.log('收到消息:', topic, message.toString())
})
</script>
想要查看或者修改不同协议对应的端口号需要到配置文件(~安装目录/etc/emqx.conf)中查看,部分协议如下:
//tcp协议 (连接地址为 tcp://127.0.0.1:1883)
listeners.tcp.default {
bind = “0.0.0.0:1883”
max_connections = 1024000
}
//ssl(连接地址为 ssl://127.0.0.1:8883)
listeners.ssl.default {
bind = “0.0.0.0:8883”
max_connections = 512000
ssl_options {
keyfile = “etc/certs/key.pem”
certfile = “etc/certs/cert.pem”
cacertfile = “etc/certs/cacert.pem”
}
}
//ws协议 (连接地址为 ws://127.0.0.1:8083/mqtt)
listeners.ws.default {
bind = “0.0.0.0:8083”
max_connections = 1024000
websocket.mqtt_path = “/mqtt”
}
//wss协议 (连接地址为 wss://127.0.0.1:8084/mqtt)
listeners.wss.default {
bind = “0.0.0.0:8084”
max_connections = 512000
websocket.mqtt_path = “/mqtt”
ssl_options {
keyfile = “etc/certs/key.pem”
certfile = “etc/certs/cert.pem”
cacertfile = “etc/certs/cacert.pem”
}
}