前端調用 mqtt，適用於 vue，react 等 webpack 項目

前端調用 mqtt，適用於 vue，react 等 webpack 項目

簡介：MQTT (Message Queue Telemetry Transport)：遙測傳輸協議，其主要提供了訂閱/發佈兩種消息模式，更爲簡約、輕量，易於使用，特別適合於受限環境（帶寬低、網絡延遲高、網絡通信不穩定）的消息分發，屬於物聯網（Internet of Thing）的一個標準傳輸協議。因公司開發智能人臉識別項目用到，以下實踐是公司項目的一個簡版。

本文github 源碼地址

下面是實現步驟

1.項目依賴：（先安裝，步驟略）
package.json

{
  "name": "mqtt-project",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --watch",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^4.0.3",
    "mosca": "^2.8.3",
    "mqtt": "^3.0.0",
    "msgpack-lite": "^0.1.26",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

2.項目目錄結構

3.node 實現服務端和客戶端

服務端 server/index.js

const mosca = require('mosca')

const ascoltatore = {}

const settings = {
  port: 1888,
  backend: ascoltatore
}

const server = new mosca.Server(settings)

server.on('clientConnected', function(client) {
  console.log('client connected', client.id)
})

// fired when a message is received
server.on('published', function(packet, client) {
  console.log('Published', packet.payload)
})

server.on('ready', setup)

// fired when the mqtt server is ready
function setup() {
  console.log('Mosca server is up and running')
}

客戶端 client/index.js

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

client.on('connect', function() {
  // 訂閱消息
  client.subscribe('presence')
  // 發佈消息
  client.publish('presence', 'Hello mqtt')
})

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

然後在控制檯運行服務端

 node ./server/index.js

輸出 Mosca server is up and running 表示服務端運行成功

然後在控制檯運行客戶端

 node ./client/index.js

輸出 Hello mqtt 表示客戶端和服務端連接成功

此時在看運行 server/index.js 的控制檯會有以下輸出，表示服務端接受到了客戶端的連接

4.node 實現服務端和和利用 webpack 實現前端客戶端

服務端 server/web.js

和server/index.js主要區別是 settings 的配置不一樣

const mosca = require('mosca')

const ascoltatore = {}

const settings = {
  http: {
    port: 1888,
    bundle: true,
    static: './'
  },
  backend: ascoltatore
}

const server = new mosca.Server(settings)

server.on('clientConnected', function(client) {
  console.log('客戶端已連接', client.id)
})

// fired when a message is received
server.on('published', function(packet, client) {
  console.log('Published', packet.payload)
})

server.on('ready', setup)

// fired when the mqtt server is ready
function setup() {
  console.log('Mosca server is up and running')
}

web端 main.js

import mqtt from 'mqtt'
import msgpack from 'msgpack-lite'

const client = mqtt.connect('mqtt://127.0.0.1:1888')

client.on('connect', function() {
  client.subscribe('getInfo')
  client.publish(
    'getInfo',
    msgpack.encode({ name: '你好', list: [0, 1, 2, 3, 4, 5, 6] })
  )
})

client.on('message', function(topic, message) {
  // message is Buffer
  const msg = msgpack.decode(message) // decode from MessagePack (Buffer) to JS Object
  console.log(msg)
  client.end()
})

然後在控制檯運行服務端

 node ./server/web.js

輸出 Mosca server is up and running 表示服務端運行成功

然後在控制檯運行客戶端

 npm run dev

在瀏覽器控制檯會有以下輸出表示客戶端和服務端連接成功

此時在看運行 server/web.js 的控制檯會有以下輸出，表示服務端接受到了客戶端的連接

參考鏈接

1.https://github.com/mqttjs/MQTT.js

2.https://github.com/moscajs/mosca