WebブラウザでパブリックMQTTサーバーに接続

ブローカー　ws://broker.hivemq.com:8000/mqtt

トピック　testaa/topic

## Subscribe

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT Web Client</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<h1>MQTT Web Client</h1>
<script>
        // MQTTブローカーのURL (WebSocket)
        const brokerUrl = 'ws://broker.hivemq.com:8000/mqtt';

        // MQTTクライアントの作成
        const client = mqtt.connect(brokerUrl);

        // 接続時のイベント
        client.on('connect', () => {
            console.log('Connected to MQTT broker');
            // トピックを購読
            client.subscribe('testaa/topic', (err) => {
                if (!err) {
                    console.log('Subscribed to testaa/topic');
                }
            });
        });

        // メッセージ受信時のイベント
        client.on('message', (topic, message) => {
            console.log(`Received message on ${topic}: ${message.toString()}`);
        });

        // エラー時のイベント
        client.on('error', (err) => {
            console.error('Connection error:', err);
        });

        // 切断時のイベント
        client.on('close', () => {
            console.log('Connection closed');
        });
</script>
<hr />
<p>Feb/11/2025 PM 13:59</p>
</body>
</html>
```
## Publish

```html:publish.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT Publish from Web</title>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
<h1>MQTT Publish from Web</h1>
<button id="publishButton">Publish Message</button>
<p id="status"></p>

    <script>
        // WebSocket エンドポイント
        const brokerUrl = 'ws://broker.hivemq.com:8000/mqtt';

        // MQTT クライアントの作成
        const client = mqtt.connect(brokerUrl);

        // 接続時のイベント
        client.on('connect', () => {
            console.log('Connected to MQTT broker');
            document.getElementById('status').innerText = 'Connected to MQTT broker';
        });

        // エラー時のイベント
        client.on('error', (err) => {
            console.error('Connection error:', err);
            document.getElementById('status').innerText = 'Connection error: ' + err.message;
        });

        // ボタンクリック時のイベント
        document.getElementById('publishButton').addEventListener('click', () => {
            const topic = 'testaa/topic'; // トピック名
            const message = 'Hello from Web Browser Feb/11/2025'; // メッセージ内容

            // メッセージをパブリッシュ
            client.publish(topic, message, (err) => {
                if (!err) {
                    console.log('Message published');
                    document.getElementById('status').innerText = `Published: ${message} to ${topic}`;
                } else {
                    console.error('Publish error:', err);
                    document.getElementById('status').innerText = 'Publish error: ' + err.message;
                }
            });
        });
    </script>
</body>
</html>
```

## テスト

```bash
http-server
```

http://127.0.0.1:8081/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/745909cc-2c89-f69c-0777-7f93236803eb.png)

http://127.0.0.1:8081/publish.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3a4f1d55-19d2-707c-59cf-47c11011e921.png)

## Node.js で確認

Publish

```js:publish.js
const mqtt = require('mqtt');

// WebSocket エンドポイント
const brokerUrl = 'ws://broker.hivemq.com:8000/mqtt';

// MQTT クライアントの作成
const client = mqtt.connect(brokerUrl);

client.on('connect', () => {
  console.log('Connected to MQTT broker');

  // メッセージをパブリッシュ
  client.publish('testaa/topic', 'Good Afternoon from MQTT.js', (err) => {
    if (!err) {
      console.log('Message published');
    } else {
      console.error('Publish error:', err);
    }
    client.end(); // 接続を閉じる
  });
});

client.on('error', (err) => {
  console.error('Connection error:', err);
});
```

実行コマンド

```bash
export NODE_PATH=/usr/lib/node_modules
node publish.js
```

Subscribe

```js:subscribe.js
const mqtt = require('mqtt');

// WebSocket エンドポイント
const brokerUrl = 'ws://broker.hivemq.com:8000/mqtt';

// MQTT クライアントの作成
const client = mqtt.connect(brokerUrl);

client.on('connect', () => {
  console.log('Connected to MQTT broker');

  // トピックをサブスクライブ
  client.subscribe('testaa/topic', (err) => {
    if (!err) {
      console.log('Subscribed to testaa/topic');
    }
  });
});

client.on('message', (topic, message) => {
  console.log(`Received message on ${topic}: ${message.toString()}`);
});

client.on('error', (err) => {
  console.error('Connection error:', err);
});
```

実行コマンド

```bash
export NODE_PATH=/usr/lib/node_modules
node subscribe.js
```