VueVue是由尤雨熙和他的团队开发的一个渐进式Javascript前端框架。该框架具有双向数据绑定、组件化、响应式、轻量级等特点。借助其脚手架VueCLI，让开发者更容易上手，大大降低学习成本。同时配备了专用的状态管理模式Vuex，可以集中管理所有组件的状态。MQTT是一种基于发布/订阅模型的轻量级物联网消息传输协议。该协议提供一对多的消息分发和应用程序解耦，具有传输消耗和协议数据交换小、网络流量最小化、三种不同的消息服务质量等级以满足不同的传递需求等优点。本文主要介绍如何在Vue项目中使用MQTT实现客户端与MQTT服务端的连接、订阅、收发消息、取消订阅等功能。项目初始化新建项目参考链接如下：使用VueCLI创建Vue项目参考Vue.js创建Vue项目示例：vuecreatevue-mqtt-test安装MQTT客户端库命令行安装：可以使用npm或yarn命令，都选一个npminstallmqtt--saveyarnaddmqtttoimport通过CDN下载本地，然后使用相对路径导入使用MQTT连接MQTT服务器本文将使用提供的免费公共MQTT服务器由EMQX，基于EMQX的MQTT物联网云平台创建。服务器访问信息如下：Broker:broker.emqx.ioTCPPort:1883WebsocketPort:8083Connectionkeycode:订阅主题doSubscribe(){const{topic,qos}=this.subscriptionthis.client.subscribe(topic,qos,(error,res)=>{if(error){console.log('订阅主题错误',error)return}this.subscribeSuccess=trueconsole.log('订阅主题res',res)})},取消订阅doUnSubscribe(){const{topic}=this.subscriptionthis.client.unsubscribe(topic,error=>{if(error){console.log('Unsubscribeerror',error)}})}消息发布doPublish(){const{topic,qos,payload}=this.publicationthis.client.publish(topic,payload,qos,error=>{if(error){console.log('Publisherror',error)}})}disconnectdestroyConnection(){if(this.client.connected){try{this.client.end()this.client={connected:false,}console.log('成功断开连接！')}catch(error){console.log('断开连接失败',error.toString())}}}测试我们使用Vue编写了如下一个简单的浏览器应用，其功能有：创建连接、订阅主题、收发消息、取消订阅、断开连接等，项目完整代码请参考：https://github.com/emqx/MQTT-….使用MQTT5.0客户端工具-MQTTX作为消息测试的另一个客户端。在MQTTX发送第二条消息之前，在浏览器端取消订阅，浏览器端将不会再收到MQTTX发送的后续消息。订阅MQTT服务器、发送和接收消息、取消订阅和断开连接。Vue作为三大主流前端框架之一，不仅可以在浏览器端使用，也可以在移动端使用。结合MQTT协议和MQTT物联网云服务，可以开发出很多有趣的应用，比如客服聊天系统或者实时监控物联网设备信息的管理系统。版权声明：本文为EMQ原创，转载请注明出处。
