UNIVPLMDataIntegration/Web/src/views/mqttx/index.vue

<template>
	<div class="mqtt-box">
		<h1 class="header">MQTTX在线测试客户端</h1>
		<el-card :model="connection">
			<h1>连接参数(Configuration)</h1>
			<el-form label-position="top" :model="connection">
				<el-row :gutter="6">
					<el-col :span="8">
						<el-form-item prop="host" label="协议|主机|端口">
							<el-input v-model="connection.host" :disabled="connSuccess" type="password" show-password>
								<template #prepend>
									<el-select v-model="connection.protocol" class="w80" :disabled="connSuccess" @change="handleProtocolChange">
										<el-option label="ws://" value="ws"></el-option>
										<el-option label="wss://" value="wss"></el-option>
									</el-select>
								</template>
								<template #append>
									<el-input v-model.number="connection.port" type="number" class="w80" :disabled="connSuccess" placeholder="8083/8084"></el-input>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="0">
						<el-form-item prop="clientId" label="标识(Client ID)唯一性">
							<el-input v-model="connection.clientId"> </el-input>
						</el-form-item>
					</el-col>
					<el-col :span="0">
						<el-form-item prop="username" label="账号(Username)">
							<el-input v-model="connection.username"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="0">
						<el-form-item prop="password" label="密码(Password)">
							<el-input v-model="connection.password" type="password" show-password></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item prop="regpacket" label="设备包名(Regpacket)">
							<el-input v-model="connection.repacket" :disabled="connSuccess" @input="syncdhtreg" @change="init_topic"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item prop="dhtRegpack" label="共享传感器(dhtRegpacket)">
							<el-input v-model="connection.dhtRegpack" :disabled="connSuccess" @change="init_topic"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="text-right">
						<el-button
							type="primary"
							:icon="Setting"
							class="sub-btn"
							:disabled="client.connected"
							@click="createConnection"
							:loading="btnLoadingType === 'connect'"
							:style="{ display: client.connected ? 'none' : '' }"
						>
							{{ client.connected ? '已连接(Connected)' : '连接(Connect)' }}
						</el-button>
						<el-button v-if="client.connected" class="sub-btn" type="warning" :icon="Discount" @click="destroyConnection" :loading="btnLoadingType === 'disconnect'"> 断开(Disconnect) </el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<el-card shadow="hover">
			<h1>订阅(Subscribe)</h1>
			<el-form label-position="top" :model="subscription">
				<el-row :gutter="6">
					<el-col :span="12">
						<el-form-item prop="topic" label="订阅主题(Topic)">
							<el-input v-model="connection.subTopics" :disabled="subscribedSuccess" type="password" show-password></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item prop="qos" label="订阅质量(QoS)">
							<el-select v-model="subscription.qos" :disabled="subscribedSuccess">
								<el-option v-for="qos in qosList" :key="qos" :label="qos == 0 ? '0 至多一次' : qos == 1 ? '1 至少一次' : '2 仅仅一次'" :value="qos"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="text-right">
						<el-button
							type="primary"
							:icon="Connection"
							class="sub-btn"
							:style="{ display: subscribedSuccess ? 'none' : '' }"
							:loading="btnLoadingType === 'subscribe'"
							:disabled="!client.connected || subscribedSuccess"
							@click="doSubscribe"
						>
							{{ subscribedSuccess ? '已订阅(Subscribed)' : '订阅(Subscribe)' }}
						</el-button>
						<el-button v-if="subscribedSuccess" type="warning" :icon="Discount" class="sub-btn" :loading="btnLoadingType === 'unsubscribe'" :disabled="!client.connected" @click="doUnSubscribe">
							取消(Unsubscribe)
						</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<el-card shadow="hover">
			<h1>发布(Publish)</h1>
			<el-form label-position="top" :model="publish">
				<el-row :gutter="6">
					<el-col :span="8">
						<el-form-item prop="topic" label="发布主题(Topic)">
							<el-input v-model="connection.pubTopic" type="password" show-password></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item prop="qos" label="发布质量(QoS)">
							<el-select v-model="publish.qos">
								<el-option v-for="qos in qosList" :key="qos" :label="qos == 0 ? '0 至多一次' : qos == 1 ? '1 至少一次' : '2 仅仅一次'" :value="qos"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item prop="retain" label="发布保留(Retain)">
							<el-select v-model="publish.retain">
								<el-option value="false" label="false 不保留"></el-option>
								<el-option value="true" label="true 不保留"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row :gutter="6">
					<el-col :span="16">
						<el-form-item prop="payload" label="操作指令(Payload)">
							<el-input v-model="publish.payload" clearable maxlength="64" show-word-limit>
								<!--<template #prepend>
								<el-button :icon="Operation" />
							  </template> -->
								<template #append>
									<el-select v-model="publish.payload" placeholder="选择指令" style="width: 115px">
										<el-option label="状态查询" value="55 AA AA AA AA 91 CF" />
										<el-option label="全部打开" value="55 AA AA AA AA 81 A4 01" />
										<el-option label="全部关闭" value="55 AA AA AA AA 81 A4 00" />
										<el-option label="一路开关" value="55 AA AA AA AA 81 BA 01" />
										<el-option label="二路开关" value="55 AA AA AA AA 81 BA 02" />
										<el-option label="三路开关" value="55 AA AA AA AA 81 BA 03" />
										<el-option label="四路开关" value="55 AA AA AA AA 81 BA 04" />
									</el-select>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8" class="text-right">
						<el-button type="success" :icon="Position" class="sub-btn" :loading="btnLoadingType === 'publish'" :disabled="!client.connected" @click="doPublish(publish.payload, connection.pubTopic)">
							发布(Publish)
						</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

		<el-card shadow="hover">
			<h1>
				<el-button @click="clsmsg" type="success" :icon="Delete" title="点击清空历史记录">接收(Receive)</el-button>
				<el-tag title="接收次数">收 {{ recvnum }}</el-tag>
				<el-tag :title="dht_tm">{{ dht_wsd }}</el-tag>
				<el-tag title="设备已工作时长">{{ parseInt(runSeconds) }} 秒</el-tag>
				<el-button
					type="success"
					title="关闭一路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-if="connection.ch1_Status"
					icon="ele-Check"
					id="ch1"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 01 00')"
					>关闭</el-button
				>
				<el-button
					type="warning"
					title="打开一路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-else="!connection.ch1_Status"
					icon="ele-CloseBold"
					id="ch1"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 01 01')"
					>打开</el-button
				>
				<el-button
					type="success"
					title="关闭二路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-if="connection.ch2_Status"
					icon="ele-Check"
					id="ch2"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 02 00')"
					>关闭</el-button
				>
				<el-button
					type="warning"
					title="打开二路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-else="!connection.ch2_Status"
					icon="ele-CloseBold"
					id="ch2"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 02 01')"
					>打开</el-button
				>
				<el-button
					type="success"
					title="关闭三路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-if="connection.ch3_Status"
					icon="ele-Check"
					id="ch3"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 03 00')"
					>关闭</el-button
				>
				<el-button
					type="warning"
					title="打开三路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-else="!connection.ch3_Status"
					icon="ele-CloseBold"
					id="ch3"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 03 01')"
					>打开</el-button
				>
				<el-button
					type="success"
					title="关闭四路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-if="connection.ch4_Status"
					icon="ele-Check"
					id="ch4"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 04 00')"
					>关闭</el-button
				>
				<el-button
					type="warning"
					title="打开四路"
					:disabled="!connection.onlineStatus || !client.connected"
					v-else="!connection.ch4_Status"
					icon="ele-CloseBold"
					id="ch4"
					v-reclick="2000"
					@click="switchLight('55 AA AA AA AA 81 04 01')"
					>打开</el-button
				>
				<el-button
					type="danger"
					title="四路全部关闭"
					:disabled="!connection.onlineStatus || !client.connected"
					v-if="connection.all_Status"
					icon="ele-SwitchButton"
					id="ch5"
					@click="switchLight('55 AA AA AA AA 81 A4 00')"
					>全关</el-button
				>
				<el-button
					type="success"
					title="四路全部打开"
					:disabled="!connection.onlineStatus || !client.connected"
					v-else="!connection.all_Status"
					icon="ele-Switch"
					id="ch5"
					@click="switchLight('55 AA AA AA AA 81 A4 01')"
					>全开</el-button
				>

				<el-alert v-if="!client.connected || !connection.onlineStatus" title="网络服务断开或设备离线!" center type="warning" effect="light" style="margin-top: 4px" />
			</h1>
			<!-- 绑定接收日志，只读 -->
			<el-col :span="24">
				<el-input type="textarea" :rows="8" id="recv" v-model="receivedMessages" readonly class="log"></el-input>
			</el-col>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="mqttx">
