The front end calls mqtt, suitable for webpack projects such as vue and react
Introduction: MQTT (Message Queue Telemetry Transport): telemetry transport protocol, which mainly provides two message modes of subscription/publishing, which is simpler, lighter, and easy to use, especially suitable for restricted environments (low bandwidth, high network latency, The message distribution of unstable network communication is a standard transmission protocol of the Internet of Thing. Because the company develops smart face recognition projects, the following practice is a simplified version of the company's project.
This article github source address
Here are the implementation steps
1. Project dependencies: (install first, steps omitted)
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. Project directory structure
3.node implements server and client
Server 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 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()
})
Then run the server in the console
node ./server/index.js
Output Mosca server is up and runningrepresents a server running success
Then run the client in the console
node ./client/index.js
Output Hello mqttmeans that the client and server connection is successful
At this time, looking at the console running server/index.js, the following output will appear, indicating that the server has accepted the client's connection
4.node implements the server and uses webpack to implement the front-end client
Server server/web.js
The server/index.jsmain difference is that the configuration of settings is different
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()
})
Then run the server in the console
node ./server/web.js
Output Mosca server is up and runningrepresents a server running success
Then run the client in the console
npm run dev
In the browser console, the following output will indicate that the client and server are successfully connected
At this time, when looking at the console running server/web.js, there will be the following output, indicating that the server has accepted the client's connection
Reference link