Extensión MQTT para VS Code: publica y suscríbete sin salir de tu editor

Una extensión MQTT para VS Code acaba con el constante cambio de ventanas del desarrollo IoT: el firmware en una ventana, un cliente de escritorio en otra y una terminal escondida detrás de ambas. En esta guía configurarás MQTT dentro de Visual Studio Code con la extensión de ConnectMQ, organizarás los payloads de prueba como archivos de tu repositorio y añadirás tareas de workspace que ejecutan comprobaciones CLI repetibles. Todo se demuestra contra el broker público gratuito broker.connectmq.com.

Por qué llevar MQTT al editor

Cuando cambias el nombre de un topic en el código, quieres ver el efecto de inmediato. Cuando corriges un campo JSON, quieres publicar un payload de prueba que ponga a prueba la corrección. Hacerlo dentro del editor tiene ventajas concretas:

• Un ciclo de retroalimentación más corto. Edita, flashea o reinicia, y observa el topic en un panel junto al código.
• Los payloads viven con el código. Los mensajes de prueba se convierten en archivos versionados que tus compañeros pueden reutilizar y revisar.
• Menos herramientas que instalar. Los nuevos miembros del equipo instalan la extensión y obtienen las tareas del workspace, y ya están listos.
• Parámetros de conexión coherentes. Todo el mundo prueba con la misma configuración de broker, lo que evita errores de topic del tipo «en mi máquina funciona».

Instalar la extensión de ConnectMQ para VS Code

1. Abre la vista Extensions (Ctrl+Shift+X, o Cmd+Shift+X en macOS).
2. Busca ConnectMQ e instala la extensión oficial.
3. Abre la extensión desde su icono o desde la paleta de comandos (Ctrl+Shift+P) escribiendo su nombre.

La extensión te permite conectarte a brokers MQTT, suscribirte a topics y publicar payloads de prueba sin salir de VS Code. Funciona con cualquier broker MQTT estándar. Las etiquetas exactas pueden cambiar entre versiones; la página de la extensión en el Marketplace es la referencia para la interfaz actual.

Conectarse a un broker

Crea una conexión con estos valores para el servidor MQTT público gratuito, pensado para pruebas y prototipos:

Elige un prefijo de topic único para tus pruebas, como connectmq/demo/7hq2/. El área pública la puede leer cualquiera, así que nunca publiques ahí secretos ni datos reales de clientes. Los límites públicos son 64 KB por mensaje, 10 mensajes por segundo por cliente, 10 suscripciones por cliente y hasta 8 niveles de topic.

Suscribirse y publicar desde la extensión MQTT para VS Code

Con la conexión abierta:

1. Suscríbete a connectmq/demo/7hq2/# para ver todo lo que cuelga de tu prefijo.
2. Publica un mensaje de prueba en connectmq/demo/7hq2/device1/cmd con el payload {"action": "blink", "times": 3}.
3. Confirma que llega a tu vista de suscripción y luego apunta tu dispositivo o servicio a los mismos topics.

Movimientos de depuración típicos que se vuelven rápidos dentro del editor:

• Caza de erratas en los topics. Suscríbete al nivel padre con # y compara los topics que llegan realmente con las cadenas de tu código.
• Comprobación del estado retenido. Vuelve a conectar y fíjate en qué topics muestran un valor de inmediato; esos son los retenidos.
• Prueba de comandos. Publica exactamente el comando que enviaría tu aplicación y observa el topic de respuesta del dispositivo.

Guarda los payloads de prueba como archivos en tu repositorio

Publiques desde el cliente que publiques, guarda los mensajes de prueba de referencia en el repositorio. Una estructura sencilla:

mqtt/
  payloads/
    cmd-blink.json
    cmd-reboot.json
    telemetry-normal.json
    telemetry-out-of-range.json
  README.md

Ejemplo de mqtt/payloads/telemetry-out-of-range.json:

{
  "deviceId": "device1",
  "temperature": 142.7,
  "humidity": -3,
  "ts": 1760600000000
}

Los payloads de casos límite como este (valores imposibles, campos que faltan, tipos incorrectos) son los que necesitarás para probar la validación en tu backend. Tenerlos como archivos permite revisarlos, y VS Code valida la sintaxis JSON mientras escribes.

Añade tareas de workspace para comprobaciones CLI repetibles

Una extensión es ideal para el trabajo interactivo. Para comprobaciones repetibles, las tareas de VS Code que envuelven mosquitto_pub y mosquitto_sub la complementan bien y se ejecutan en la terminal integrada. Crea .vscode/tasks.json:

