DEV Community

Ivan
Ivan

Posted on

Dashboard em Tempo Real com Vue.js + Quasar + MQTT (Usando HiveMQ)

#vue #mqtt #iot #development

Vamos configurar um painel bonito, responsivo para monitoramento de sensores, dispositivos IoT ou até servidores, recebendo dados em tempo real via MQTT, usando apenas Vue.js + Quasar Framework no frontend.

Se você trabalha com automação, IoT, ou gosta de acompanhar dados dos seus dispositivos, sensores, ou servidores, provavelmente já pensou em ter um dashboard bonito, funcional e em tempo real.

Com Vue.js + Quasar e um broker MQTT como o HiveMQ, você cria isso rapidamente, usando só frontend. Perfeito para:

 Monitoramento de sensores (temperatura, energia, ambiente...)

 Automação residencial

 Status de servidores

 Qualquer aplicação que envie dados via MQTT
Enter fullscreen mode Exit fullscreen mode

  • Tecnologias Usadas

    Vue.js 3 (Composition API)

    Quasar Framework (UI bonita, responsiva e poderosa)

    MQTT.js (Cliente MQTT via WebSocket)

    HiveMQ Cloud (Broker MQTT gratuito)

  • Broker Gratuito Usado

Vamos usar o broker gratuito da HiveMQ:
🔗 https://www.hivemq.com/demos/websocket-client/

Configurações para WebSocket:

Broker: broker.hivemq.com

Porta: 8000 (WebSocket sem SSL)
ou 8884 (WebSocket com SSL) (pode testar ambos)

URL WebSocket: ws://broker.hivemq.com:8000/mqtt
ou com SSL: wss://broker.hivemq.com:8884/mqtt
Enter fullscreen mode Exit fullscreen mode

Utilizando ambiente DEV em linux Debian com @quasar/cli v2.5.0

Setup do Projeto
1️ Crie um novo projeto Quasar:

npm install -g @quasar/cli
npm init quasar
#App with quasar->ProjectFolder->mqtt-dashboard
# utilizando Pinia como state Management e Axios
cd mqtt-dashboard
#testar o ambiente dev com
quasar dev
Enter fullscreen mode Exit fullscreen mode

Com isso o servidor dev local acessivel em http://localhost:9000/#/

Estrutura do projeto

.
├── index.html
├── jsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── postcss.config.cjs
├── public
├── quasar.config.js
├── README.md
└── src

4 directories, 7 files
Enter fullscreen mode Exit fullscreen mode

Instale o MQTT.js:

npm install mqtt
Enter fullscreen mode Exit fullscreen mode

🔌 Conectando ao MQTT
Crie um composable useMqtt.js:

mkdir src/composables
#cria arquivo vazio, abaixo adicionamos conteúdo...
touch src/composables/useMqtt.js
Enter fullscreen mode Exit fullscreen mode

Adicione esse conteúdo

import { ref, onMounted, onBeforeUnmount } from 'vue'
import mqtt from 'mqtt'

export function useMqtt() {
  const temperatura = ref(0)
  const status = ref('Desconectado')
  const client = ref(null)

  const connect = () => {
    const url = 'ws://broker.hivemq.com:8000/mqtt'
    client.value = mqtt.connect(url)

    client.value.on('connect', () => {
      status.value = 'Conectado'
      client.value.subscribe('teste/sensor/temperatura')
    })

    client.value.on('message', (topic, payload) => {
      if (topic === 'teste/sensor/temperatura') {
        temperatura.value = parseFloat(payload.toString())
      }
    })

    client.value.on('error', (err) => {
      status.value = 'Erro'
      console.error('Erro MQTT:', err)
    })

    client.value.on('close', () => {
      status.value = 'Desconectado'
    })
  }

  const disconnect = () => {
    client.value?.end()
    status.value = 'Desconectado'
  }

  onMounted(connect)
  onBeforeUnmount(disconnect)

  return {
    temperatura,
    status
  }
}
Enter fullscreen mode Exit fullscreen mode

Interface Simples
No seu IndexPage.vue, substitua o conteudo por:

<template>
  <q-page padding>
    <div class="q-pa-md">
      <q-card>
        <q-card-section>
          <div class="text-h6">Dashboard IoT - MQTT</div>
          <div>Status: <q-badge :color="status === 'Conectado' ? 'green' : 'red'">{{ status }}</q-badge></div>
        </q-card-section>

        <q-separator />

        <q-card-section>
          <div class="text-subtitle1">
            🌡️ Temperatura: <b>{{ temperatura }} ºC</b>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script setup>
import { useMqtt } from 'src/composables/useMqtt'

const { temperatura, status } = useMqtt()
</script>
Enter fullscreen mode Exit fullscreen mode

Testando

👉 Envie dados de teste usando o próprio Web Client da HiveMQ:

  1. Na guia 'Connection' clique connect
  2. Abaixo em 'Publish' coloque o tópico abaixo e o valor '25' no campo mensagem.

🔗 https://www.hivemq.com/demos/websocket-client/

Tópico: teste/sensor/temperatura

Mensagem: 25 (ou qualquer valor de teste)
Enter fullscreen mode Exit fullscreen mode
  1. Clique em Publish.

Seu dashboard atualizará em tempo real!
Expandindo

🔌 Adicione mais tópicos (ex.: umidade, energia, presença).

📈 Inclua gráficos com apexcharts ou chart.js.

📲 Pode hospedar isso no seu próprio domínio.
Enter fullscreen mode Exit fullscreen mode

Conclusão

É simples montar um dashboard em tempo real usando apenas frontend, com Vue.js, Quasar e MQTT. Isso é perfeito para automação residencial, IoT, monitoramento de energia (como eu uso nos meus projetos) e muito mais.
Se quiser, pode expandir adicionando banco de dados, notificações, alertas ou integração com ferramentas como n8n ou Node-RED.

Arquivos do projeto;
https://github.com/ivanrochacardoso/mqtt_quasar_dashboard

Top comments (0)