Cliente web MQTT online: prueba cualquier broker desde tu navegador

Un cliente web MQTT online te permite conectarte a un broker, suscribirte a topics y publicar mensajes de prueba directamente desde una pestaña del navegador, sin instalar nada. En esta guía aprenderás cómo llegan realmente los clientes de navegador a un broker, harás una sesión de prueba completa con el cliente integrado en el portal de ConnectMQ y construirás un pequeño cliente de navegador propio para los casos que una herramienta alojada no cubre.

¿Por qué usar un cliente web MQTT online?

Las herramientas de línea de comandos como mosquitto_sub son excelentes, pero no siempre están disponibles. Puede que estés en un portátil corporativo bloqueado, ayudando a un compañero en una videollamada o revisando una instalación en campo desde una tablet. Un cliente basado en el navegador elimina el paso de instalación: abres una página, introduces el host y las credenciales y ya estás viendo tráfico en vivo.

Tareas típicas de un cliente web:

• Confirmar que un dispositivo nuevo publica de verdad, y en el topic que esperas.
• Enviar un comando puntual, como una actualización de configuración o la conmutación de un relé, a un dispositivo en pruebas.
• Comprobar los retained messages tras un despliegue.
• Mostrar a una persona no técnica que los datos fluyen, sin tener que explicarle un terminal.
• Reproducir un informe de error con el payload exacto que envió un cliente.

Un cliente web es una herramienta de pruebas y depuración, no un consumidor de producción. Mantén las integraciones de larga duración en un servicio adecuado y usa el navegador para el trabajo interactivo.

Cómo se conectan los clientes MQTT de navegador

Los navegadores no pueden abrir sockets TCP en bruto, así que un cliente de navegador no puede usar los puertos MQTT clásicos 1883 u 8883. En su lugar, encapsula MQTT dentro de una conexión WebSocket. El broker debe exponer un listener WebSocket, y el cliente debe conocer tanto el puerto como la ruta. Si quieres todo el contexto, lee nuestra guía de MQTT sobre WebSocket.

ConnectMQ expone estos listeners en todos los brokers:

Dos reglas del navegador explican la mayoría de las conexiones fallidas. Primera: una página cargada por HTTPS no puede abrir un socket ws:// sin cifrar; el navegador lo bloquea como contenido mixto. Segunda: la ruta importa; conectarse a wss://broker.connectmq.com:8084 sin /mqtt llega al servidor pero nunca completa el handshake MQTT. Usa WebSocket seguro con la ruta completa y ambos problemas desaparecen. El broker sirve un certificado de Let's Encrypt, así que los navegadores confían en él sin configuración adicional.

Paso a paso: prueba un broker con el cliente web de ConnectMQ

La vía más rápida es el cliente MQTT integrado en el portal, porque ya conoce los endpoints y las credenciales de tu broker.

1. Regístrate en app.connectmq.com, elige el plan Serverless gratuito y crea un broker. El portal genera para ti un usuario, una contraseña y un client ID.
2. Abre el cliente MQTT en el navegador desde el portal. Los datos de conexión de tu broker están disponibles junto a él.
3. Conéctate. Un CONNACK correcto significa que se aceptaron las credenciales y el client ID. Recuerda que los client IDs están vinculados a las credenciales emitidas, así que usa el client ID que te dio el portal en lugar de inventarte uno.
4. Suscríbete a un filtro con comodín para tu proyecto, por ejemplo factory1/#, para ver todo lo que cuelga de esa raíz.
5. Publica un payload de prueba como {"temperature": 21.7} en factory1/line1/sensor1/telemetry con QoS 1. Debería aparecer de inmediato en el panel de suscripción.
6. Publica otra vez con el flag retain activado, desconéctate, vuelve a conectarte y suscríbete de nuevo. El valor retenido debería llegar al instante, lo que demuestra que el broker guarda el último valor de ese topic.
7. Abre el explorador de topics en vivo en otra pestaña. El mismo topic aparece ahora en el árbol, una comprobación cruzada práctica de que el mensaje pasó realmente por el broker.

Si solo quieres experimentar, también puedes apuntar cualquier cliente web al servidor MQTT público gratuito en wss://broker.connectmq.com:8084/mqtt. Acepta conexiones anónimas con cualquier client ID único y no vacío. Usa un prefijo de topic único como connectmq/demo/k3x9/..., porque todo lo que hay en el área pública lo puede leer cualquiera; es para pruebas y prototipos, no para datos de producción.

Construye un cliente de navegador mínimo con MQTT.js

A veces necesitas un comportamiento que una herramienta genérica no ofrece: un generador de payloads personalizado, un botón conectado a un comando concreto o una página que puedas dar a un técnico de campo. MQTT.js se ejecuta en el navegador y habla WebSockets de forma nativa. Instálalo en cualquier proyecto con bundler (Vite, webpack o similar) con npm install mqtt y usa el siguiente módulo:

import mqtt from "mqtt";

const prefix = `connectmq/demo/${Math.random().toString(16).slice(2, 8)}`;
const clientId = `web-${Math.random().toString(16).slice(2, 10)}`;

const client = mqtt.connect("wss://broker.connectmq.com:8084/mqtt", {
  clientId,
  protocolVersion: 5,
  clean: true,
  connectTimeout: 10_000,
  reconnectPeriod: 3_000,
  // Para tu broker privado, añade las credenciales del portal:
  // username: "YOUR_USERNAME",
  // password: "YOUR_PASSWORD",
  // y usa clientId: "YOUR_CLIENT_ID"
});

