vue+sockjs-client实现webSocket通信
1、安装npm install sockjs-clientnpm install stompjs2、引用我这边是一个地方使用直接组件内引用import Stomp from 'stompjs'import specialTreatment from './specialTreatment'3、使用connection(){ //初始化weosocket// 定义客户端的认证信息,按需求配置// 获
·
1、安装
npm install sockjs-client
npm install stompjs
2、引用
我这边是一个地方使用
直接组件内引用
import Stomp from 'stompjs'
import specialTreatment from './specialTreatment'
3、使用
connection(){ //初始化weosocket
// 定义客户端的认证信息,按需求配置
// 获取STOMP子协议的客户端对象
let socket = new SockJS(`http://**.**.**.**:8081/endpoint`); //接口地址
const stompClient = Stomp.over(socket);
this.stompClient = stompClient
stompClient.debug = null;
const useName = window.sessionStorage.getItem('userName')
let headers = { //请求需要携带的一些入参
username:useName
}
const _this = this
// 向服务器发起websocket连接
stompClient.connect(headers,() => {
stompClient.subscribe(`msg/spInfo`, (msg) => { // 订阅服务端提供的某个topic
const dataList = JSON.parse(msg.body) || {} // 返回的是json串,需要parse一下
if(_this.specialTreatmentArr.length>0){ //信息有多条时保存到消息队列
this.specialTreatmentArr.push(dataList)
}else{
_this.dialogVisible = true
this.specialTreatment = dataList
this.modification = JSON.parse(JSON.stringify(dataList.vehicleView || {}))
this.specialTreatmentArr.push(dataList)
}
console.log(this.specialTreatmentArr,'this.specialTreatmentArr')
})
}, (err) => {
// 连接发生错误时的处理函数
console.log('失败')
console.log(err);
this.$router.push('/login')
})
},
disconnect() {
if (this.stompClient) {
this.stompClient.disconnect();
}
}, // 断开连接
destroyed() {
// this.websocketclose() //离开路由之后断开websocket连接
this.disconnect()
},
更多推荐
已为社区贡献8条内容
所有评论(0)