Interface Web para exibição de dados do broker MQTT mosquitto
This is a Next.js project bootstrapped with create-next-app.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Para consumir dados será necessário já haver um servidor no mosquitto já configurado e com a comunicação websocket já habilitada.
Neste demo vamos utilizar um container mosquitto no docker.
Crie um arquivo Dockerfile na raiz do projeto, com as seguintes especificações:
FROM eclipse-mosquitto
COPY mosquitto.conf /mosquitto/config/mosquitto.conf
CMD ["mosquitto", "-c", "/mosquitto/config/mosquitto.conf"]
Crie um arquivo mosquitto.conf na raiz do projeto, com as seguintes especificações:
listener 1883
listener 9001
protocol websockets
allow_anonymous true
Atenção: Ao definir allow_anonymous true, é uma opção altamente insegura, em ambiente de produção, habilite mecanismos de autenticação.
Execute o seguinte comando no terminal, no mesmo diretório do arquivo Dockerfile e mosquitto.conf, para criar a imagem do servidor mosquito no docker
docker build -t mosquitto-websocket .Em seguida, execute o seguinte comando de criação do servidor mosquitto em um container docker:
docker run --name mosquitto_server -p 1883:1883 -p 9001:9001 mosquitto-websocketClone o projeto
git clone https://github.com/alimadeoliveiranatalia/real-time-use-mqtt.gitEntre no diretório backend e frontend
cd backend
# or
cd frontendInstale as dependências do projeto
npm installAbra o terminal e execute
node client_subscribe.jsO console exibirá a seguinte messagem: Inscrito no tópico: <name_topico>
Em outro terminal execute
node client_publish.jsO console irá exibir os dados do csv no console.