MQTT protocol
MQTT (Message Queuing Telemetry Transport) is an instant messaging protocol developed by IBM and may become an important part of the Internet of Things. The protocol supports all platforms, connects almost all connected items to the outside, and is used as a communication protocol for sensors and brakes (such as networking houses over Twitter).
MQTT is a lightweight proxy-based publish/subscribe messaging protocol that can be connected with very little code and bandwidth and remote devices. For example, through satellite and proxy connection，Connect via dial-up and healthcare provider，and on some automation or small devices，And because of the smallness，Save power，Small protocol overhead and efficiently transmit information to one and multiple recipients，Therefore, it is also applicable to movable applications。
vue uses mqtt server to achieve instant messaging
In most projects, front-end and back-end interaction is just the interface of the front-end requesting back-end, and it will be processed after getting the data. A project I had in my hand some time ago required to use mqtt. After using it, I felt it was amazing. I just need to subscribe to get the data in real time. Without saying much nonsense, my sister will give you steps!
1. Install in vue project
npm install mqtt --save
2. Quoting on the project or on the vue page you need to use
import mqtt from 'mqtt'
3. Define a client object in the data of the vue page for easy use later
client: {}
OK, the next point is the key point. First, we have to connect mqtt. The method of connecting mqtt has a callback function. Next, I will write the subscription method in the callback after the connection is successful, so that there will be no errors. Please enter the code!
4. Connect to mqtt and subscribe
//Connect the server connect() {
let options = {
username: "xxx",
password: "xxxx",
cleanSession : false,
keepAlive:60,
clientId: 'mqttjs_' + ().toString(16).substr(2, 8),
connectTimeout: 4000
}
= ('ws://192.:8083/mqtt',options);
("connect", (e)=>{
("Successfully connected to the server:",e);
//Subscribe to three names called 'top/#', 'three/#' and '#' themes (['top/#', 'three/#', '#'], { qos: 1 }, (err)=> { if (!err) {
("Subscribe successfully");
// Post a message to the topic "pubtop" with the content of 'hello, this is a nice day!' ("pubtop", 'hello,this is a nice day!')
} else {
('Message subscription failed! ')
}
});
});
//Reconnect ()
//Is the connection already disconnected ()
// Listen to get information ()
}
5. Method of publishing messages
//Publish a message @topic topic @messagePublish a content publish(topic,message) {
if (!) {
('Client not connected')
return
}
(topic,message,{qos: 1},(err) => {
if(!err) {
('Theme is'+topic+ "Release Successfully")
}
})
}
6. Listen and receive information on the three topics you subscribed above
// Listen to receive messages getMessage() {
("message", (topic, message) => {
if(message) {
('Received',topic,'Information',())
const res = (())
//(res, 'res')
switch(topic) {
case 'top/#' :
= res
break;
case 'three/#' :
= res
break;
case 'three/#' :
= res
break;
default:
return
= res
}
= message
}
});
},
7. Listen to whether the server connection failed
//Whether the connection failed to be listened to? mqttError() {
('error',(error) => {
('Connection failed:',error)
()
})
},
8. Unsubscribe
//Unsubscribe unsubscribe() {
(, (error)=> {
('Theme is'+ +'Unsubscribe successfully',error)
})
},
9. Disconnect
//Disconnect unconnect() {
()
= null
('The server has been disconnected! ')
},
10. Reconnect the listening server
//Reconnect the listening server reconnect() {
('reconnect', (error) => {
('Reconnecting:', error)
});
},
Summarize
This is the article about using mqtt server to realize instant messaging in vue. This is the end. For more related contents of using mqtt instant messaging in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!