{
  "version": "2.0.0",
  "inputs": [
    {
      "id": "payloadFile",
      "type": "pickString",
      "description": "Payload to publish",
      "options": [
        "mqtt/payloads/cmd-blink.json",
        "mqtt/payloads/telemetry-normal.json",
        "mqtt/payloads/telemetry-out-of-range.json"
      ]
    }
  ],
  "tasks": [
    {
      "label": "MQTT: watch demo topics",
      "type": "shell",
      "command": "mosquitto_sub -h broker.connectmq.com -p 1883 -i vscode-watch-7hq2 -t 'connectmq/demo/7hq2/#' -v",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "MQTT: publish payload file",
      "type": "shell",
      "command": "mosquitto_pub -h broker.connectmq.com -p 1883 -i vscode-pub-7hq2 -t connectmq/demo/7hq2/device1/telemetry -q 1 -f ${input:payloadFile}",
      "problemMatcher": []
    },
    {
      "label": "MQTT: wait for one telemetry message",
      "type": "shell",
      "command": "mosquitto_sub -h broker.connectmq.com -p 1883 -i vscode-check-7hq2 -t connectmq/demo/7hq2/device1/telemetry -C 1 -W 15",
      "problemMatcher": []
    }
  ]
}

Ejecútalas desde Terminal > Run Task. La entrada pickString te permite elegir qué archivo de payload enviar, y -f publica el contenido del archivo como mensaje. La última tarea termina con error si no llega nada en 15 segundos, una prueba de humo muy práctica después de flashear el firmware. Si necesitas más variantes, consulta los ejemplos de mosquitto_pub y mosquitto_sub. Estas tareas requieren tener instalados los clientes de Mosquitto; herramientas CLI de MQTT compara alternativas si prefieres otro cliente de línea de comandos.

Un flujo de trabajo práctico para firmware

Así encaja todo cuando desarrollas un dispositivo ESP32 en VS Code con PlatformIO:

1. Inicia la tarea «watch demo topics» (o suscríbete en la extensión).
2. Compila y sube el firmware; abre el monitor serie en otro panel.
3. Observa cómo aparecen la primera telemetría del dispositivo y su status retenido.
4. Publica cmd-blink.json en el topic de comandos y observa el LED y el log serie.
5. Publica telemetry-out-of-range.json en el topic de telemetría para comprobar cómo gestiona tu backend los datos erróneos.

Los cinco pasos se hacen sin salir del editor. Para el lado del dispositivo, el tutorial de MQTT con ESP32 te ofrece un firmware que coincide con esta estructura de topics.

Manejo seguro de credenciales en un workspace

Nunca confirmes contraseñas del broker en tasks.json ni en los archivos de payload. Dos patrones más seguros:

• Usa variables de entorno en las tareas: -u $MQTT_USER -P $MQTT_PASS (en Windows PowerShell, $env:MQTT_USER), y defínelas en el perfil de tu shell o en un archivo .env local excluido mediante .gitignore.
• Mantén un archivo de configuración de los clientes Mosquitto fuera del repositorio (~/.config/mosquitto_pub) con las líneas -u y -P.

Para un broker privado en ConnectMQ, el portal genera el usuario, la contraseña y el client ID al crear el broker, y los client ID están vinculados a esas credenciales, así que usa el ID emitido tanto en la extensión como en las tareas. Las buenas prácticas de seguridad en MQTT tratan la gestión de credenciales para dispositivos y equipos.

¿Editor, escritorio o navegador?

Más allá del broker público

El servidor público es ideal para probar la extensión y hacer prototipos, pero no para datos de producción: el desarrollo en equipo y los dispositivos reales necesitan un broker privado y autenticado. Un broker MQTT gestionado da a cada desarrollador y a cada dispositivo sus propias credenciales sobre TLS, sin que tengas que operar servidores. Cuando estés listo para escribir código de aplicación, la visión general de bibliotecas cliente MQTT muestra las llamadas equivalentes de publicación y suscripción en cada lenguaje principal.

Empieza con ConnectMQ

Instala la extensión de ConnectMQ para VS Code y crea un broker privado en app.connectmq.com con el plan Serverless gratuito, sin tarjeta de crédito. Pega las credenciales generadas en una nueva conexión y podrás probar tráfico real de dispositivos desde tu editor en minutos.

Preguntas frecuentes

¿VS Code incluye un cliente MQTT integrado?

No. VS Code no tiene soporte MQTT integrado, así que lo añades con una extensión como la descrita aquí o con tareas que ejecutan clientes de línea de comandos en la terminal integrada.

¿La extensión de ConnectMQ para VS Code funciona con otros brokers?

Sí. Se conecta a brokers MQTT estándar y encaja de forma natural con los brokers creados en el portal.

¿Puedo ejecutar pruebas MQTT automáticamente desde VS Code?

Sí. Las tareas del workspace pueden publicar archivos de payload y esperar los mensajes previstos con mosquitto_sub -C 1 -W 15, que hace fallar la tarea si no llega nada a tiempo.

¿Debo confirmar tasks.json con la configuración del broker?

Confirma las tareas que usan el broker público o variables de entorno, pero nunca confirmes contraseñas. Guarda las credenciales privadas en variables de entorno o en archivos de configuración locales excluidos de git.