Shulou(Shulou.com)06/02 Report--

This article shows you how to use MQTT in the Vue project, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Install the MQTT client library

Install from the command line:

You can use either the npm or yarn command, either

Npm install mqtt-save

Yarn add mqtt

Introduced through CDN

Download it locally and then use the relative path to introduce

The use of MQTT to connect to MQTT servers

This article will use the free public MQTT server provided by EMQ X, which is based on EMQ X's MQTT Internet of things cloud platform. The server access information is as follows:

Broker: broker.emqx.io

TCP Port: 1883

Websocket Port: 8083

Connect key codes:

Import mqtt from 'mqtt'export default {data () {return {connection: {host:' broker.emqx.io', port: 8083, endpoint:'/ mqtt', clean: true, / / reserved session connectTimeout: 4000, / / timeout reconnectPeriod: 4000 / / reconnection interval / / Authentication information clientId: 'mqttjs_3be2c321', username:' emqx_test', password: 'emqx_test',}, subscription: {topic:' topic/mqttx', qos: 0,}, publish: {topic: 'topic/browser', qos: 0 Payload:'{"msg": "Hello, I am browser."},}, receiveNews:', qosList: [{label: 0, value: 0}, {label: 1, value: 1}, {label: 2, value: 2},], client: {connected: false,}, subscribeSuccess: false,}} Methods: {/ / create connection createConnection () {/ / connection string specified by agreement / / ws unencrypted WebSocket connection / / wss encrypted WebSocket connection / / mqtt unencrypted TCP connection / / mqtts encrypted TCP connection / / wxs WeChat Mini Programs connection / / alis Alipay Mini Program connection const {host, port, endpoint .. options} = this.connection const connectUrl = `ws://$ {host}: ${port} ${endpoint} `try {this.client = mqtt.connect (connectUrl, options)} catch (error) {console.log ('mqtt.connect error', error)} this.client.on (' connect') () = > {console.log ('Connection succeeded')}) this.client.on ('error', error = > {console.log (' Connection failed', error)}) this.client.on ('message', (topic, message) = > {this.receiveNews = this.receiveNews.concat (message) console.log (`Received message ${message} from topic ${topic} `)})} }} subscribe to the topic doSubscribe () {const {topic, qos} = this.subscription this.client.subscribe (topic, qos, (error, res) = > {if (error) {console.log ('Subscribe to topics error', error) return} this.subscribeSuccess = true console.log (' Subscribe to topics res', res)})}, and unsubscribe doUnSubscribe () {const {topic} = this.subscription this.client.unsubscribe (topic) Error = > {if (error) {console.log ('Unsubscribe error', error)}})} message publishing doPublish () {const {topic, qos, payload} = this.publication this.client.publish (topic, payload, qos, error = > {if (error) {console.log (' Publish error') Error)}} disconnect destroyConnection () {if (this.client.connected) {try {this.client.end () this.client = {connected: false,} console.log ('Successfully disconnect)} catch (error) {console.log (' Disconnect failed', error.toString ())} this is how MQTT is used in the Vue project. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.