Use MQTTX para comunicarse con el front-end vue

Requisitos: de acuerdo con la interfaz proporcionada por el backend, el frontend implementa operaciones de conexión de cifrado de mensajes y suscripción de mensajes, y opera directamente con dispositivos de hardware sin pasar por el backend

1. Descarga mqttx

Enlace al sitio web oficial: MQTTX: su caja de herramientas de cliente MQTT todo en uno

Elija un sistema operativo diferente según su computadora, y la descarga predeterminada es en inglés

 La versión en inglés cambió a chino

 2. Conéctese de acuerdo con la dirección de enlace proporcionada por el backend

No mueva las partes avanzadas, después de editar la conexión, haga clic en la esquina superior derecha para conectar

 Agregue el nombre del asunto de la suscripción, si es una prueba, puede ingresarlo casualmente, como / prueba

Qos es para determinar la calidad del mensaje. Qos: 0 significa que el remitente solo envía una vez, independientemente de si el servidor lo recibe o no. 1 significa al menos una vez. De todos modos, el servidor debe recibir una vez, y es posible recibir más de 2 veces 2 garantías El servidor lo recibe solo una vez, cuanto mayor sea el valor, mayor será la calidad, menor será el qos y menor el ancho de banda de la red. menor consumo de energía

 

 2. Operación de encriptación y conexión mqtt de front-end

La operación de cifrado aquí en realidad significa que la dirección de conexión no se puede exponer en la consola del navegador, por lo que descifro directamente la dirección de conexión cifrada y luego hago un enlace. De hecho, este método debería requerir que el backend pase la conexión cifrada al frontend a través de una interfaz, y el frontend la descifrará nuevamente, lo cual es más seguro.

Descargar mqtt y crypto-js

npm install mqtt crypto-js -S

código de encriptación

文本加密
var ciphertext = CryptoJS.AES.encrypt('连接地址', 'secret key 123').toString();

El código completo de vue es el siguiente

<!--
 * @Descripttion: 在Vue项目中使用mqtt
 * @version: 
 * @Author: 叫我欧皇大人
 * @email: [email protected]
 * @Date: 2023-07-10 
-->

<template>
    <div class="content-box">
        <div class="container">
            <div class="chatroomBox">
                {
   
   { dataChart }}
                <el-row :gutter="20">
                    <el-col :span="12"><el-input v-model="message" placeholder="请输入内容"></el-input></el-col>
                    <el-col :span="12"> <el-button @click="mqttPublish" type="success" round>发送消息</el-button></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import mqtt from 'mqtt';
import CryptoJS from 'crypto-js';
var client;

// 连接设置
let options = {
    clean: true, // 保留会话
    connectTimeout: 4000, // 超时时间
    reconnectPeriod: 1000, // 重连时间间隔
    // 认证信息
    clientId: 'mqtitId-Home',
    username: 'root3',
    password: '123456'
};
var bytes = CryptoJS.AES.decrypt('加密后连接地址进行解密', 'secret key 123');
var connectUrl = bytes.toString(CryptoJS.enc.Utf8);
// 创建客户端
client = mqtt.connect(connectUrl, options);
export default {
    data() {
        return {
            message: '',
            dataChart: null,
            logs: [],
            connection: {
                host: '120.55.60.217',
                port: 1883,
                // endpoint: '/mqtt',
                clean: true, // 保留会话
                connectTimeout: 4000, // 超时时间
                reconnectPeriod: 4000, // 重连时间间隔
                // 认证信息
                clientId: 'mqttx_a16dc275',
                username: 'root3',
                password: '123456'
            }
        };
    },
    mounted() {
        this.connectMQTT();
        //   this.mqttReceive();
    },
    watch: {
        textareaMsg: function(newValue, oldValue) {
            console.log(newValue, oldValue, 'watch侦听到的数据');
            return newValue;
        }
    },
    methods: {
        /**
         * @name:初始化mqtt
         * @msg:
         * @param {*}
         * @return {*}
         */
        connectMQTT() {
            if (client.connected) {
                client.end();
            }
            // mqtt连接
            client.on('connect', e => {
                console.log('连接成功:');
                client.subscribe(['/test', 'test2'], error => {
                    if (!error) {
                        console.log('订阅成功');
                    } else {
                        console.log('订阅失败');
                    }
                });
            });
            // 接收消息处理
            client.on('message', (topic, message) => {
                console.log('收到来自', topic, '的消息', message.toString());
                console.log('message: ', JSON.parse(message.toString()));
                this.dataChart = JSON.parse(message.toString());
            });
            // 断开发起重连
            client.on('reconnect', error => {
                console.log('正在重连:', error);
            });
            // 链接异常处理
            client.on('error', error => {
                console.log('连接失败:', error);
            });
        },
        /**
         * @name:发布mqtt消息
         * @msg:
         * @param {*}
         * @return {*}
         */
        mqttPublish() {
            let topic = '/test'; //和后台约定好的主题
            client.publish(topic, JSON.stringify(this.message));
        }
    },
    beforeDestroy() {
        if (this.client) {
            this.client.end();
        }
    }
};
</script>

<style scoped lang="less">
.chatroomBox {
    width: 800px;
    height: 500px;
}
/deep/.el-textarea__inner {
    height: 200px;
}
</style>

3. Efecto

 Este es el final del artículo, espero que te pueda ser de ayuda, si no entiendes puedes escribirme en el área de comentarios o mensaje privado~