export default {
data() {
return {
websock: null
}
},
destroyed () {
//页面销毁时关闭ws连接
if(this.websock){
this.websock.close() // 关闭websocket
}
},
methods: {
//初始化weosocket
initWebSocket(){
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持WebSocket")
return false
}
const wsuri = 'ws://*.*.*.*:8081/dns-monitor' // websocket地址
this.websock = new WebSocket(wsuri)
this.websock.onopen = this.websocketonopen
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onclose = this.websocketclose
},
//连接成功
websocketonopen(){
console.log('WebSocket连接成功')
},
//接收后端返回的数据
websocketonmessage(e){
let dataJson = JSON.parse(e.data)
console.log(dataJson)
// 在这里使用后端返回的数据,对数据进行处理渲染
},
//连接建立失败重连
websocketonerror(e){
console.log(`连接失败的信息:`, e)
this.initWebSocket() // 连接失败后尝试重新连接
},
//关闭连接
websocketclose(e){
console.log('断开连接',e)
},
// 点击按钮
btnClick () {
// 因为需求是每次点击都是发起不同ws连接,拿到的数据也不一致,所以连接前要先断开上次的连接
if(this.websock){
this.websock.close() // 关闭websocket连接
}
this.initWebSocket() // 初始化weosocket,发起连接
// 这里使用定时器是为了等待连接后才发送数据,避免错误
setTimeout( () => {
//添加状态判断,当为OPEN时,前端发送消息给后端
if (this.websock.readyState === 1) {
// 把后台需要的参数数据传过去
let obj = {
jobId: 111,
token: 'xxxxx',
message: 'send ok'
}
//发给后端的数据需要字符串化
this.websock.send(JSON.stringify(obj))
}
}, 500)
}
}
}
vue 中如何使用websocket
猜你喜欢
转载自blog.csdn.net/weixin_38982591/article/details/117919425
今日推荐
周排行