import { reactive, ref, onMounted, nextTick } from 'vue';
import { Search, ChatDotSquare, TopRight, Star, Operation, Setting, Connection, Discount, Open, Delete, Position } from '@element-plus/icons-vue';
import * as MQTT from 'mqtt/dist/mqtt.min'; // 针对4.3.7版本的引用方法。5.7.x会提示错误 (import * as MQTT from "mqtt")
import mittBus from '/@/utils/mitt'; // 事件总线mitt 解决打包后错误Uncaught (in promise) ReferenceError: Cannot access 'oe' before initialization

// vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269
// https://github.com/mqttjs/MQTT.js#qos
const qosList = [0, 1, 2]; // 质量
const now = new Date();
const recvnum = ref(0);
const dht_wd = ref(0); // 温度、湿度
const dht_sd = ref(0);
const dht_tm = ref(''); // 同步时间
const dht_wsd = ref('温度0℃,湿度0%');
const runSeconds = ref(0); // 工作时长

// mqtt客户端变量 let或const
const client = ref({
	connected: false, //未连接
} as MQTT.MqttClient);

const receivedMessages = ref('');
const subscribedSuccess = ref(false); //订阅成功标志
const connSuccess = ref(false); //连接成功标志
const btnLoadingType = ref('');
const retryTimes = ref(0); //重连次数