client.on("connect", (connack) => {
  console.log("Connected, reason code:", connack.reasonCode ?? 0);
  client.subscribe(`${prefix}/#`, { qos: 1 }, (err, granted) => {
    if (err) return console.error("Subscribe failed:", err);
    console.log("Granted:", granted);
    client.publish(
      `${prefix}/sensor1/telemetry`,
      JSON.stringify({ temperature: 21.7, ts: Date.now() }),
      { qos: 1 }
    );
  });
});

client.on("message", (topic, payload) => {
  console.log(`${topic} -> ${payload.toString()}`);
});

client.on("error", (err) => console.error("MQTT error:", err.message));
client.on("close", () => console.log("Connection closed"));

Abre la consola del navegador y deberías ver el mensaje de conexión, el QoS concedido y tu propio payload devuelto. Como el código usa MQTT 5, el valor connack.reasonCode está disponible, y una conexión rechazada informará de un motivo significativo en lugar de un fallo genérico.

Nunca envíes secretos de producción al navegador

Todo lo que pongas en JavaScript de front-end es visible para el usuario. Para una página interna de depuración es aceptable; para un panel público, no. Si muchas personas necesitan acceso de lectura, emite una credencial dedicada para el panel y mantén separadas las credenciales de los dispositivos, o coloca un pequeño backend entre el navegador y el broker. Nuestras buenas prácticas de seguridad MQTT tratan la separación de credenciales con más detalle.

Solución de problemas de conexión del cliente MQTT online

La mayoría de los problemas se reducen a detalles del transporte. Repasa esta lista en orden:

1. Puerto incorrecto. 1883 y 8883 no funcionan desde un navegador. Usa el 8084 para wss://.
2. Falta la ruta. La URL debe terminar en /mqtt.
3. Contenido mixto. Una página HTTPS no puede abrir ws://. Cambia a wss://.
4. Client ID vacío. El servidor público exige un client ID no vacío; tu broker privado exige el que se te emitió.
5. Client ID duplicado. Si dos pestañas usan el mismo client ID, el broker desconecta la sesión más antigua cada vez que la otra se conecta, y ambas pestañas oscilan. Da a cada pestaña un ID único en el servidor público.
6. Credenciales incorrectas. Copia el usuario y la contraseña directamente del portal. Los inicios de sesión fallidos repetidos pueden activar el bloqueo de IP como parte de la protección contra fuerza bruta del broker, así que corrige las credenciales antes de reintentar en bucle.
7. Proxy corporativo. Algunos proxies eliminan las cabeceras de upgrade de WebSocket. Prueba desde otra red para confirmarlo.
8. Cuota alcanzada. El plan Serverless gratuito permite hasta 25 conexiones. Con MQTT 5, el broker puede devolver el reason code 0x97 (quota exceeded), que el cliente MQTT.js expone en su error.

Interpretar los síntomas

Cuándo ir más allá del navegador

Un cliente web es ideal para comprobaciones interactivas, pero termina en la pestaña. Cuando necesites registrar tráfico durante horas, reproducir mensajes o automatizar pruebas, pasa a herramientas que se ejecutan fuera del navegador. Los ejemplos de mosquitto_pub y mosquitto_sub cubren las pruebas con scripts, la extensión de ConnectMQ para VS Code muestra los reason codes de CONNACK, SUBACK y PUBACK dentro de tu editor, y el explorador MQTT de escritorio de ConnectMQ se adapta mejor a las sesiones largas. Para inspeccionar visualmente una jerarquía de topics grande, consulta nuestro recorrido por el explorador de topics MQTT.

Para el tráfico de producción en sí, la decisión importante es el broker, no el cliente. Un broker MQTT gestionado te da endpoints WebSocket seguros, credenciales emitidas y un portal con cliente web y explorador de topics de serie, de modo que las comprobaciones en el navegador que acabas de aprender funcionan desde el primer día.

Empieza con ConnectMQ

Crea un broker gratuito en app.connectmq.com con el plan Serverless; no necesitas tarjeta de crédito. Obtienes credenciales, los cuatro transportes, incluidos los WebSockets seguros, y el cliente en el navegador usado en esta guía. Para saber cómo se compara ConnectMQ con ejecutar tu propio servidor, lee nuestra guía para elegir un broker MQTT en la nube.

Preguntas frecuentes

¿Puede un navegador conectarse al puerto MQTT 1883 u 8883?

No. Los navegadores no pueden abrir sockets TCP en bruto, así que deben usar MQTT sobre WebSocket. En ConnectMQ, eso significa wss://<host>:8084/mqtt para conexiones cifradas.

¿Es seguro usar un cliente web MQTT online con credenciales reales?

Es seguro cuando el cliente se ejecuta en una página de confianza, como el portal de tu propio broker, mediante wss://. Evita introducir credenciales de producción en sitios web desconocidos de terceros y nunca incrustes credenciales de dispositivos en código front-end público.

¿Por qué mi cliente web se desconecta continuamente?

La causa más habitual es que dos sesiones usan el mismo client ID, lo que hace que el broker expulse la más antigua cada vez. Da a cada pestaña y herramienta un client ID único.

¿Incluye el plan gratuito el cliente web?

Sí. El plan Serverless gratuito incluye el portal con el cliente MQTT en el navegador y el explorador de topics en vivo.

¿Puedo usar las funciones de MQTT 5 desde el navegador?

Sí. MQTT.js admite MQTT 5 con protocolVersion: 5, así que puedes leer reason codes y usar funciones como la expiración de mensajes y las user properties desde un navegador.