前端调用 mqtt，适用于 vue，react 等 webpack 项目
简介：MQTT (Message Queue Telemetry Transport)：遥测传输协议，其主要提供了订阅/发布两种消息模式，更为简约、轻量，易于使用，特别适合于受限环境（带宽低、网络延迟高、网络通信不稳定）的消息分发，属于物联网（Internet of Thing）的一个标准传输协议。因公司开发智能人脸识别项目用到，以下实践是公司项目的一个简版。
下面是实现步骤
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 的控制台会有以下输出，表示服务端接受到了客户端的连接
参考链接