/**
 * this demo uses EMQX Public MQTT Broker (https://www.emqx.com/en/mqtt/public-mqtt5-broker), here are the details:
 * 参考https://github.com/emqx/MQTT-Client-Examples
 * 方法https://github.com/mqttjs/MQTT.js
 * Broker host: broker.emqx.io
 * WebSocket port: 8083
 * WebSocket over TLS/SSL port: 8084
 * ws -> 8083; wss -> 8084
 * By default, EMQX allows clients to connect without authentication.
 * https://docs.emqx.com/en/enterprise/v4.4/advanced/auth.html#anonymous-login

 * for more options and details, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
 */
const connection = reactive({
	protocol: 'ws',
	host: 'broker.emqx.io',
	// ws -> 8083; wss -> 8084
	port: 8083,
	clientId: 'emqx_vue3_' + Math.random().toString(16).substring(2, 8),
	username: '',
	password: '',
	repacket: 'd1ca1ff51f04', //注册包（改为您的注册包）
	dhtRegpack: 'd1ca1ff51f04', //温度注册包（可以相同可以共享传感器）
	mqttToken: '0804d4c44c1f1bd11dea461481f19868', //授权TOKEN自己约定
	keepalive: 30,
	clean: true, //清除 clean session
	connectTimeout: 30 * 1000, // ms 超时毫秒
	reconnectPeriod: 5000, // ms 重连毫秒
	resubscribe: true, //重新订阅
	//定义您自己的主题
	subTopic: 'mqtt/admintnet/#0#/out',
	willTopic: 'mqtt/admintnet/#0#/will',
	dhtTopic: 'mqtt/admintnet/#0#/dht',
	pubTopic: 'mqtt/admintnet/#0#/into',
	subTopics: [],
	pubPayload: '{"msg":"hellow vue3 mqtt."}',
	onlineStatus: false,
	ch1_Status: false,
	ch2_Status: false,
	ch3_Status: false,
	ch4_Status: false,
	all_Status: false,
	isAC: null, //强电true
});
// 初始化主题
const init_topic = () => {
	let st = 'mqtt/admintnet/#0#/out'; //订阅主题
	let pt = 'mqtt/admintnet/#0#/into'; //发布主题
	let ptbody = '{"token":"{0}","cmd":"{1}","cmdpara":"{2}","clientid":"{3}"}';
	let wt = 'mqtt/admintnet/#0#/will'; //遗嘱主题
	let dh = 'mqtt/admintnet/#0#/dht'; //温湿度
	connection.subTopic = st.replace('#0#', connection.repacket);
	connection.willTopic = wt.replace('#0#', connection.repacket);
	connection.dhtTopic = dh.replace('#0#', connection.dhtRegpack); //温湿度
	connection.pubTopic = pt.replace('#0#', connection.repacket);
	connection.subTopics = [connection.subTopic, connection.willTopic, connection.dhtTopic];
	connection.pubPayload = ptbody;
	//console.log(connection.subTopics);
};

// 默认注册包同步和传感器包名一致，反之不动
const syncdhtreg = () => {
	connection.dhtRegpack = connection.repacket;
};

