html+vue3使用MQTT.js 进行mqtt通信
摘要： 本文展示了如何使用MQTT协议实现Web端消息订阅与发布功能。代码示例包含HTML页面结构和JavaScript实现，通过MQTT.js库连接到EMQX公共代理服务器（broker.emqx.io:8083），配置连接参数如客户端ID、认证信息、QoS等级等。核心功能包括：1) 加载MQTT配置；2) 建立WebSocket连接；3) 订阅指定主题；4) 发布测试消息。实现过程中使用了Vu
·
废话不多说，直接上代码
MQTT.js文件获取方式在最下面
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>mqtt</title>
<meta name="renderer" content="webkit">
<meta name="author" content="jug.t" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" media="screen" />
<link rel="stylesheet" type="text/css" href="/static/element/element-plus/theme-chalk/index.css">
<script src="/static/vue/3/vue.js"></script>
<script src="/static/element/element-plus/dist/index.full.min.js"></script>
<script src="/static/element/element-plus/dist/locale/zh-cn.js"></script>
<script src="/static/axios/dist/axios.min.js"></script>
<script src="/static/axios/axios.http.js?t=1763002653"></script>
<script src="/static/common/js/mqtt.min.js"></script>
<!--<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"> </script>-->
</head>
<body>
<div id="app" v-cloak>
<div v-html="message"></div>
</div>
<script >
const { createApp, ref, reactive, toRefs, onMounted, watch, nextTick } = Vue
const {ElMessageBox, ElLoading, ElNotification } = ElementPlus
const app = createApp({
setup(){
const obj = reactive({
mqttConfig: {
server: 'broker.emqx.io',
port: 8083,
client_id: 'mqtt_',
username: '',
password: '',
connect_timeout: 60,
keep_alive: 10,
clean_session: 0,
version: '3.1.1',
qos: 2,
sub_topic: '/v1/park/service/data',
pub_topic: '/v1/park/service/data',
},
message: '',
url: '/mqtt/getConfig.html',
});
/**
* 获取MQTT配置数据
*/
const loadConfig = () => {
_post(obj.url, {action: 'load'}, {hiddenError: true}).then(res => {
if (!res.status) {
ElNotification({
title: '提示',
message: res.message,
type: 'error'
});
} else {
// obj.mqttConfig = res.data;
runMqttServer(res.data);
}
}).catch(error => {});
}
const runMqttServer = (mqttConfig) => {
/**
* 连接选项
* @type {{password: (string|string|boolean|*), clientId: string, keepalive: number, connectTimeout: number, clean: boolean, username}}
*/
const options = {
/**
* true: 清除会话, false: 保留会话
*/
clean: mqttConfig.clean_session === 1,
/**
* 连接超时时间：毫秒
*/
connectTimeout: mqttConfig.connect_timeout * 1000,
/**
* 客户端ID
*/
clientId: `${mqttConfig.client_id}${Math.random().toString(16).slice(3)}`,
/**
* 连接用户名
*/
username: mqttConfig.username,
/**
* 连接密码，默认为public,新版本登录后台界面会让你修改密码
*/
password: mqttConfig.password,
/**
* 心跳时间
*/
keepalive: mqttConfig.keep_alive,
}
/**
* 连接字符串, 通过协议指定使用的连接方式
* 注意查看ws协议对应的端口号
* 测试只能使用ws方式，其它方式不生效，不知道为啥，知道的给留言
*/
const connectUrl = `ws://${mqttConfig.server}:8083/mqtt`;
//const connectUrl = 'ws://broker.emqx.io:8083/mqtt';
/**
* 连接MQTT客户端
*/
const client = mqtt.connect(connectUrl, options);
/**
* 监听连接成功，开始订阅
*/
client.on('connect', function (res) {
console.log('MQTT:', '监听连接成功[connect]');
client.subscribe(mqttConfig.sub_topic, {qos: mqttConfig.qos})
let message = {
message: `这是测试消息-${Math.random().toString(16).slice(3)}`
}
doPublish(JSON.stringify(message));
/*
setTimeout(() => {
let message = {
message: `这是测试消息-${Math.random().toString(16).slice(3)}`
}
doPublish(JSON.stringify(message));
}, 5000);
*/
});
/**
* 监听收到订阅消息
* topic: 订阅主题
* message: 消息主体
* packet: 数据包
*/
client.on('message', (topic, message, packet)=>{
console.log('MQTT:', '监听收到订阅消息[message]')
console.log('订阅主题：', topic)
console.log('消息内容数据包：', message)
console.log('消息内容：', message.toString())
console.log('消息数据包：', packet)
let data = JSON.parse(message.toString());
console.log('data:', data);
obj.message = `topic: ${topic}<br>message: ${message}`;
});
/**
* 发布消息
* @param message
*/
const doPublish = (message) => {
client.publish(mqttConfig.pub_topic, message, {qos: mqttConfig.qos});
}
/**
* mqtt.client相关事件
* 监听重新连接事件
*/
client.on('reconnect', () => {
console.log('MQTT:', '监听正在重连[reconnect]');
});
/**
* 监听连接断开事件
*/
client.on('close', function () {
console.log('MQTT:', '监听连接以断开[close]');
});
/**
* 监听“客户端”断开连接到“服务端”, 它是“客户端”发给“服务端”的最后一个控制报文。【MQTT5.0特性】
*/
client.on("disconnect", function (packet) {
console.log('MQTT:', '监听连接已断开[disconnect]')
console.log(packet)
});
/**
* 监听客户端脱机下线事件
*/
client.on("offline", function () {
console.log('MQTT:', '监听脱机下线[offline]')
});
/**
* 监听错误
*/
client.on("error", (error) => {
console.log('MQTT:', '监听错误[error]')
console.log('错误提示:', error)
});
/**
* 监听所有发布
* 包括published()包，以及MQTT用于管理的订阅和连接的包
*/
client.on('packetsend', (packet) => {
console.log('MQTT:', '监听发布主题[packetsend]')
console.log('发布数据包：', packet)
});
/**
* 监听订阅
* 包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
*/
client.on('packetreceive', (packet) => {
console.log('MQTT:', '监听收到订阅[packetreceive]')
console.log('订阅数据包:', packet)
});
window.addEventListener('beforeunload', function(){
console.log("UNLOAD:", '监听窗口关闭，断开链接');
});
}
// 挂载完成后，加载数据
onMounted (async () => {
loadConfig();
})
return {
...toRefs(obj)
}
}
}).use(ElementPlus, {
locale: ElementPlusLocaleZhCn,
}).mount("#app");
</script>
</body>
</html>
MQTT.js文件获取方式
1.NPM安装
https://www.npmjs.com/package/mqtt
npm install mqtt --save
火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)