El front-end llama mqtt, adecuado para proyectos de paquetes web como vue, react, etc.
Introducción: MQTT (Message Queue Telemetry Transport): protocolo de transporte de telemetría, que proporciona principalmente dos modos de suscripción / publicación de mensajes, que es más simple, más liviano y fácil de usar, especialmente adecuado para entornos restringidos (bajo ancho de banda, alta latencia de red, La distribución de mensajes de la comunicación de red inestable pertenece a un protocolo de transmisión estándar de Internet of Thing. Debido a que la empresa desarrolla proyectos inteligentes de reconocimiento facial, la siguiente práctica es una versión simplificada del proyecto de la empresa.
Este artículo dirección de origen de github
Estos son los pasos de implementación
1. Dependencias del proyecto: (instalar primero, se omiten los pasos)
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. Estructura del directorio del proyecto
3.node implementa servidor y cliente
Servidor 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')
}
Cliente 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()
})
Luego ejecuta el servidor en la consola
node ./server/index.js
La salida Mosca server is up and runningrepresenta un servidor funcionando correctamente
Luego ejecuta el cliente en la consola.
node ./client/index.js
El resultado Hello mqttsignifica que la conexión entre el cliente y el servidor se realizó correctamente
En este momento, mirando la consola que ejecuta server / index.js, aparecerá el siguiente resultado, que indica que el servidor ha aceptado la conexión del cliente.
4.node implementa el servidor y usa webpack para implementar el cliente front-end
Servidor server/web.js
La server/index.jsprincipal diferencia es que la configuración de los ajustes es diferente
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()
})
Luego ejecuta el servidor en la consola
node ./server/web.js
La salida Mosca server is up and runningrepresenta un servidor funcionando correctamente
Luego ejecuta el cliente en la consola.
npm run dev
En la consola del navegador, el siguiente resultado indicará que el cliente y el servidor están conectados correctamente
En este punto, la consola que ejecuta server / web.js tendrá el siguiente resultado, lo que indica que el servidor ha aceptado la conexión del cliente.
Link de referencia