// 字符串替换模拟  string.format(str,ar1,arn)
const stringFormat = (formatted, args) => {
	for (let i = 0; i < args.length; i++) {
		let regexp = new RegExp('\\{' + i + '\\}', 'gi');
		formatted = formatted.replace(regexp, args[i]);
	}
	return formatted;
};

onMounted(async () => {
	init_topic();
	nextTick(() => {});
});

// topic & QoS for MQTT subscribing 订阅主题(多个)
const subscription = ref({
	topic: `$(connection.subTopics.value)`,
	qos: 0 as MQTT.QoS,
});

// topic, QoS & payload for publishing message 发布主题
const publish = ref({
	topic: `${connection.pubTopic}`,
	qos: 0 as MQTT.QoS,
	retain: false, //保留否
	payload: '55 AA AA AA AA 91 CF', //'{ "msg": "Hello, I am browser." }',
});

const initData = () => {
	client.value = {
		connected: false,
	} as MQTT.MqttClient;
	retryTimes.value = 0;
	btnLoadingType.value = '';
	subscribedSuccess.value = false;
};

const handleOnReConnect = () => {
	retryTimes.value++;
	connection.clientId = 'emqx_vue3_' + Math.random().toString(16).substring(2, 8);
	console.log(retryTimes.value, '重试次数');
	if (retryTimes.value > 5) {
		try {
			client.value.end(); //重连超过5次断开
			initData();
			console.log('connection maxReconnectTimes limit, stop retry');
			appmessage(now.toLocaleString() + '|超出重连接次数，停止重试' + retryTimes.value);
		} catch (error) {
			console.log('handleOnReConnect catch error:', error);
		}
	}
};

/**
 * if protocol is "ws", connectUrl = "ws://broker.emqx.io:8083/mqtt"
 * if protocol is "wss", connectUrl = "wss://broker.emqx.io:8084/mqtt"
 *
 * /mqtt: MQTT-WebSocket uniformly uses /path as the connection path,
 * which should be specified when connecting, and the path used on EMQX is /mqtt.
 *
 * for more details about "mqtt.connect" method & options,
 * please refer to https://github.com/mqttjs/MQTT.js#mqttconnecturl-options
 */
// create MQTT connection 创建连接
const createConnection = () => {
	try {
		btnLoadingType.value = 'connect';
		const { protocol, host, port, ...options } = connection;
		const connectUrl = `${protocol}://${host}:${port}/mqtt`; //组成新的连接字符串
		console.log(connectUrl, '连接地址');
		client.value = MQTT.connect(connectUrl, options);
		if (client.value.on) {
			// https://github.com/mqttjs/MQTT.js#event-connect
			client.value.on('connect', () => {
				//v5.x  reconnect
				btnLoadingType.value = '';
				connSuccess.value = true; //client.value.connected;
				console.log('connection successful', client.value.connected);
				appmessage(now.toLocaleString() + '|连接服务成功');
			});

			// https://github.com/mqttjs/MQTT.js#event-reconnect 重连回调
			client.value.on('reconnect', handleOnReConnect);
			// https://github.com/mqttjs/MQTT.js#event-error
			client.value.on('error', (error) => {
				console.log('connection error:', error);
				appmessage(now.toLocaleString() + '|发生错误：' + error);
			});

			// https://github.com/mqttjs/MQTT.js#event-message 接收消息，处理方法单独定义
			client.value.on('message', (topic: string, message) => {
				//处理方法
				recvnum.value++; //接收次数累计
				doAction(topic, message); //处理
				receivedMessages.value = receivedMessages.value.concat(
					//拼接字符串输出
					now.toLocaleString() + ' ' + `${topic}\r\n` + message.toString() + '\r\n'
				);
				// console.log(now.toLocaleString()+`收到消息: ${message} from topic: ${topic}`);
				//滚动此方法可行
				nextTick(() => {
					setTimeout(() => {
						syncBottom(); //滚动到底部
					}, 50);
				});
			});
		}
	} catch (error) {
		btnLoadingType.value = '';
		console.log('mqtt.connect error:', error);
	}
};

