hivemq-mqtt-web-client／ChatGPT で作った HTMLファイルを使ってローカルの MQTTブローカーにブラウザ上のクライアントから接続

Last updated at 2024-07-07Posted at 2024-07-07

今回の記事は、ブラウザ上で動く MQTTクライアントを使って、MQTT を使った通信を試す話です。1つは ChatGPT に作ってもらったもので進めてみます。

なお MQTTブローカーは、過去に何度も利用してきた「shiftr.io のデスクトップ版アプリ」を使います。

クライアント 2種

今回、MQTTクライアントとして使うものは 2つあります。

1つは、HiveMQ により提供されている「MQTT Websocket Client」で、もう 1つは ChatGPT（GPT-4o）に作ってもらった MQTTクライアントです。

それぞれについて補足します。

HiveMQ により提供されている「MQTT Websocket Client」

HiveMQ により提供されている MQTT Websocket Client は、以下でオープンソースとして公開されているものです。

●hivemq/hivemq-mqtt-web-client: A websockets based MQTT Client for your browser.
　https://github.com/hivemq/hivemq-mqtt-web-client?tab=readme-ov-file

さらに、それについてのデモページがあり、以下にアクセスするだけで簡単に試せます。

●MQTT Websocket Client
　https://www.hivemq.com/demos/websocket-client/

ChatGPT（GPT-4o）に作ってもらった MQTTクライアント

もう 1つの ChatGPT（GPT-4o）に作ってもらった MQTTクライアントについても軽く説明します。

ChatGPT（GPT-4o）を使って、以下のプロンプトで HTML を作ってもらいました。

プロンプト
1. HTMLでmqtt.jsを使ってMQTTクライアントを作ります。どんな要素／機能がページに必要？
2. bulmaを使って

プロンプトでは、まずはライブラリを指定した MQTTクライアントの作成を依頼し（※ 要素、機能について回答してもらいつつ）、さらに追加の内容として、「CSSフレームワークの Bulma」を使ってもらうように書きました。

　
最終的に出力された内容は以下のとおりです。ざっと内容を見た感じでは、問題はなさそうです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MQTT Client</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">MQTT Client</h1>

      <!-- Connection Form -->
      <div class="box">
        <h2 class="subtitle">Connect to Broker</h2>
        <div class="field">
          <label class="label" for="brokerUrl">Broker URL</label>
          <div class="control">
            <input class="input" type="text" id="brokerUrl" placeholder="ws://broker.hivemq.com:8000/mqtt">
          </div>
        </div>
        <div class="field">
          <label class="label" for="clientId">Client ID</label>
          <div class="control">
            <input class="input" type="text" id="clientId" placeholder="clientId">
          </div>
        </div>
        <div class="control">
          <button class="button is-primary" id="connectButton">Connect</button>
        </div>
      </div>

      <!-- Subscription Form -->
      <div class="box">
        <h2 class="subtitle">Subscribe to Topic</h2>
        <div class="field">
          <label class="label" for="subscribeTopic">Subscribe Topic</label>
          <div class="control">
            <input class="input" type="text" id="subscribeTopic" placeholder="topic">
          </div>
        </div>
        <div class="control">
          <button class="button is-link" id="subscribeButton">Subscribe</button>
        </div>
      </div>

      <!-- Publish Form -->
      <div class="box">
        <h2 class="subtitle">Publish Message</h2>
        <div class="field">
          <label class="label" for="publishTopic">Publish Topic</label>
          <div class="control">
            <input class="input" type="text" id="publishTopic" placeholder="topic">
          </div>
        </div>
        <div class="field">
          <label class="label" for="publishMessage">Message</label>
          <div class="control">
            <input class="input" type="text" id="publishMessage" placeholder="message">
          </div>
        </div>
        <div class="control">
          <button class="button is-success" id="publishButton">Publish</button>
        </div>
      </div>

      <!-- Messages Area -->
      <div class="box">
        <h2 class="subtitle">Messages</h2>
        <div class="content" id="messages" style="height: 200px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px;"></div>
      </div>
    </div>
  </section>

  <script>
    let client;

    document.getElementById('connectButton').addEventListener('click', () => {
      const brokerUrl = document.getElementById('brokerUrl').value;
      const clientId = document.getElementById('clientId').value;
      client = mqtt.connect(brokerUrl, { clientId });

      client.on('connect', () => {
        console.log('Connected');
        document.getElementById('messages').innerHTML += '<p>Connected to broker</p>';
      });

      client.on('message', (topic, message) => {
        const msg = document.createElement('p');
        msg.textContent = `Topic: ${topic}, Message: ${message.toString()}`;
        document.getElementById('messages').appendChild(msg);
      });

      client.on('error', (err) => {
        console.log('Connection error: ', err);
        document.getElementById('messages').innerHTML += `<p>Connection error: ${err}</p>`;
      });
    });

    document.getElementById('subscribeButton').addEventListener('click', () => {
      const topic = document.getElementById('subscribeTopic').value;
      client.subscribe(topic, (err) => {
        if (err) {
          document.getElementById('messages').innerHTML += `<p>Subscription error: ${err}</p>`;
        } else {
          document.getElementById('messages').innerHTML += `<p>Subscribed to: ${topic}</p>`;
        }
      });
    });

    document.getElementById('publishButton').addEventListener('click', () => {
      const topic = document.getElementById('publishTopic').value;
      const message = document.getElementById('publishMessage').value;
      client.publish(topic, message, (err) => {
        if (err) {
          document.getElementById('messages').innerHTML += `<p>Publish error: ${err}</p>`;
        } else {
          document.getElementById('messages').innerHTML += `<p>Published to: ${topic}, Message: ${message}</p>`;
        }
      });
    });
  </script>
</body>
</html>

これを HTMLファイルとして保存してブラウザで開いたところ、以下のようにシンプルな MQTTクライアントが表示されました。

（完全に余談ですが、MQTTブローカーの接続先を入力するボックスの placeholder のところに、broker.hivemq.com と、HiveMQ が提供するパブリックな MQTTブローカーが偶然出てきていました ← 他にも有名どころのパブリックな MQTTブローカーはいくつかあったと思われるけれど）