介绍 vue是什么 npm install stompjs npm install ,,节省网 & lt; script>
import Stomp 得到& # 39;stompjs& # 39;
推荐- - - - - -在sysconstant.js配置文件中配置mqtt的服务端地址,账号等信息
import {MQTT_SERVICE的不同之处是,MQTT_USERNAME, MQTT_PASSWORD },得到& # 39;. ./. ./config/sysconstant.js& # 39;
export default {
,名字:& # 39;条目# 39;
,data (), {
return {才能
,,,客户:Stomp.client (MQTT_SERVICE)
,,}
},
,created (), {
this.connect才能()
},
,方法:{
,,onConnected: function (帧),{
,,console.log(& # 39;连接:& # 39;,+,)
,,var topic =, & # 39;/主题/AllCustomer& # 39;,
推荐- - - - - -订阅频道
,,this.client.subscribe(主题,this.responseCallback,, this.onFailed),
,,},
,,onFailed: function (帧),{
,,console.log(& # 39;失败:& # 39;,+,)
,,},
,,responseCallback: function (帧),{
,,console.log (& # 39; responseCallback 味精=祝辞& # 39;,+,frame.body)
,,- - -接收消息
,,},
,,连接:function (), {
,,- - - - - -初始化mqtt客户端,并连接mqtt服务
,,var clientid =, util.uuid ()
,,var headers =, {
,,,& # 39;登录# 39;:,MQTT_USERNAME,
,,,& # 39;密码# 39;:,MQTT_PASSWORD,
,,,& # 39;client-id& # 39;: clientid
,,,//additional 头
,,}
,才能this.client.connect(头,this.onConnected,, this.onFailed)
,,}
,}
}
& lt;/script> /* *
,*配置文件,记录系统中固定的参数
,*/=export const MQTT_SERVICE & # 39; ws://127.0.0.1:61623/跺脚# 39;,//,mqtt服务地址
时间=export const MQTT_USERNAME & # 39;行政与# 39;,//,mqtt连接用户名
export const MQTT_PASSWORD =, & # 39;密码# 39;,//,mqtt连接密码
这篇文章主要介绍vue如何使用stompjs实现mqtt消息推送通知,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
vue是一套用于构建用户界面的渐进式JavaScript框架,vue与其它大型框架的区别是,使用vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。
<强>第一步: <强>安装依赖
运行npm运行开发可能会报错,提示安装网,执行命令
<强>第二部:组件中应用stompjs
组件中的js部分
配置文件sysconstant。js