// 处理事件
const doAction = (t, msg) => {
	let res = JSON.parse(msg.toString()); //必须规范的json格式否则出错，双引号不能是单引号；；；后不安全但强大 eval('(' + message.toString() + ')'); //JSON.parse(message.toString());//json对象

	// 消息不能带''否则错误
	let regp = res.regpacket; // 接收的注册包
	let regs = connection.repacket; // 订阅的注册包
	let isOK = regp == regs ? true : false; // 是不是本设备的消息
	if (!isOK || regp == null) {
		return; // 不是丢弃
	}

	if (t == connection.dhtTopic) {
		// 温湿度
		let rp = res.regpacket;
		let wd = res.temperature;
		let sd = res.humidity;
		let sj = res.time;
		let sc = res.runsec;
		if (rp != connection.dhtRegpack) {
			// 来自订阅的温湿度包
			return;
		}
		if (rp != null) {
			dht_wd.value = wd; // 实际应用时替换此3个变量即可
			dht_sd.value = sd;
			dht_tm.value = '更新时间:' + sj;
			runSeconds.value = sc;
			dht_wsd.value = '温度:' + dht_wd.value + '℃,湿度:' + dht_sd.value + '%';
			//state.option.title.text="实时温湿度变化趋势图(运行"+parseInt(sc)+"秒)";
			//updatechart(false);//实时数据(这种方法是实时推送，如果用 定时器 是定时显示的)updatewsd_time(false)
		}
	}
	if (t == connection.willTopic) {
		// 遗嘱
		if (res.redata == 'offline') {
			connection.onlineStatus = false;
		} else {
			connection.onlineStatus = true;
		}
	}
	if (t == connection.subTopic) {
		let rp0 = res.regpacket;
		if (rp0 != undefined) {
			if (rp0 == regs) {
				op(res.redata); // 该设备执行指令其他放弃
			}
		}
	}
};

// 处理开关状态(自定义的指令，需要修改为您自己的指令)
const op = (cmd: any) => {
	if (cmd == '55 AA AA AA AA 82 01 01') {
		connection.ch1_Status = true;
	}
	if (cmd == '55 AA AA AA AA 82 01 00') {
		connection.ch1_Status = false;
	}
	if (cmd == '55 AA AA AA AA 82 02 01') {
		connection.ch2_Status = true;
	}
	if (cmd == '55 AA AA AA AA 82 02 00') {
		connection.ch2_Status = false;
	}
	if (cmd == '55 AA AA AA AA 82 03 01') {
		connection.ch3_Status = true;
	}
	if (cmd == '55 AA AA AA AA 82 03 00') {
		connection.ch3_Status = false;
	}
	if (cmd == '55 AA AA AA AA 82 04 01') {
		connection.ch4_Status = true;
	}
	if (cmd == '55 AA AA AA AA 82 04 00') {
		connection.ch4_Status = false;
	}
	if (cmd == '55 AA AA AA AA 82 A4 01') {
		connection.ch1_Status = true;
		connection.ch2_Status = true;
		connection.ch3_Status = true;
		connection.ch4_Status = true;
	}
	if (cmd == '55 AA AA AA AA 82 A4 00') {
		connection.ch1_Status = false;
		connection.ch2_Status = false;
		connection.ch3_Status = false;
		connection.ch4_Status = false;
	}
	if (cmd == '55 AA AA AA AA 84 AC 01') {
		connection.isAC = true;
	}
	if (cmd == '55 AA AA AA AA 84 AC 00') {
		connection.isAC = false;
	}
	if (connection.ch1_Status && connection.ch2_Status && connection.ch3_Status && connection.ch4_Status) {
		connection.all_Status = true;
	}
	if (!connection.ch1_Status && !connection.ch2_Status && !connection.ch3_Status && !connection.ch4_Status) {
		connection.all_Status = false;
	}
	if (cmd == '55 AA AA AA AA 84 AC 01') {
		connection.isAC = true;
	}
	if (cmd == '55 AA AA AA AA 84 AC 00') {
		connection.isAC = false;
	}
};

// 自动同步滚动（建议延时执行）textarea:any=null
const syncBottom = () => {
	const textarea = document.getElementById('recv');
	if (textarea) {
		textarea.scrollTop = textarea.scrollHeight - 30;
	}
};

// subscribe topic 开始订阅
// https://github.com/mqttjs/MQTT.js#mqttclientsubscribetopictopic-arraytopic-object-options-callback
const doSubscribe = () => {
	btnLoadingType.value = 'subscribe';
	const { topic, qos } = subscription.value;
	console.log(connection.subTopics, '订阅主题');
	client.value.subscribe(connection.subTopics, { qos }, (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
		btnLoadingType.value = '';
		if (error) {
			console.log('subscribe error:', error);
			return;
		}
		subscribedSuccess.value = true; //订阅成功
		// 连接成功，发布首个问询指令
		switchLight('55 AA AA AA AA 91 CF'); //发送首页问询指令
		console.log('订阅成功subscribe successfully:', granted);
	});
};

