vue中使用websocket
console.log('WebSocket连接发生错误状态码:' + this.websocket.readyState)console.log('WebSocket连接成功状态码:' + this.websocket.readyState)console.log('WebSocket连接关闭状态码:' + this.websocket.readyState)// 监听窗口关闭事件,当窗口关闭时
使用方法:直接放到需要做websocket连接的页面的methods中,把this.wsUrl(后端给的websocket地址)配上就可以使用。initSysWebsocket()方法用来创建连接,可以放在mounted()中调用。可以在setOnmessageMessage(event)方法中拿到服务器传的数据并做自己的业务处理,event就是传的参数。
methods:{
initSysWebsocket() {
try {
if ('WebSocket' in window) {
console.log(this.wsUrl)
// console.log(this.$store.getters.userId)
// 正式环境参数
// this.wsUrl是连接路径,需要在data()里自己定义
this.websocket = new WebSocket(this.wsUrl)
console.log(this.websocket)
this.initWebSocket()
} else {
alert('当前浏览器 不支持')
}
} catch (e) {
console.log('尝试创建连接失败')
// 如果无法连接上webSocket 那么重新连接!可能会因为服务器重新部署,或者短暂断网等导致无法创建连接
this.reConnect()
}
},
reConnect() {
// 重连函数
var that = this
if (this.isConnect) return
this.rec && clearTimeout(this.rec)
// 延迟5秒重连 避免过多次过频繁请求重连
this.rec = setTimeout(function () {
that.createWebSocket()
}, 5000)
},
initWebSocket() {
this.isConnect = true
// 连接错误
this.websocket.onerror = this.setErrorMessage
// 连接成功
this.websocket.onopen = this.setOnopenMessage
// 收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage
// 连接关闭的回调
this.websocket.onclose = this.setOncloseMessage
// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = this.onbeforeunload
},
setErrorMessage() {
this.isConnect = false
// 调用重连函数
this.reConnect()
console.log('WebSocket连接发生错误 状态码:' + this.websocket.readyState)
},
setOnopenMessage() {
console.log('WebSocket连接成功 状态码:' + this.websocket.readyState)
},
setOnmessageMessage(event) {
// 根据服务器推送的消息做自己的业务处理
var json = JSON.parse(event.data)
// 获取标签数据
var markerData = json
console.log(markerData)
},
setOncloseMessage() {
this.isConnect = false
// 重连
this.reConnect()
// console.log('connection closed (' + e.code + ')')
console.log('WebSocket连接关闭 状态码:' + this.websocket.readyState)
},
onbeforeunload() {
this.closeWebSocket()
},
closeWebSocket() {
this.websocket.close()
}
}
更多推荐
所有评论(0)