Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@n0bisuke

Node.jsでMQTTブローカーを立てて、ブラウザから確認する

Nefry BT(ESP32)でMQTTを使ってみよう Subscribe編などでMQTT実装をNode.jsで試してみましたが、Web側で情報を受け取るためにはBrokerサーバーにHTTPサーバーも載せて実装する必要があります。

MQTT over Websocketsなどを参考に作ってみました。

Broker+Webサーバーの準備

Webサーバー(のフレームワーク)として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/mqtt@2.15.1/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の利用の幅が広がって便利です。

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What is going on with this article?