探究JSMQTT技術

一、MQTT協議介紹

MQTT(Message Queue Telemetry Transport)是一種輕量級的通信協議，其特點是簡單、輕便、有些時候還比HTTP通訊更加可靠。MQTT使用發布/訂閱(publish/subscriber)消息模式，用於連接分散式設備，讓它們能夠有效地進行數據傳輸。

與HTTP通訊協議不同的是，MQTT協議採用了二進位流請求頭與MQTT報文進行通訊。相比較HTTP通訊, MQTT更加緊湊、傳輸速度更快、並且具備實時性支持。MQTT協議適用於多種設備和應用場景，例如：智能家居、汽車和工業自動化等。

const mqtt = require('mqtt')
const client  = mqtt.connect('mqtt://localhost')

client.on('connect', function () {
  client.subscribe('presence', function (err) {
    if (!err) {
      client.publish('presence', 'Hello mqtt')
    }
  })
})

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

二、JSMQTT介紹

JSMQTT是一個基於JavaScript的MQTT庫，採用標準的MQTT協議並最小化依賴，具有很多先進的功能和優點。JSMQTT庫允許開發人員以貨車車隊(pipeline)的形式訂閱和發布消息,對於大規模消息傳輸或進程處理應用非常有利。

使用JSMQTT庫能夠很快地快速實現與MQTT消息協議的通信。特別是在移動設備或者瀏覽器中使用JSMQTT，可以更加靈活性地響應用戶輸入。

三、JSMQTT應用示例

下面是一個簡單的用於控制設備的JSMQTT示例。我的設備是一個RGB LED燈，具有三個顏色通道：紅色，綠色和藍色。通過MQTT發布消息來交互。

首先，我們需要設置一個常量，表示現在我們需要連接到哪個伺服器。在這個例子中，我們將使用的是測試MQTT伺服器，mosquitto.org伺服器的公共地址（port 1883）。

const SERVER = 'mqtt://test.mosquitto.org:1883'

然後，我們要實例化一個新的JSMQTT客戶端。我們將使用connect（）方法並傳入使用的伺服器的地址，然後在open事件上綁定回調函數。這個回調函數可以簡單地發送帶有顏色值的數據包到伺服器，並回顯收到的數據包。

var client = mqtt.connect(SERVER);

client.on('connect', function () {
  // 設置三個通道
  var redChannel = 'led/red';
  var greenChannel = 'led/green';
  var blueChannel = 'led/blue';

  //訂閱三個通道，並顯示信息
  client.subscribe(redChannel, function () {
    client.publish(redChannel, 'Hello mqtt')
  })
  client.subscribe(greenChannel, function () {
    client.publish(greenChannel, 'Hello mqtt')
  })
  client.subscribe(blueChannel, function () {
    client.publish(blueChannel, 'Hello mqtt')
  })

  client.on('message', function (topic, message) {
    var value = message.toString();
    console.log(topic + ': ' + value);
  })
})

最後，我們可以通過網頁上的表單控制項來控制我們的設備。我們使用白色canvas元素作為容器來控制顏色，並在每次顏色修改時向JSMQTT伺服器發送更新。

<canvas id="colorPicker" width="300" height="300"></canvas>
<input type="range" id="redSlider" value="0" min="0" max="255" />
<input type="range" id="greenSlider" value="0" min="0" max="255" />
<input type="range" id="blueSlider" value="0" min="0" max="255" />

<script>
  var colorPicker = document.getElementById('colorPicker');
  var redSlider = document.getElementById('redSlider');
  var greenSlider = document.getElementById('greenSlider');
  var blueSlider = document.getElementById('blueSlider');
  
  // 將RGB值轉化hex顏色並發布到伺服器中
  function updateColor(r, g, b) {
    var color = (r << 16) + (g << 8) + b;
    var colorHex = '#' + color.toString(16);
    console.log(colorHex);
    client.publish('color/set', colorHex);
  }
  
  //獲取RGB值來更新顏色
  function getRGBColor() {
    var imageData = colorPicker.getContext('2d').getImageData(0, 0, 300, 300);
    var data = imageData.data;
    var r = 0, g = 0, b = 0;
    for (var i = 0, n = data.length; i < n; i += 4) {
      r += data[i];
      g += data[i + 1];
      b += data[i + 2];
    }
    var total = imageData.width * imageData.height;
    r = Math.round(r / total);
    g = Math.round(g / total);
    b = Math.round(b / total);
    redSlider.value = r;
    greenSlider.value = g;
    blueSlider.value = b;
    return { r: r, g: g, b: b };
  }
  
  //更新RGB值及顏色
  function updateRGBColor() {
    var color = getRGBColor();
    updateColor(color.r, color.g, color.b);
  }
  
  //綁定事件
  colorPicker.addEventListener('touchmove', function (e) {
    e.preventDefault();
    updateRGBColor();
  }, false);
  
  redSlider.addEventListener('change', updateRGBColor, false);
  greenSlider.addEventListener('change', updateRGBColor, false);
  blueSlider.addEventListener('change', updateRGBColor, false);
</script>

四、小結

在這篇文章中，我們深入探究了MQTT協議，並學習了如何使用JSMQTT庫來實現與MQTT消息協議的通信。特別是本文提供的示例，可以幫助讀者更好地了解MQTT協議的應用場景。希望這篇文章能夠為讀者提供實用的幫助，讓大家更好地應用MQTT技術。