Generally, the MQTT gateway can be defined as an intermediary between any internet of things platform and sensors. It works by getting data from these sensors or smart devices and translating it into MQTT. It then transmits that data to either the internet of things platform or to the MQTT broker.<\/p>\n\n\n\n
The publish\/subscribe pattern<\/strong><\/h3>\n\n\n\nThe publish\/subscribe pattern (also known as pub\/sub) provides an alternative to a traditional client-server architecture. In the client-server model, a client communicates directly with an endpoint. The pub\/sub model decouples the client that sends a message (the publisher) from the client or clients that receive the messages (the subscribers). The publishers and subscribers never contact each other directly. In fact, they are not even aware that the other exists. The connection between them is handled by a third component (the broker). The job of the broker is to filter all incoming messages and distribute them correctly to subscribers.<\/p>\n\n\n\n
MQTT Broker<\/strong><\/h3>\n\n\n\nA broker helps in handling clients in MQTT technology. It can manage hundreds, thousands, or millions of connected MQTT clients at once, depending on the implementation. Its main functions are;<\/p>\n\n\n\n
- Receiving information<\/li>
- Decoding and filtering the messages received<\/li>
- Determining which client will be interested in which message<\/li>
- Transmitting these messages to clients depending on their interests<\/li><\/ul>\n\n\n\n
The project<\/strong><\/h3>\n\n\n\nLet\u2019s make a simple BLE 2 MQTT project that collects sensor data from a BLE Air quality monitor device called HibouAir<\/a> and sends it to a free public MQTT broker.<\/p>\n\n\n\nFor this project, we will use Flespi. You can choose any public or private MQTT broker as you like.<\/p>\n\n\n\n
Steps<\/strong><\/p>\n\n\n\nRequirments <\/strong><\/p>\n\n\n\n- A BleuIO <\/a>dongle.<\/li>
- A air quality monitor device HibouAir<\/a>.<\/li>
- A public MQTT broker (Flepsi token) https:\/\/flespi.com\/mqtt-broker<\/li>
- BleuIO Javascript library. https:\/\/www.npmjs.com\/package\/bleuio<\/li>
- A build tool for Javascript (parcel) https:\/\/parceljs.org\/docs\/<\/li><\/ul>\n\n\n\n
Get the Flespi token<\/strong><\/p>\n\n\n\n- Create an account at Flespi.<\/li>
- Log into the Flespi dashboard.<\/li>
- Copy the token<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/02\/image-3-1024x78-1.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Download source file<\/strong><\/p>\n\n\n\nGet the source file from https:\/\/github.com\/smart-sensor-devices-ab\/ble2mqtt_bleuio.git<\/p>\n\n\n\n
And run npm install<\/strong><\/p>\n\n\n\nIn the root folder, we will see two Html files called index.html and subscribe.html and two js files called pub.js and sub.js<\/p>\n\n\n\n![\"\"](\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2022\/02\/image-4.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Index.html file collects sensor data from a BLE Air quality monitor device called HibouAir <\/strong>with the help of BleuIO<\/strong>. It has three buttons. connect, device info and Scan and Send BLE Data. <\/p>\n\n\n\nFirst we need to connect a BleuIO dongle into the computer and connect to it using connect button. The device info button will show BleuIO dongle status on console log. And the Scan and Send BLE data will scan for Air quality data and send it to the cloud. For this script I am scanning and collecting a fixed device with the board id of 0578E0<\/strong>. You can change the value in pub.js file line number 4<\/p>\n\n\n\nHere is the index.html file<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <link\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\"\n rel=\"stylesheet\"\n integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\"\n crossorigin=\"anonymous\"\n \/>\n <title>Publish<\/title>\n <\/head>\n <body>\n <div class=\"container mt-5\">\n <button id=\"connect\" class=\"btn btn-secondary\">Connect<\/button>\n <button id=\"deviceinfo\" class=\"btn btn-success d-none\">\n Device Info\n <\/button>\n <button id=\"sendData\" class=\"btn btn-primary\">\n Scan and Send BLE Data\n <\/button>\n\n <h3 class=\"mt-5\">Message Sent<\/h3>\n <div id=\"output\"><\/div>\n <\/div>\n <\/body>\n <script src=\".\/pub.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\nAfter collecting advertised data, we try to decode it and get meaningful air quality data with co2, pressure, temperature, humidity, light values. Then we publish the data to Flepsi broker using topic name HibouAirTopic<\/p>\n\n\n\n
The process is done in pub.js file.<\/p>\n\n\n\n
Here is the pub.js file<\/p>\n\n\n\n
const clientId = 'hibouair_' + Math.random().toString(16).substr(2, 8)\nimport * as my_dongle from 'bleuio'\nimport 'regenerator-runtime\/runtime'\nconst sensorID = '0578E0'\nimport * as mqtt from \"mqtt\" \ndocument.getElementById('connect').addEventListener('click', function(){\n my_dongle.at_connect()\n})\ndocument.getElementById('deviceinfo').addEventListener('click', function(){\n my_dongle.ati().then((data)=>console.log(data))\n})\n\nconst getTheBLEData = ( async()=>{\n return my_dongle.at_dual().then(()=>{\n return my_dongle.at_findscandata(sensorID,6).then((x)=>{\n let advData = x[x.length - 1].split(\" \").pop()\n let positionOfID= advData.indexOf(sensorID);\n let tempHex = advData.substring(positionOfID+14, positionOfID+18)\n let temp = parseInt('0x'+tempHex.match(\/..\/g).reverse().join(''))\/10;\n\n let pressHex = advData.substring(positionOfID+10, positionOfID+14)\n let press = parseInt('0x'+pressHex.match(\/..\/g).reverse().join(''))\/10;\n\n let humHex = advData.substring(positionOfID+18, positionOfID+22)\n let hum = parseInt('0x'+humHex.match(\/..\/g).reverse().join(''))\/10;\n\n let lightHex = advData.substring(positionOfID+6, positionOfID+10)\n let light = parseInt('0x'+lightHex.match(\/..\/g).reverse().join(''));\n\n let co2Hex = advData.substring(positionOfID+38, positionOfID+42)\n let co2 = parseInt('0x'+co2Hex);\n \n\n return {\n 'CO2' :co2,\n 'Temp' :temp,\n 'Pressure':press,\n 'Humidity':hum, \n 'Light':light, \n }\n })\n })\n})\n\n\n\n\/\/pass data\ndocument.getElementById('sendData').addEventListener('click', function(){\n const host = 'wss:\/\/mqtt.flespi.io:443'\n\n const options = {\n keepalive: 60,\n clientId: clientId,\n protocolId: 'MQTT',\n username:'SET_YOUR_USERNAME',\n password:'SET_YOUR_PASSWORD',\n protocolVersion: 4,\n clean: true,\n reconnectPeriod: 1000,\n connectTimeout: 30 * 1000,\n will: {\n topic: 'HibouAirMsg',\n payload: 'Connection Closed abnormally..!',\n qos: 0,\n retain: false\n },\n }\n const client = mqtt.connect(host, options)\n client.on('connect',()=>{\n console.log('connected mqtt client',clientId)\n\n })\n\n client.on('error', (err) => {\n console.log('Connection error: ', err)\n client.end()\n })\n\n client.on('reconnect', () => {\n console.log('Reconnecting...')\n })\n\n var topic = 'HibouAirTopic'\n\n \/\/ Publish\n setInterval(() => {\n\n getTheBLEData().then((x)=>{\n client.publish(topic, JSON.stringify(x), { qos: 0, retain: false })\n console.log(\"Message sent!\", JSON.stringify(x));\n document.getElementById('output').innerHTML += JSON.stringify(x)+\"<br>\";\n })\n }, 5000);\n\n })<\/code><\/pre>\n\n\n\nMake sure to set your username and password and change the Board ID of your device on pub.js file.<\/p>\n\n\n\n
Subscribe.html file works as a subscriber which reads sensor data from the broker and shows it on the screen.<\/p>\n\n\n\n
here is the subscribe.html file<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Subscribe<\/title>\n <\/head>\n <body>\n <h3>Message Received<\/h3>\n <div id=\"output\"><\/div>\n <\/body>\n <script src=\"https:\/\/unpkg.com\/mqtt\/dist\/mqtt.min.js\"><\/script>\n\n <script src=\"sub.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\nAgain we need a js script that fetch data from cloud and show it on html file. Here is the sub.js file<\/p>\n\n\n\n
const clientId = 'hibouair_' + Math.random().toString(16).substr(2, 8)\n\n\/\/const host = 'ws:\/\/broker.emqx.io:8083\/mqtt'\nconst host = 'wss:\/\/mqtt.flespi.io:443'\n\nconst options = {\n keepalive: 60,\n clientId: clientId,\n protocolId: 'MQTT',\n username:'YOUR_USERNAME',\n password:'YOUR_PASSWORD',\n protocolVersion: 4,\n clean: true,\n reconnectPeriod: 1000,\n connectTimeout: 30 * 1000,\n will: {\n topic: 'HibouAirMsg',\n payload: 'Connection Closed abnormally..!',\n qos: 0,\n retain: false\n },\n}\n\nconst client = mqtt.connect(host, options)\nclient.on('connect',()=>{\n console.log('connected mqtt client',clientId)\n client.subscribe('HibouAirTopic', { qos: 0 })\n})\nclient.on('error', (err) => {\n console.log('Connection error: ', err)\n client.end()\n})\n\nclient.on('reconnect', () => {\n console.log('Reconnecting...')\n})\n\n\n \n \/\/ Received\nclient.on('message', (topic, message, packet) => {\n console.log(JSON.parse(message))\n \/\/console.log('Received Message: ' + message + '\\nOn topic: ' + topic)\n document.getElementById('output').innerHTML += message.toString()+\"<br>\";\n\n})\n<\/code><\/pre>\n\n\n\nTo run the index.html we can just type<\/p>\n\n\n\n
parcel index.html<\/code><\/pre>\n\n\n\nParcel JS can be installed from https:\/\/parceljs.org\/<\/p>\n\n\n\n
Project Video<\/strong><\/p>\n\n\n\n
A broker helps in handling clients in MQTT technology. It can manage hundreds, thousands, or millions of connected MQTT clients at once, depending on the implementation. Its main functions are;<\/p>\n\n\n\n
- Receiving information<\/li>
- Decoding and filtering the messages received<\/li>
- Determining which client will be interested in which message<\/li>
- Transmitting these messages to clients depending on their interests<\/li><\/ul>\n\n\n\n
The project<\/strong><\/h3>\n\n\n\n
Let\u2019s make a simple BLE 2 MQTT project that collects sensor data from a BLE Air quality monitor device called HibouAir<\/a> and sends it to a free public MQTT broker.<\/p>\n\n\n\n
For this project, we will use Flespi. You can choose any public or private MQTT broker as you like.<\/p>\n\n\n\n
Steps<\/strong><\/p>\n\n\n\n
Requirments <\/strong><\/p>\n\n\n\n
- A BleuIO <\/a>dongle.<\/li>
- A air quality monitor device HibouAir<\/a>.<\/li>
- A public MQTT broker (Flepsi token) https:\/\/flespi.com\/mqtt-broker<\/li>
- BleuIO Javascript library. https:\/\/www.npmjs.com\/package\/bleuio<\/li>
- A build tool for Javascript (parcel) https:\/\/parceljs.org\/docs\/<\/li><\/ul>\n\n\n\n
Get the Flespi token<\/strong><\/p>\n\n\n\n
- Create an account at Flespi.<\/li>
- Log into the Flespi dashboard.<\/li>
- Copy the token<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Download source file<\/strong><\/p>\n\n\n\n
Get the source file from https:\/\/github.com\/smart-sensor-devices-ab\/ble2mqtt_bleuio.git<\/p>\n\n\n\n
And run npm install<\/strong><\/p>\n\n\n\n
In the root folder, we will see two Html files called index.html and subscribe.html and two js files called pub.js and sub.js<\/p>\n\n\n\n
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Index.html file collects sensor data from a BLE Air quality monitor device called HibouAir <\/strong>with the help of BleuIO<\/strong>. It has three buttons. connect, device info and Scan and Send BLE Data. <\/p>\n\n\n\n
First we need to connect a BleuIO dongle into the computer and connect to it using connect button. The device info button will show BleuIO dongle status on console log. And the Scan and Send BLE data will scan for Air quality data and send it to the cloud. For this script I am scanning and collecting a fixed device with the board id of 0578E0<\/strong>. You can change the value in pub.js file line number 4<\/p>\n\n\n\n
Here is the index.html file<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <link\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\"\n rel=\"stylesheet\"\n integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\"\n crossorigin=\"anonymous\"\n \/>\n <title>Publish<\/title>\n <\/head>\n <body>\n <div class=\"container mt-5\">\n <button id=\"connect\" class=\"btn btn-secondary\">Connect<\/button>\n <button id=\"deviceinfo\" class=\"btn btn-success d-none\">\n Device Info\n <\/button>\n <button id=\"sendData\" class=\"btn btn-primary\">\n Scan and Send BLE Data\n <\/button>\n\n <h3 class=\"mt-5\">Message Sent<\/h3>\n <div id=\"output\"><\/div>\n <\/div>\n <\/body>\n <script src=\".\/pub.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\nAfter collecting advertised data, we try to decode it and get meaningful air quality data with co2, pressure, temperature, humidity, light values. Then we publish the data to Flepsi broker using topic name HibouAirTopic<\/p>\n\n\n\n
The process is done in pub.js file.<\/p>\n\n\n\n
Here is the pub.js file<\/p>\n\n\n\n
const clientId = 'hibouair_' + Math.random().toString(16).substr(2, 8)\nimport * as my_dongle from 'bleuio'\nimport 'regenerator-runtime\/runtime'\nconst sensorID = '0578E0'\nimport * as mqtt from \"mqtt\" \ndocument.getElementById('connect').addEventListener('click', function(){\n my_dongle.at_connect()\n})\ndocument.getElementById('deviceinfo').addEventListener('click', function(){\n my_dongle.ati().then((data)=>console.log(data))\n})\n\nconst getTheBLEData = ( async()=>{\n return my_dongle.at_dual().then(()=>{\n return my_dongle.at_findscandata(sensorID,6).then((x)=>{\n let advData = x[x.length - 1].split(\" \").pop()\n let positionOfID= advData.indexOf(sensorID);\n let tempHex = advData.substring(positionOfID+14, positionOfID+18)\n let temp = parseInt('0x'+tempHex.match(\/..\/g).reverse().join(''))\/10;\n\n let pressHex = advData.substring(positionOfID+10, positionOfID+14)\n let press = parseInt('0x'+pressHex.match(\/..\/g).reverse().join(''))\/10;\n\n let humHex = advData.substring(positionOfID+18, positionOfID+22)\n let hum = parseInt('0x'+humHex.match(\/..\/g).reverse().join(''))\/10;\n\n let lightHex = advData.substring(positionOfID+6, positionOfID+10)\n let light = parseInt('0x'+lightHex.match(\/..\/g).reverse().join(''));\n\n let co2Hex = advData.substring(positionOfID+38, positionOfID+42)\n let co2 = parseInt('0x'+co2Hex);\n \n\n return {\n 'CO2' :co2,\n 'Temp' :temp,\n 'Pressure':press,\n 'Humidity':hum, \n 'Light':light, \n }\n })\n })\n})\n\n\n\n\/\/pass data\ndocument.getElementById('sendData').addEventListener('click', function(){\n const host = 'wss:\/\/mqtt.flespi.io:443'\n\n const options = {\n keepalive: 60,\n clientId: clientId,\n protocolId: 'MQTT',\n username:'SET_YOUR_USERNAME',\n password:'SET_YOUR_PASSWORD',\n protocolVersion: 4,\n clean: true,\n reconnectPeriod: 1000,\n connectTimeout: 30 * 1000,\n will: {\n topic: 'HibouAirMsg',\n payload: 'Connection Closed abnormally..!',\n qos: 0,\n retain: false\n },\n }\n const client = mqtt.connect(host, options)\n client.on('connect',()=>{\n console.log('connected mqtt client',clientId)\n\n })\n\n client.on('error', (err) => {\n console.log('Connection error: ', err)\n client.end()\n })\n\n client.on('reconnect', () => {\n console.log('Reconnecting...')\n })\n\n var topic = 'HibouAirTopic'\n\n \/\/ Publish\n setInterval(() => {\n\n getTheBLEData().then((x)=>{\n client.publish(topic, JSON.stringify(x), { qos: 0, retain: false })\n console.log(\"Message sent!\", JSON.stringify(x));\n document.getElementById('output').innerHTML += JSON.stringify(x)+\"<br>\";\n })\n }, 5000);\n\n })<\/code><\/pre>\n\n\n\nMake sure to set your username and password and change the Board ID of your device on pub.js file.<\/p>\n\n\n\n
Subscribe.html file works as a subscriber which reads sensor data from the broker and shows it on the screen.<\/p>\n\n\n\n
here is the subscribe.html file<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Subscribe<\/title>\n <\/head>\n <body>\n <h3>Message Received<\/h3>\n <div id=\"output\"><\/div>\n <\/body>\n <script src=\"https:\/\/unpkg.com\/mqtt\/dist\/mqtt.min.js\"><\/script>\n\n <script src=\"sub.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\nAgain we need a js script that fetch data from cloud and show it on html file. Here is the sub.js file<\/p>\n\n\n\n
const clientId = 'hibouair_' + Math.random().toString(16).substr(2, 8)\n\n\/\/const host = 'ws:\/\/broker.emqx.io:8083\/mqtt'\nconst host = 'wss:\/\/mqtt.flespi.io:443'\n\nconst options = {\n keepalive: 60,\n clientId: clientId,\n protocolId: 'MQTT',\n username:'YOUR_USERNAME',\n password:'YOUR_PASSWORD',\n protocolVersion: 4,\n clean: true,\n reconnectPeriod: 1000,\n connectTimeout: 30 * 1000,\n will: {\n topic: 'HibouAirMsg',\n payload: 'Connection Closed abnormally..!',\n qos: 0,\n retain: false\n },\n}\n\nconst client = mqtt.connect(host, options)\nclient.on('connect',()=>{\n console.log('connected mqtt client',clientId)\n client.subscribe('HibouAirTopic', { qos: 0 })\n})\nclient.on('error', (err) => {\n console.log('Connection error: ', err)\n client.end()\n})\n\nclient.on('reconnect', () => {\n console.log('Reconnecting...')\n})\n\n\n \n \/\/ Received\nclient.on('message', (topic, message, packet) => {\n console.log(JSON.parse(message))\n \/\/console.log('Received Message: ' + message + '\\nOn topic: ' + topic)\n document.getElementById('output').innerHTML += message.toString()+\"<br>\";\n\n})\n<\/code><\/pre>\n\n\n\nTo run the index.html we can just type<\/p>\n\n\n\n
parcel index.html<\/code><\/pre>\n\n\n\nParcel JS can be installed from https:\/\/parceljs.org\/<\/p>\n\n\n\n
Project Video<\/strong><\/p>\n\n\n\n
- A air quality monitor device HibouAir<\/a>.<\/li>
- A BleuIO <\/a>dongle.<\/li>