Node.js에서 MQTT 브로커를 설정하고 브라우저에서 확인

14623 단어 Expresswebsocket자바스크립트mqttNode.js
Nefry BT(ESP32)에서 MQTT를 사용해 보자 Subscribe편 등으로 MQTT 구현을 Node.js로 시도해 보았습니다만, Web측에서 정보를 받기 위해서는 Broker 서버에 HTTP 서버도 올려 구현할 필요가 있습니다.

MQTT over Websockets 등을 참고로 만들어 보았습니다.

Broker+웹 서버 준비



웹 서버(의 프레임워크)로 express, Broker 서버로 mosca를 이용합니다.
npm i --save express mosca

broker.js
'use strict';

const express = require("express");
const http = require('http');
const mosca = require('mosca');

const HTTP_PORT = 3000;
const MQTT_PORT = 1883;

const app = express();
const httpServer = http.createServer(app);
const broker = new mosca.Server({port: MQTT_PORT});

broker.on('ready', () => console.log('Server is ready.'));
broker.on('clientConnected', client => console.log('broker.on.connected.', 'client:', client.id));
broker.on('clientDisconnected', client => console.log('broker.on.disconnected.', 'client:', client.id));
broker.on('subscribed', (topic, client) => console.log('broker.on.subscribed.', 'client:', client.id, 'topic:', topic));
broker.on('unsubscribed', (topic, client) => console.log('broker.on.unsubscribed.', 'client:', client.id));
broker.on('published', (packet, client) => {
    if (/\/new\//.test(packet.topic))return;
    if (/\/disconnect\//.test(packet.topic))return;
    console.log('broker.on.published.', 'client:', client.id);
});

app.get('/',(req,res) => res.sendfile('./index.html'));

broker.attachHttpServer(httpServer);
httpServer.listen(HTTP_PORT);

이것으로 기동하면(자), 1883 포트로 Broker 서버가 기동하면서, 거기서 Publiser 로부터 받은 패킷은 3000 포트로 대기하고 있는 WebSocket 측에도 전달 (Subscribe) 됩니다.

브라우저 측 (Subscriber)



브라우저 측에서는 WebSocket을 내부 이용하면서 MQTT의 인터페이스로 액세스할 수 있습니다. 브라우저측이 수신기능(Subscriber)이 됩니다.

mqtt.js 을 읽어들입니다.
https://unpkg.com/mqtt/dist/mqtt.min.js에 액세스하면 최신 버전이 표시되므로 참조하십시오.

index.html
<html>
    <head>
        <title>websocket</title>
    </head>
    <body>
        <script src="https://unpkg.com/[email protected]/dist/mqtt.min.js"></script>
        <script>

        const client = mqtt.connect();
        client.subscribe("n0bisuke");

        client.on("message", (topic, payload) => {
            console.log(topic,payload.toString('utf-8'));
        });

        client.publish("mqtt/demo", "hello world!");

        </script>
    </body>
</html>
n0bisukeトピック 로 전송된 정보를 콘솔에 표시합니다.

Publisher(덤)



Publisher측은 무엇인가 적당하게 준비하면 됩니다만. Node.js로 할 경우는 이런 느낌입니다.
npm i --save mqtt

publisher.js
'use strict';

const mqtt = require('mqtt');
const client = mqtt.connect('mqtt://localhost');

client.on('connect', () => console.log('publisher.connected.'));

setInterval(() => {
    const message = Date.now().toString();
    client.publish('n0bisuke', message);
    console.log('publisher.publish:', message);
}, 1000);
n0bisukeトピック 에 초당 정보를 보냅니다.

동작





이런 식으로 Node.js 측에서 Publish한 정보가 Broker를 경유하여 브라우저 측에서 받을 수 있었습니다.

의외로 정보가 없지만, 이것을 할 수 있으면 MQTT의 이용의 폭이 넓어져 편리합니다.
WebSocket 데이터를 받는 페이지
[Review] WebSocket 정보

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage