MQTT.jsは、Paho.jsと異なり、標準TCPソケットをサポートしているため、Node.jsでも利用できる。
ただし、npmモジュールとして提供されており、Node.js用のcommonjs形式のため、そのままではWebブラウザでは利用できない。
本記事では、MQTT.jsをAMD形式に変換し、Node.jsだけでなくWebブラウザでも利用できるようにする。
本対応により、WebブラウザとNode.jsで兼用のクライアントコードを作成できる。

TypeScriptによるMQTTクライアント

MQTT.jsを使うと、Node.js向けとWebブラウザ向けで実装は共通にできる。
違いはURL。
- 通常のMQTT接続（mqtt://・・・）は、TCPソケットが必要のため、Node.jsのみ有効。
- MQTT over Websocket接続（「ws://・・・」）の場合、Node.jsとWebブラウザ両方で利用できる。
以下はNode.js向け。動作確認後、Webブラウザ向けも掲載する。

src/index.ts

import * as mqtt from 'mqtt'
let client  = mqtt.connect('mqtt://test.mosquitto.org')
client.on('connect', () => {
  client.subscribe('presence')
  client.publish('presence', 'Hello mqtt')
})
 
client.on('message', (topic:String, message:Buffer) => {
  // message is Buffer 
  console.log(message.toString())
  client.end()
})

npm モジュールをインストールする

mqttがMQTTクライアントライブラリ。
「@types/mqtt」はTypeScript用の型定義ファイルを生成する。TypeScriptからmnqtt.jsをインストールする際に必要。
typescript、webpackは後でビルドに利用する。
- ライブラリの配布しやすさを考慮すると、typescriptはグローバルにインストールするのではなくpackage.jsonに依存ライブラリとして追記した方がよい。利用する側がNode.jsをインストールしておけば、それ以外はすべてnpmで取れるようになる。

npm install mqtt --save
npm install @types/mqtt --save-dev
npm install typescript --save-dev
npm install webpack --save-dev

package.jsonは以下の通り。

package.json

{
  "main": "dist/index.js",
  "dependencies": {
    "mqtt": "^2.1.3"
  },
  "devDependencies": {
    "@types/mqtt": "0.0.32",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0"
  }
}

TypeScriptソースコードをビルドする

UMD形式のモジュールを指定しておくと、Node.jsとWebブラウザ兼用にできる。
Webブラウザの互換性を考慮し、ES5として出力する。

tsconfig.json

{
    "compilerOptions": {
        "module": "umd",
        "target": "ES5",
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "outDir": "./dist"
    },
    "exclude": [
        "node_modules"
    ]
}

Node.jsで実行する

MQTTで接続できる。

$ $(npm bin)/tsc -p .
$ node .
Hello mqtt

ソースコードを以下のようにMQTT over Websocketに変更しても、Nodeで実行可能。
ws://の場合、ポート番号を明記する必要あり。

src/index.ts

import * as mqtt from 'mqtt'
let client  = mqtt.connect('ws://test.mosquitto.org:8080')
client.on('connect', () => {
  client.subscribe('presence')
  client.publish('presence', 'Hello mqtt')
})
 
client.on('message', (topic:String, message:Buffer) => {
  // message is Buffer 
  console.log(message.toString())
  client.end()
})

ビルドして、Nodeで実行できることを確認する。

$ $(npm bin)/tsc -p .
$ node .
Hello mqtt

WebpackでMQTT.jsをWebブラウザ用（AMD形式）にビルドする

MQTT.jsはnpmモジュールであり、commonjs形式のため、そのままではWebブラウザで使えない。
WebpackでAMD形式に変換して使う。
Webpackの設定ファイルとして以下を用意する。

webpack.config.js

module.exports = {
  entry: {
    mqtt: __dirname + '/node_modules/mqtt/mqtt.js',
  },
  output: {
    path: __dirname + '/dist',
    filename: "[name].bundle.js",
    libraryTarget: "amd"
  }
};

npm install でMQTT.jsの依存モジュールを一通り取得しておく。
webpackを実行し、依存モジュールを含めて1個のファイルにまとめる。Webブラウザから参照することを考慮して、AMD形式にしている。
出力先ファイルは mqtt.bundle.js になる。

$ npm install node_modules/mqtt
$ $(npm bin)/webpack

Webブラウザで実行する

MQTT.jsをブラウザで参照するにはrequre.jsの設定ファイルが必要。
参照先はAMD形式にまとめたMQTT.js。拡張子の記載は不要。

src/requre_config.js

var require = {
  paths: {
    mqtt: '../dist/mqtt.bundle'
  }
};

Webブラウザから前掲のindex.jsを参照するには、冒頭でrequre_config.jsを参照しておく。
次にdata-mainにindex.jsをインクルードし、srcとしてrequire.jsを指定する。詳細はrequire.jsを参照。

index.html

<html>
<head>
  <title>test Ws mqtt.js</title>
</head>
<body>
<script src="./src/require_config.js"></script>
<script data-main="./dist/index.js" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</body>
</html>

index.htmlを開くとコンソールログが出力されている。