前端调用 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