Introducción
Esta guía ofrece instrucciones detalladas, paso a paso para conectar a nuestros clientesMQTT broker(CrysqlMQ) o cualquier agente de su elección usando JavaScript. Cubre los requisitos necesarios y configuración, guiarte a través del proceso de establecer una conexión confiable. Aprenderás cómo para implementar autenticación, gestionar suscripciones y manejar intercambios de mensajes. Con la ayuda de esta documentación, podrás integrar fácilmente JavaScript web clientes con el broker MQTT para una comunicación eficiente de datos.
Pre-requisitos
Añadir el plugin de abajo a su archivo cliente
لscript src="https://unpkg.com/mqtt/dist/mqtt.min.js"
MQTT Conectar
Basic TCP Conexión
const client Id = 'testclient3';
const mqt V4Options = {
cliente Id: client Id,
nombre de host: 'broker-url',
puerto: 10443,
protocolo: 'ws',
};
const mqttV4Client = mqtt.connect(`ws://${mqttV4Options.hostname}:${mqtV4Options.port}`, mqttV4Options);Conectarse con la autenticación:
const mqt V4Options = {
cliente Id: client Id,
nombre de host: 'broker-url',
puerto: 10443,
protocolo: 'ws', // protocolo MQTT
nombre de usuario: 'nombre de usuario', // Agregar nombre de usuario si es necesario
contraseña: 'password', // Agregar contraseña si es necesario
};Conexión sobre TLS/SSL
Para conectarse de forma seguraTLS/SSL:
const mqt V4Options = {
cliente Id: client Id,
nombre de host: 'broker-url',
puerto: 11443,
protocolo: 'ws',
Rechazo No autorizado: verdadero, // Opcional, rechazar certificados no autorizados
// Añadir opciones adicionales TLS según sea necesario
certificado: 'suClientCert', //
llave: 'suClientKey', //
ca: 'suCaCert' // CA certificado
};
const mqttV4Client = mqtt.connect(`wss://${mqttV4Options.hostname}:${mqtV4Options.port}`, mqttV4Options);MQTT Publish
Para enviar datos a un tema:
ventana.publishMessageV4 = función (topic, message) {
mqttV4Client.publish(topic, message, { qos: 1 }, (err) = {}
Si.
consuelo. ( " Publicshed message on MQTT v4: ${topic} - ${message}`);
♫ ... {
consuelo.error(`Failed to publish message on MQTT v4: ${err}`);
}
});
};MQTT Suscríbete
Para recibir mensajes, suscribirse a un filtro de tema. ElMQTT brokera futuro correspondencia con mensajes a su cliente.
ventana.subscribeTemaV4 = función (topic) {
mqttV4Client.subscribe(topic, (err) = {
Si.
consola.log(`Subscrita al tema MQTT v4: ${topic}`);
♫ ... {
consola.error(`Failed to subscribe to MQTT v4 topic: ${err}`);
}
});
};Llamada que recibe el mensaje
mqttV4Client.on('message', (topic, message) = {}
consola.log(`Recibido mensaje en MQTT v4: ${topic} - ${message.toString()}`);
});Desconexión MQTT
Desconectar siempre de forma limpia para evitar las fugas de recursos y garantizar la debida sesión de manejo del corredor:
window.disconnectClientV4 = función () {}
mqttV4Client.end(verdad, () = {}
consola.log('Disconnected MQTT v4 client.');
});
};Llamada de desconexión
mqttV4Client.on('close', () = {
consola.log('Disconnected from MQTT v4 Broker.');
});Cliente MQTTv311
Código HTML de muestra
MQTT 3.1.1 html file
¡Atención! DOCTYPE html
"Lang="en"
■head
################################################################################################################################################################################################################################################################
■meta name="viewport" content="width=device-width, initial-scale=1.0"
▪ título Ejemplo:
لscript src="https://unpkg.com/mqtt/dist/mqtt.min.js"
"Src="mqt-v4.js" tipo="text/javascript"
Identificado/cabeza
▪
< > > > >
- Sección MQTT v4 - título
■h2 títuloMQTT v4
Identificación de contacto: se realizó/fuerte de confianza
Identificar a los usuarios: Desconectado/span]
() MQTT v4 obtenidos/button
■hr
■h3 títuloSubscriben
id="text" id="mqttV4SubscribeTema" titular="Tema para suscribirse"
■button onclick="subscribeTopicV4(document.getElementById('mqttV4SubscribeTopic').value)"
Identificar id="mqttV4Subscribed" Login/span Empleado
■hr
< > > >
id="text" id="mqttV4PublishTopic" placeholder="Tema para publicar"
id="text" id="mqttV4PublishMessage" placeholder="Message to publish"
# Button #
onclick="publishMessageV4(document.getElementById('mqttV4PublishTopic').value, document.getElementById('mqttV4PublishMesage').value)"(Publicado)
<h3] Mensajes publicados
id="mqttV4Published"
<h3] Mensajes recibidos
id="mqttV4Recibido"
Identificado/cuerpo
Identificado/html
Muestra código JavaScript
document.addEventListener('DOMContentLoad', (event) = confianza {}
función principal
const client Id = 'testclient1';
document.getElementById('mqtV4ClientId').textContent = cliente Id;
const mqt V4 Opciones = {
cliente Id: client Id,
nombre de host: 'broker-url',
puerto: 10443,
protocolo: 'ws',
// nombre de usuario: 'nombre de usuario', // Agregar nombre de usuario
// contraseña: 'password', // Añadir contraseña
};
const mqttV4Client = mqtt.connect(`ws://${mqttV4Options.hostname}:${mqtV4Options.port}`, mqttV4Options);
mqttV4Client.on('connect', () = {
consola.log('Connected with MQTT v4 Broker.');
document.getElementById('mqtV4Status').textContent = 'Connected';
});
mqttV4Client.on('message', (topic, message) = {}
consola.log(`Recibido mensaje en MQTT v4: ${topic} - ${message.toString()}`);
document.getElementById('mqtV4Recibido').innerHTML += ``Tema: ${topic}, Mensaje: ${message.toString()} `;
});
mqttV4Client.on('close', () = {
consola.log('Disconnected from MQTT v4 Broker.');
document.getElementById('mqtV4Status').textContent = 'Disconnected';
});
ventana.publishMessageV4 = función (topic, message) {
mqttV4Client.publish(topic, message, { qos: 1 }, (err) = {}
Si.
consuelo. ( " Publicshed message on MQTT v4: ${topic} - ${message}`);
document.getElementById('mqtV4Published')innerHTML += ``Publicado un ${topic}: ${message} `;
♫ ... {
consuelo.error(`Failed to publish message on MQTT v4: ${err}`);
}
});
};
ventana.subscribeTemaV4 = función (topic) {
mqttV4Client.subscribe(topic, (err) = {
Si.
consola.log(`Subscrita al tema MQTT v4: ${topic}`);
document.getElementById('mqtV4Subscribed').textContent = topic;
♫ ... {
consola.error(`Failed to subscribe to MQTT v4 topic: ${err}`);
}
});
};
window.disconnectClientV4 = función () {}
mqttV4Client.end(verdad, () = {}
consola.log('Disconnected MQTT v4 client.');
document.getElementById('mqtV4Status').textContent = 'Disconnected';
});
};
}
principal();
});MQTT v5 cliente
Código HTML de muestra
html html file
html
"Lang="en"
■head
################################################################################################################################################################################################################################################################
■meta name="viewport" content="width=device-width, initial-scale=1.0"
▪ título Ejemplo:
لscript src="https://unpkg.com/mqtt/dist/mqtt.min.js"
"Src="mqt-v5.js" tipo="text/javascript"
Identificado/cabeza
▪
< > > > >
- MQTT v5 Sección - título
■h2 títuloMQTT v5
Id. de referencia:
Identificar id="mqttV5Status" Desconectado/span]
"Desconectar" MQTT v5 obtenidos/button
■hr
■h3 títuloSubscriben
id="text" id="mqttV5SubscribeTema" titular="Tema para suscribirse"
■button onclick="subscribeTopicV5(document.getElementById('mqttV5SubscribeTopic').value)"
Identificado id="mqttV5Suscribido" Login/span Garantía/p
■hr
< > > >
id="mqttV5PublishTopic" placeholder="Tema para publicar"
id="text" id="mqttV5PublishMessage" placeholder="Message to publish"
# Button #
onclick="publishMessageV5(document.getElementById('mqttV5PublishTopic').value, document.getElementById('mqttV5PublishMesage').value)"ConsejoPublicado:
<h3] Mensajes publicados
id="mqttV5Published"
<h3] Mensajes recibidos
id="mqttV5Recibido"
Identificado/cuerpo
Identificado/html
Muestra código JavaScript
document.addEventListener('DOMContentLoad', (event) = confianza {}
función principal
const client Id = 'testclient4';
document.getElementById('mqtV5ClientId').textContent = cliente Id;
const mqt V5 Opciones = {
cliente Id: client Id,
nombre de host: 'broker-url',
puerto: 10443,
protocolo: 'ws',
protocoloVersión: 5, // Use MQTT v5
limpio: verdadero, // Iniciar sesión limpia
// nombre de usuario: "nombre de usuario"
// contraseña: 'password',
};
const mqttV5Client = mqtt.connect(`ws://${mqttV5Options.hostname}:${mqtV5Options.port}`, mqttV5Options);
//llamada atrás
mqttV5Client.on('connect', () = {
consola.log('Connected with MQTT v5 Broker.');
document.getElementById('mqtV5Status').textContent = 'Connected';
});
mqttV5Client.on('message', (topic, message, packet) = {}
consola.log(`Recibido mensaje en MQTT v5: ${topic} - ${message.toString()}`);
document.getElementById('mqtV5Recibido').innerHTML +=Tema: ${topic}, Mensaje: ${message.toString()} `;
});
mqttV5Client.on('close', () = {
consola.log('Disconnected from MQTT v5 Broker.');
document.getElementById('mqtV5Status').textContent = 'Disconnected';
});
// Función de publicación
window.publishMessageV5 = función (topic, message) {
mqttV5Client.publish(topic, message, {
1,
¡No!
propiedades:
Mensaje Intervalo: 60 // Opcional: vence después de 60 segundos
}
}, (err) = confianza {}
Si.
consola.log (`Publicshed message on MQTT v5: ${topic} - ${message}`);
document.getElementById('mqtV5Published').innerHTML += `Publicado un ${topic}: ${message} `;
♫ ... {
consuelo.error(`Failed to publish message on MQTT v5: ${err}`);
}
});
};
// Función de suscripción
ventana.subscribeTemaV5 = función (topic) {
mqttV5Client.subscribe(topic, {
0,
propiedades:
// No Local, Retener Como Publicado, etc. puede ir aquí si es necesario
}
}, (err, granted) = título {}
Si.
consola.log(`Subscrita al tema MQTT v5: ${topic}`);
document.getElementById('mqtV5Subscribed').textContent = topic;
♫ ... {
consola.error(`Failed to subscribe to MQTT v5 topic: ${err}`);
}
});
};
// Función de desconexión
window.disconnectClientV5 = función () {}
mqttV5Client.end(verdad, () = {}
consola.log('Disconnected MQTT v5 client.');
document.getElementById('mqtV5Status').textContent = 'Disconnected';
});
};
}
principal();
});