Vue vuex sockjs

最新推荐文章于 2024-09-06 09:03:34 发布

。果子。

最新推荐文章于 2024-09-06 09:03:34 发布

阅读量312

点赞数

分类专栏：笔记文章标签：前端 vue websocket socket

本文链接：https://blog.csdn.net/weixin_37982963/article/details/120489272

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue2应用中使用Vuex和SockJS库来建立与后端的长连接，并实时更新组件状态。通过创建store、socket连接、订阅消息并存储到Vuex状态，开发者可以轻松处理从服务器推送的数据。

摘要由CSDN通过智能技术生成

vue2 + vuex + sockJS
1.安装依赖sockjs + sockjs-client
2.创建store.js 和在src=>utils文件夹下新建socket.js
3.在index.html中引入sockjs.min.js和stomp.min.js
4.socket.js文件内容

import store from '../store'
export function connectSocket() {
	let wsurl = url  (url是你后台向前端主动推送数据的地址)
	let socket = new SockJS(wsurl );
	let stompClient = Stomp.over(socket );
	stompClient.connect({},()=>{
	stompClient.subscribe('/topic/xxxx',(greeting)=>{
		let greetingData = JSON.parse(greeting.body) //处理返回的数据格式
		store.commit('modiyData',greetingData) // 存到vuex里面
})
})
};

5.vueX内容
state：{
mapData:{}.
}
mutations:{
modiyData(state,mapData) {
state.mapData = mapData
}
}
getters: {
getMapData(state) {
return state.mapData
}
}