先下载依赖
npx --yes --registry https://registry.npmmirror.com npm install mqtt在src的api创建 mes.js
// 导入axios
import axios from 'axios';// 定义一个变量,记录公共的前缀, baseURL
const baseURL = 'http://localhost:8080';
const instance = axios.create({ baseURL });// 添加响应拦截器
instance.interceptors.response.use((response) => {return response.data; // 直接返回响应的数据部分},(error) => {alert('服务异常');return Promise.reject(error); // 异步的状态转化成失败的状态}
);// 定义 meslist 函数，使用定制的 Axios 实例发送请求
export const meslist = async (topic) => {try {const response = await instance.get('/getmes', {params: {topic: topic}});return response; // 返回整个响应对象，因为拦截器已经提取了 data 部分} catch (error) {console.error('API 请求失败:', error);throw error;}
};export default instance;创建一个vue文件，然后填自己的ip，如果设置了用户名密码也填上
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { ElMessage, ElButton, ElInput, ElTable, ElTableColumn } from 'element-plus';
import mqtt from 'mqtt'; // 导入 mqtt，默认导出的是客户端工厂函数
import { meslist } from '@/api/mes'; // 引入 meslist API// 响应式变量
const SelectTopic = ref(''); // 可以动态修改的选择项（如输入框内容）
const results = ref([]); // 用来存储搜索结果
const loading = ref(false); // 用于控制加载状态
const error = ref(null); // 用于显示错误信息给用户
let client;// 搜索函数
const search = async () => {if (!SelectTopic.value.trim()) {ElMessage.warning("请输入有效的搜索内容");return;}loading.value = true; // 开始加载error.value = null; // 清除之前的错误信息try {const response = await meslist(SelectTopic.value);console.log('API Response:', response); // 输出原始响应以便调试// 如果是数组，则按照新逻辑处理if (Array.isArray(response)) {if (response.length > 0) {results.value = response;console.log('搜索成功:', results.value);} else {ElMessage.info('未找到相关结果');results.value = [];}} // 如果都不是，则抛出异常else {throw new Error('API 返回的数据格式不正确');}} catch (err) {// 更详细的错误信息记录console.error('搜索失败:', err);ElMessage.error('搜索失败，请稍后重试或检查网络连接');results.value = [];} finally {loading.value = false; // 搜索完成，结束加载状态}
};// MQTT 连接配置
const connectMqtt = () => {const brokerUrl = 'ws://ip/mqtt'; // 使用提供的主机名、端口和路径const clientId = 'emqx_MTgwND'; // 客户端 IDconst options = {username: 'web', // 替换为实际的用户名~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~password: '123', // 替换为实际的密码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~keepalive: 60, // Keepalive 时间clean: true, // Clean StartsessionExpiryInterval: 0, // 会话过期时间protocolVersion: 5, // 协议版本 MQTT 5};client = mqtt.connect(brokerUrl, options);client.on('connect', () => {console.log('Connected to MQTT broker');if (SelectTopic.value.trim()) {client.subscribe(SelectTopic.value, (err) => {if (err) {console.error('Failed to subscribe:', err);} else {console.log('Subscribed to topic:', SelectTopic.value);}});}});client.on('message', (topic, message) => {console.log('Received message:', topic, message.toString()); // 调试信息try {const msg = JSON.parse(message.toString());// 更新结果列表results.value = [...results.value, {id: msg.id || 0,topic: topic,payload: msg.payload || message.toString(),qos: msg.qos || 0,timestamp: new Date().toLocaleString()}];} catch (e) {console.error('Failed to parse message:', e);// 如果解析失败，直接将原始消息作为字符串处理results.value = [...results.value, {id: -1,topic: topic,payload: message.toString(),qos: 0,timestamp: new Date().toLocaleString()}];}});client.on('error', (err) => {console.error('MQTT connection error:', err);});client.on('close', () => {console.log('MQTT connection closed');});
};// 断开 MQTT 连接
const disconnectMqtt = () => {if (client) {client.end();client = null;}
};// 监听 SelectTopic 的变化
watch(SelectTopic, (newVal) => {if (newVal.trim()) {disconnectMqtt();connectMqtt();} else {disconnectMqtt();}
});// 在组件挂载时启动 MQTT 连接
onMounted(() => {if (SelectTopic.value.trim()) {connectMqtt();}
});// 在组件卸载时断开 MQTT 连接
onUnmounted(() => {disconnectMqtt();
});
</script><template><div class="container"><h1 class="title">历史数据查看</h1><div class="input-container"><el-inputv-model="SelectTopic"placeholder="请输入搜索内容"size="large"clearableclass="input-box"/></div><div class="button-container"><el-buttontype="primary"@click="search":loading="loading"class="search-button">{{ loading ? "加载中..." : "搜索" }}</el-button></div><!-- 搜索结果表格 --><el-table v-if="results.length > 0" :data="results" style="width: 100%" border><el-table-column prop="id" label="ID" width="100"></el-table-column><el-table-column prop="qos" label="QoS" width="100"></el-table-column><el-table-column prop="payload" label="Payload"></el-table-column><el-table-column prop="timestamp" label="Timestamp" width="200"><template #default="scope">{{ scope.row.timestamp }}</template></el-table-column></el-table><!-- 如果没有数据或错误时的提示 --><div v-else-if="!loading && SelectTopic.trim()"><p class="error-message">{{ error || '没有找到相关结果' }}</p></div><div v-else-if="!loading"><p class="placeholder-message">请输入搜索内容</p></div></div>
</template><style scoped>
/* 设置容器样式 */
.container {padding: 40px;max-width: 1000px;margin: 0 auto;background-color: #f7f7f7;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}/* 标题样式 */
.title {font-size: 28px;font-weight: bold;color: #333;text-align: center;margin-bottom: 30px;
}/* 输入框容器样式 */
.input-container {display: flex;justify-content: center;margin-bottom: 20px;
}/* 输入框样式 */
.input-box {width: 50%;font-size: 16px;
}/* 按钮容器样式 */
.button-container {display: flex;justify-content: center;margin-bottom: 20px;
}/* 按钮样式 */
.search-button {width: 200px;height: 40px;font-size: 16px;
}/* 错误消息样式 */
.error-message {color: red;text-align: center;font-size: 16px;
}/* 占位符消息样式 */
.placeholder-message {text-align: center;font-size: 16px;color: #888;
}
</style>
在输入框输入，就可以订阅相应的主题了，然后其他客户端发送此主题的内容，就可以订阅接收到了。因为我的代码里面还有给后端发请求的部分，所以相关后端接口需要你们自己完成或者把这部分的代码删掉。