// unsubscribe topic 取消订阅
// https://github.com/mqttjs/MQTT.js#mqttclientunsubscribetopictopic-array-options-callback
const doUnSubscribe = () => {
	btnLoadingType.value = 'unsubscribe';
	const { topic, qos } = subscription.value;
	client.value.unsubscribe(connection.subTopics, { qos }, (error) => {
		btnLoadingType.value = '';
		subscribedSuccess.value = false;
		if (error) {
			console.log('unsubscribe error:', error);
			return;
		}
		console.log(`unsubscribed topic: ${topic}`);
	});
};

// publish message发布消息
// https://github.com/mqttjs/MQTT.js#mqttclientpublishtopic-message-options-callback
const doPublish = (b, t) => {
	//btnLoadingType.value = "publish";
	const { topic, qos, payload, retain } = publish.value;
	//console.log(t+b,"发布内容")
	let paybody = stringFormat(connection.pubPayload, [connection.mqttToken, b ?? publish.value.payload, '', connection.clientId]); //标准格式payload
	client.value.publish(t ?? connection.pubTopic, paybody, { qos }, (error) => {
		nextTick(() => {
			// 测试延时
			setTimeout(() => {
				btnLoadingType.value = '';
			}, 50);
		});
		if (error) {
			appmessage(now.toLocaleString() + '|发布消息错误.' + error);
			console.log('publish error:', error);
			return;
		}
	});
};

// 消息追加消息框
const appmessage = (msg) => {
	receivedMessages.value = receivedMessages.value.concat(
		// 拼接字符串输出
		msg + '\r\n'
	);
};

// 开关
const switchLight = (cmd) => {
	if (!client.value.connected) {
		appmessage('尚未连接到服务!');
		return;
	}
	let paybody = stringFormat(connection.pubPayload, [connection.mqttToken, cmd ?? publish.value.payload, '', connection.clientId]);
	const { topic, qos, payload, retain } = publish.value;
	//console.log(t+b,"发布内容")
	client.value.publish(connection.pubTopic, paybody, { qos }, retain, (error) => {
		btnLoadingType.value = '';
		if (error) {
			console.log('publish error:', error);
			return;
		}
	});
};

// disconnect 端口连接
// https://github.com/mqttjs/MQTT.js#mqttclientendforce-options-callback
const destroyConnection = () => {
	if (client.value.connected) {
		btnLoadingType.value = 'disconnect';
		try {
			client.value.end(false, () => {
				initData();
				connSuccess.value = false;
				//console.log("断开成功 disconnected successfully");
				appmessage(now.toLocaleString() + '|连接已断开.');
			});
		} catch (error) {
			btnLoadingType.value = '';
			console.log('断开错误 disconnect error:', error);
		}
	}
};

// 端口随协议而改变
const handleProtocolChange = (value: string) => {
	connection.port = value === 'wss' ? 8084 : 8083;
};

// 清空消息框
const clsmsg = () => {
	receivedMessages.value = '';
};
</script>

<style lang="scss" scoped>
.mqtt-box {
	max-width: 100%;
	margin: 0 auto;
}

.header {
	font-size: 24px;
	font-weight: bold;
	margin: -6px auto 0px auto;
}

h1 {
	font-size: 16px;
	margin-top: 10px auto 20px auto;
	padding: 6px 0px 6px 0;
}

.el-col {
	padding: 4px;
}

.el-input {
	font-size: 13px;
}
.el-card {
	margin-bottom: 6px;
}
.el-card__body {
	padding: 24px;
}

.el-select {
	width: 100%;
}

.text-right {
	text-align: right;
}

.sub-btn {
	margin-top: 20px;
	width: 160px;
}

.hidden {
	display: none;
}
.w80 {
	width: 80px;
}
.w100 {
	width: 100px;
}
.log {
	font-size: 14px;
	color: #fff;
	background-color: black;
}
.center {
	text-align: center;
}
#ch1,
#ch2,
#ch3,
#ch4,
#ch5 {
	width: 120px;
}
.el-tag {
	padding: auto 4px;
	margin: 5px;
	min-width: 60px;
}
</style>