Prueba un broker MQTT desde tu navegador (sin instalar nada)

Puedes probar un broker MQTT desde tu navegador en unos dos minutos: sin instalar Mosquitto, sin Python y sin permisos de administrador. Abre el cliente MQTT online, conéctate por WebSocket seguro (wss), suscríbete a un topic, publica un mensaje y míralo volver. Si ese viaje de ida y vuelta funciona, el broker está en marcha, es accesible desde tu red y enruta mensajes.

Esta guía recorre la prueba completa paso a paso, muestra cómo apuntarla a tu propio broker y cómo compartir una prueba lista con un compañero o con quien desarrolla el firmware.

Cómo funciona MQTT en el navegador

Los navegadores no pueden abrir sockets TCP puros, así que una página web no puede hablar MQTT directamente en el puerto 1883. En su lugar usa MQTT sobre WebSockets: los mismos paquetes MQTT, encapsulados dentro de una conexión WebSocket que empieza como una petición HTTP de upgrade.

Para las pruebas importan dos consecuencias: el broker debe tener un listener WebSocket activo (con la ruta correcta, normalmente /mqtt) y desde una página https debes usar wss. El cliente de TestMQTT también ofrece TCP y TLS; como los navegadores no pueden abrir esos sockets, los retransmite a través del servidor de TestMQTT. Es práctico para comprobar un broker que solo acepta TCP, pero ten en cuenta que entonces la conexión sale de la red del relay, no de la tuya. Para más contexto, consulta MQTT sobre WebSockets.

Paso 1 — Conectar

1. Abre testmqtt.com/client. El protocolo por defecto es WSS y hay un broker recomendado preseleccionado.
2. Haz clic en Connect. El estado pasa a conectado y el log registra la conexión correcta (el CONNACK del broker).
3. Se genera un client ID único (testmqtt_xxxxxxxx) para cada pestaña, así que dos pestañas nunca se expulsan mutuamente del broker.

Para probar tu propio broker, elige Custom broker… en la lista de brokers y rellena los ajustes:

Si el broker usa un certificado autofirmado, quien decide si confiar en él es el navegador, no la página. Abre https://host:8084/ una vez en una pestaña y acepta el certificado o, mejor aún, usa un certificado de una CA pública.

Paso 2 — Suscribirse y publicar

Usa un topic que nadie más esté usando. En un broker compartido, test está muy concurrido; algo como testmqtt/<tu-nombre>-<aleatorio>/# mantiene tus mensajes separados.

1. En Subscriptions, añade testmqtt/demo-7f3a/# con QoS 1.
2. En Publish, pon el topic testmqtt/demo-7f3a/sensor, elige la plantilla Sensor JSON o escribe tu propio payload y haz clic en Publish.
3. El mensaje aparece en la lista marcado como recibido. Haz doble clic para ver todos los detalles: topic, QoS, flag retained, tamaño y el payload completo.

Si publicas y no aparece nada, comprueba que el filtro de suscripción coincide realmente con el topic: testmqtt/demo-7f3a/+ coincide con un nivel, # con todos los niveles inferiores. El topic matcher lo resuelve en segundos y topics y wildcards explica las reglas.

Para un flujo constante, define un intervalo de repetición en el panel de publicación. Así es fácil observar la conexión durante unos minutos y detectar desconexiones o huecos.

Paso 3 — Probar mensajes retained y Last Will

Una prueba seria de un broker va más allá de un mensaje:

• Retained: publica en testmqtt/demo-7f3a/status con retain activado. Desconéctate, vuelve a conectarte y suscríbete de nuevo: el broker debe entregar inmediatamente el último valor retenido. Para borrarlo, publica un payload retenido vacío, o usa Clear retained message en los detalles del mensaje.
• Last Will: en Settings, define un will topic como testmqtt/demo-7f3a/lwt con el payload offline. Abre una segunda pestaña suscrita a ese topic y cierra la primera sin desconectar. Tras aproximadamente 1,5 veces el intervalo de keep alive, el broker debería publicar el will. Un Disconnect limpio no lo dispara: ese es el comportamiento correcto.
• MQTT 5: cambia la versión del protocolo a 5 y vuelve a conectar. Si el broker solo soporta 3.1.1 obtendrás un error en el CONNACK como Unsupported Protocol Version; la herramienta de reason codes explica cada código.

Paso 4 — Contrastar con otro cliente

Una prueba en el navegador demuestra que el listener WebSocket funciona. Los dispositivos suelen usar TCP o TLS, así que cierra el círculo: deja el navegador suscrito y publica desde una terminal.

mosquitto_pub -h broker.connectmq.com -p 1883 \
  -t testmqtt/demo-7f3a/sensor -m '{"temp":21.5}' -q 1 -d

mosquitto_pub -h broker.connectmq.com -p 8883 \
  --cafile /etc/ssl/certs/ca-certificates.crt \
  -u "$MQTT_USER" -P "$MQTT_PASS" \
  -t testmqtt/demo-7f3a/sensor -m '{"temp":21.5}' -q 1

Si el mensaje aparece en el navegador, ambos listeners comparten el mismo broker y el enrutamiento funciona entre transportes. Si TCP funciona pero el navegador no —o al revés—, el problema está en el listener o en la ruta de red de un transporte, no en el broker en su conjunto.

Comparte una prueba lista para usar

Cuando depuras con otra persona —un desarrollador de firmware, un cliente, un compañero—, envíale un enlace que abra el cliente ya conectado al endpoint correcto y suscrito al topic correcto:

https://testmqtt.com/client?url=wss://broker.connectmq.com:8084/mqtt&topic=testmqtt/demo-7f3a/%23

url define protocolo, host, puerto y ruta y conecta automáticamente; topic define la suscripción (codifica # como %23). Ambos veis los mismos mensajes en directo, algo mucho más rápido que intercambiar capturas de logs. Las credenciales nunca forman parte del enlace: cada persona introduce las suyas.

Cuando la prueba en el navegador falla

Las herramientas de desarrollo de tu navegador muestran los frames WebSocket en bruto en Network → WS, que suele ser la forma más rápida de ver si salió el CONNECT y qué volvió. Depurar MQTT con Chrome DevTools lo explica paso a paso.

Abrir el cliente de prueba en el navegador

Probar desde el navegador es la primera comprobación más rápida que puedes hacer: no requiere instalar nada, funciona desde cualquier máquina y un enlace compartido pone a todos mirando el mismo topic en directo. Cuando el viaje de ida y vuelta en el navegador funcione, contrasta por TCP o TLS y sabrás que el broker, los listeners y la ruta de red están en orden.

Preguntas frecuentes