@operato/scene-mqtt 0.1.3

package/helps/scene/component/mqtt.ko.md

@@ -0,0 +1,110 @@
+# MQTT
+
+MQTT broker에 연결되어, 설정된 topic 데이터를 publish/subscribe하는 데이타소스 컴포넌트이다.
+
+- [MQTT 웹소켓 프로토콜](http://www.steves-internet-guide.com/mqtt-websockets/)를 사용한다.
+- publish
+  - 이 컴포넌트의 value를 변경하면, 설정된 topic으로 value를 publish한다.
+- subscribe
+  - 설정된 topic으로 subscribe되는 데이타를 서브스크라이브해서 data를 변경한다.
+  - data가 변경되면 데이타바인딩이 작동한다.
+
+## properties
+
+### MQTT 브로커로 mosquitto를 사용한 경우
+
+- broker : hostname of the broker
+- port : websocket service port number (default 1884)
+- path : '/mqtt'
+- user : username or blank
+- password : password or blank
+- topic : topic
+- qos : QOS level [0, 1, 2]
+- client-id : (unique) client id
+
+```
+클라이언트 아이디는 (브로커 입장에서) 유일한 연결 노드의 이름을 의미하며, 브로커에서 모니터링하기 위한 용도로 유일하게 적어준다.
+클라이언트 아이디 속성을 비워두면, 자동으로 'THINGS-BOARD-{role}-{timestamp}‘로 자동 생성된다.
+클라이언트 아이디 속성을 입력하면, 자동으로 '{client-id}-{role}-{timestamp}'로 자동 생성된다.
+클라이언트 아이디 속성에 timestamp를 추가하는 이유는, 유일한 아이디를 만들기 위해서이다.
+```
+
+- data-format : [Plain Text, JSON]
+- retain : true or false
+- ssl : true or false (false)
+
+### RabbitMQ의 MQTT-Websocket 플러그인을 사용한 경우
+
+- broker : hostname of the broker
+- port : websocket service port number (default 15675)
+- path : '/ws'
+- user : username or blank
+- password : password or blank
+- topic : topic
+- qos : QOS level [0, 1, 2]
+- client-id : (unique) client id
+
+```
+클라이언트 아이디는 (브로커 입장에서) 유일한 연결 노드의 이름을 의미하며, 브로커에서 모니터링하기 위한 용도로 유일하게 적어준다.
+클라이언트 아이디 속성을 비워두면, 자동으로 'THINGS-BOARD-{role}-{timestamp}‘로 자동 생성된다.
+클라이언트 아이디 속성을 입력하면, 자동으로 '{client-id}-{role}-{timestamp}'로 자동 생성된다.
+클라이언트 아이디 속성에 timestamp를 추가하는 이유는, 유일한 아이디를 만들기 위해서이다.
+```
+
+- data-format : [Plain Text, JSON]
+- retain : true or false
+- ssl : true or false (false)
+
+## Rabbit MQ의 MQTT-Websocket 플러그인을 사용하는 경우 메시지 Exchange
+
+```
+When using the MQTT-Websocket plugin of Rabbit MQ,
+It is routed by a durable'topic' type of'amq.topic' exchange.
+Therefore, the topic attribute of the MQTT Data Source above serves as a routing key.
+
+To be able to receive from MQTT Data Source using AMQP of Rabbit MQ,
+See the javascript sample code below.
+```
+
+```
+var amqp = require('amqplib/callback_api');
+
+amqp.connect('amqp://hatiolab:hatiolab@mq.hatiolab.com', function(err, conn) {
+  if(err) {
+    console.error(err);
+    return;
+  }
+
+  conn.createChannel(function (err, ch) {
+    // Set the exchange to amq.topic and set the durable option to true.
+    var ex = 'amq.topic';
+
+    ch.assertExchange(ex, 'topic', { durable: true });
+
+    var location = {
+      x: 100,
+      y: 200
+    };
+
+    // When the topic property is set to location.
+    ch.publish(ex, 'location', new Buffer(JSON.stringify(location)));
+  });
+});
+```
+
+## Creating an MQTT environment with mosquitto (based on macOS)
+
+### MQTT 브로커로 mosquitto 설치하기
+
+- homebrew를 이용해서 mosquitto를 설치한다.
+
+```
+$ brew install mosquitto
+```
+
+- Things Scene은 브라우저용이므로, MQTT 브로커에 웹소켓으로 접속할 수 있어야 한다. 그래서, mosquitto에 웹서비스 기능을 활성화한다.
+
+```
+$ echo -e "listener 1884\nprotocol websockets\nlistener 1883\nprotocol mqtt" >> /usr/local/opt/mosquitto/etc/mosquitto/mosquitto.conf
+$ brew services restart mosquitto
+```

package/helps/scene/component/mqtt.md

@@ -0,0 +1,110 @@
+# MQTT
+
+It is a data source component that connects to the MQTT broker and publishes/subscribes to the topic data set.
+
+- Use [MQTT Websockets Protocol](http://www.steves-internet-guide.com/mqtt-websockets/).
+- Publish
+    -When the value of this component is changed, the value will be published to the set topic.
+- Subscribe
+    -Subscribe to subscribed topic data and change the data.
+    -When data is changed, data binding is valid.
+
+## properties
+
+### When using mosquitto as MQTT broker
+
+- broker : hostname of the broker
+- port : websocket service port number (default 1884)
+- path : '/mqtt'
+- user : username or blank
+- password : password or blank
+- topic : topic
+- qos : QOS level [0, 1, 2]
+- client-id : (unique) client id
+
+```
+The client ID refers to the name of the only connected node (from the broker's point of view), and it is uniquely written for monitoring in the broker.
+If the client ID attribute is left blank, it is automatically created as'THINGS-BOARD-{role}-{timestamp}'.
+When the client ID attribute is entered, it is automatically created as'{client-id}-{role}-{timestamp}'.
+The reason for adding timestamp to the client ID attribute is to create a unique ID.
+```
+
+- data-format : [Plain Text, JSON]
+- retain : true or false
+- ssl : true or false (false)
+
+### When using RabbitMQ's MQTT-Websocket plugin
+
+- broker : hostname of the broker
+- port : websocket service port number (default 15675)
+- path : '/ws'
+- user : username or blank
+- password : password or blank
+- topic : topic
+- qos : QOS level [0, 1, 2]
+- client-id : (unique) client id
+
+```
+The client ID refers to the name of the only connected node (from the broker's point of view), and it is uniquely written for monitoring in the broker.
+If the client ID attribute is left blank, it is automatically created as'THINGS-BOARD-{role}-{timestamp}'.
+When the client ID attribute is entered, it is automatically created as'{client-id}-{role}-{timestamp}'.
+The reason for adding timestamp to the client ID attribute is to create a unique ID.
+```
+
+- data-format : [Plain Text, JSON]
+- retain : true or false
+- ssl : true or false (false)
+
+### Message exchange when using Rabbit MQ's MQTT-Websocket plug-in
+
+```
+使用Rabbit MQ的MQTT-Websocket插件时，
+由durable 'topic'类型的“ amq.topic”的exchange来路由。
+因此，上述MQTT数据源的主题属性用作路由键。
+
+为了从Rabbit MQ的AMQP获取MQTT Data Source，
+请参见下面的javascript示例代码。
+```
+
+```js
+var amqp = require('amqplib/callback_api');
+
+amqp.connect('amqp://hatiolab:hatiolab@mq.hatiolab.com', function(err, conn) {
+  if(err) {
+    console.error(err);
+    return;
+  }
+
+  conn.createChannel(function (err, ch) {
+    // Set the exchange to amq.topic and set the durable option to true.
+    var ex = 'amq.topic';
+
+    ch.assertExchange(ex, 'topic', { durable: true });
+
+    var location = {
+      x: 100,
+      y: 200
+    };
+
+    // When the topic property is set to location.
+    ch.publish(ex, 'location', new Buffer(JSON.stringify(location)));
+  });
+});
+```
+
+## Creating an MQTT environment with mosquitto (based on macOS)
+
+### Install mosquitto as MQTT broker
+
+- Use homebrew to install mosquitto.
+
+```
+$ brew install mosquitto
+```
+
+- Things Scene is executed in the browser, so it needs to connect to the MQTT proxy via Web Socket. Therefore, you need to enable the Web service function in mosquitto.
+
+```sh
+$ echo -e "listener 1884\nprotocol websockets\nlistener 1883\nprotocol mqtt" >> /usr/local/opt/mosquitto/etc/mosquitto/mosquitto.conf
+$ brew services restart mosquitto
+```

package/helps/scene/component/mqtt.zh.md

@@ -0,0 +1,108 @@
+# MQTT
+
+是连接到MQTT代理并发布/订阅设置的主题数据的数据源组件。
+
+- 使用 [MQTT Websockets协议](http://www.steves-internet-guide.com/mqtt-websockets/)。
+- 发布
+   - 更改此组件的值时，该值将发布到设置的主题。
+- 订阅
+   - 订阅预订的主题数据并更改数据。
+   - 更改数据时，数据绑定有效。
+
+## properties
+
+### 使用mosquitto作为MQTT代理时
+
+- 代理 : hostname of the broker
+- 端口 : websocket service port number (default 1884)
+- 路径 : '/mqtt'
+- 用户 : username or blank
+- 密码 : password or blank
+- 主题 : topic
+- qos : QOS level [0, 1, 2]
+- 客户端ID : (unique) client id
+
+```
+从代理的角度来看，客户端ID是指唯一连接的节点的名称。
+如果客户端ID属性留空，则会自动将其创建为“ THINGS-BOARD- {role}-{timestamp}”。
+输入客户ID属性后，系统会自动将其创建为“ {client-id}-{role}-{timestamp}”。
+```
+
+- 数据格式 : [Plain Text, JSON]
+- 保持 : true or false
+- ssl : true or false (false)
+
+### 使用RabbitMQ的MQTT-Websocket插件时
+
+- 代理 : hostname of the broker
+- 端口 : websocket service port number (default 15675)
+- 路径 : '/ws'
+- 用户 : username or blank
+- 密码 : password or blank
+- 主题 : topic
+- qos : QOS level [0, 1, 2]
+- 客户端ID : (unique) client id
+
+```
+从代理的角度来看，客户端ID是指唯一连接的节点的名称。
+如果客户端ID属性留空，则会自动将其创建为“ THINGS-BOARD- {role}-{timestamp}”。
+输入客户ID属性后，系统会自动将其创建为“ {client-id}-{role}-{timestamp}”。
+```
+
+- 数据格式 : [Plain Text, JSON]
+- 保持 : true or false
+- ssl : true or false (false)
+
+### 使用Rabbit MQ的MQTT-Websocket插件时的消息交换
+
+```
+使用Rabbit MQ的MQTT-Websocket插件时，
+由durable 'topic'类型的“ amq.topic”的exchange来路由。
+因此，上述MQTT数据源的主题属性用作路由键。
+
+为了从Rabbit MQ的AMQP获取MQTT Data Source，
+请参见下面的javascript示例代码。
+```
+
+```js
+var amqp = require('amqplib/callback_api');
+
+amqp.connect('amqp://hatiolab:hatiolab@mq.hatiolab.com', function(err, conn) {
+  if(err) {
+    console.error(err);
+    return;
+  }
+
+  conn.createChannel(function (err, ch) {
+    // exchange配置为amq.topic, durable option为true.
+    var ex = 'amq.topic';
+
+    ch.assertExchange(ex, 'topic', { durable: true });
+
+    var location = {
+      x: 100,
+      y: 200
+    };
+
+    // topic属性为location时
+    ch.publish(ex, 'location', new Buffer(JSON.stringify(location)));
+  });
+});
+```
+
+## 使用mosquitto创建MQTT环境（基于macOS）
+
+### 将mosquitto安装为MQTT代理
+
+- 使用homebrew安装mosquitto。
+
+```sh
+$ brew install mosquitto
+```
+
+- Things Scene执行于浏览器，因此需要能够通过Web Socket连接到MQTT代理。 因此，需要在mosquitto中启用Web服务功能。
+
+```sh
+$ echo -e "listener 1884\nprotocol websockets\nlistener 1883\nprotocol mqtt" >> /usr/local/opt/mosquitto/etc/mosquitto/mosquitto.conf
+$ brew services restart mosquitto
+```

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@operato/scene-mqtt",
+  "version": "0.1.3",
+  "description": "MQTT integration component for things-scene",
+  "things-scene": true,
+  "browser": "src/index.js",
+  "author": "heartyoh",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/mqtt"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^2.7.33",
+    "mqtt": "^4.3.4"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.3.20",
+    "@things-factory/builder": "^4.0.38",
+    "@things-factory/operato-board": "^4.0.38",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "f3275af95afaf8389224e1e507df6155cbf39382"
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as Mqtt } from './mqtt'

package/src/mqtt.ts

@@ -0,0 +1,245 @@
+import mqtt from 'mqtt'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, DataSource, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'broker',
+      name: 'broker',
+      placeholder: 'WebSocket hostname'
+    },
+    {
+      type: 'number',
+      label: 'port',
+      name: 'port',
+      placeholder: '15675'
+    },
+    {
+      type: 'string',
+      label: 'path',
+      name: 'path',
+      placeholder: '/mqtt or /ws'
+    },
+    {
+      type: 'string',
+      label: 'user',
+      name: 'user'
+    },
+    {
+      type: 'string',
+      label: 'password',
+      name: 'password',
+      property: 'password'
+    },
+    {
+      type: 'string',
+      label: 'topic',
+      name: 'topic'
+    },
+    {
+      type: 'number',
+      label: 'qos',
+      name: 'qos',
+      placeholder: '0..2'
+    },
+    {
+      type: 'string',
+      label: 'client-id',
+      name: 'clientId'
+    },
+    {
+      type: 'select',
+      label: 'data-format',
+      name: 'dataFormat',
+      property: {
+        options: [
+          {
+            display: 'Plain Text',
+            value: 'text'
+          },
+          {
+            display: 'JSON',
+            value: 'json'
+          }
+        ]
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'retain',
+      name: 'retain'
+    },
+    {
+      type: 'checkbox',
+      label: 'ssl',
+      name: 'ssl'
+    }
+  ],
+  'value-property': 'message',
+  help: 'scene/component/mqtt'
+}
+
+const MQTT_IMAGE =
+  'data:image/png;base64,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'
+
+export default class Mqtt extends DataSource(RectPath(Shape)) {
+  private static _image: HTMLImageElement
+
+  private _client?: mqtt.MqttClient
+
+  static get image() {
+    if (!Mqtt._image) {
+      Mqtt._image = new Image()
+      Mqtt._image.src = MQTT_IMAGE
+    }
+
+    return Mqtt._image
+  }
+
+  ready() {
+    super.ready()
+
+    if (!this.app.isViewMode) return
+
+    this._initMqttConnection()
+  }
+
+  _initMqttConnection() {
+    try {
+      this._client && this._client.end(true, () => {})
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+
+    var {
+      broker,
+      port = 8441,
+      clientId = 'THINGS-FACTORY',
+      topic,
+      qos = 1,
+      retain = false,
+      path = '/mqtt',
+      dataFormat = 'text',
+      user,
+      password,
+      ssl = false
+    } = this.model
+
+    if (!broker) {
+      console.warn('broker not defined')
+      return
+    }
+
+    clientId = [clientId, Date.now()].join('-')
+
+    var client = mqtt.connect(`ws://${broker}:${port}${path}`, {
+      keepalive: 10,
+      clientId,
+      protocolId: 'MQTT',
+      protocolVersion: 4,
+      clean: true,
+      reconnectPeriod: 1000,
+      connectTimeout: 30 * 1000,
+      will: {
+        topic: 'WillMsg',
+        payload: 'Connection Closed abnormally..!',
+        qos: 0,
+        retain: false
+      },
+      username: user,
+      password: password,
+      rejectUnauthorized: false
+    })
+
+    client.on('error', err => {
+      console.error(err)
+      client.end()
+    })
+
+    client.on('connect', packet => {
+      console.log('client connected:', clientId, packet)
+
+      client.subscribe(
+        topic,
+        {
+          qos
+        },
+        (err, granted) => {
+          if (!err) {
+            console.error('subscription failed', err)
+          } else {
+            console.log('mqtt subscription success for topic - ', topic)
+          }
+        }
+      )
+    })
+
+    client.on('message', (topic, message, packet) => {
+      this.data = this._convertDataFormat(message.toString(), dataFormat)
+    })
+
+    client.on('close', () => {
+      console.log(clientId + ' disconnected')
+    })
+
+    this._client = client
+  }
+
+  dispose() {
+    try {
+      this._client && this._client.end(true, () => {})
+    } catch (e) {
+      console.error(e)
+    }
+    delete this._client
+
+    super.dispose()
+  }
+
+  _draw(context: CanvasRenderingContext2D): void {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, Mqtt.image, left, top, width, height)
+  }
+
+  get message() {
+    return this.getState('message')
+  }
+
+  set message(message) {
+    this.setState('message', message)
+  }
+
+  onchange(after: Properties, before: Properties): void {
+    if ('message' in after) {
+      const { message } = after
+
+      if (!this._client || !this._client.connected) {
+        return
+      }
+
+      var { topic } = this.state
+
+      this._client.publish(topic, JSON.stringify(message), {
+        qos: 0,
+        retain: false
+      })
+    }
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('mqtt', Mqtt)