1、创建 websocket.js 文件
// 定义 websocket
export default {
ws: {},
setWs: function(newWs) {
this.ws = newWs
},
}
2、在main.js 中引入
import wsk from './utils/websocket.js' // 引入 websocket
Vue.prototype.$wsk = wsk // 挂载
3、在App.vue组件或者父组件中初始化 websocket
-data中参数：
ws: null,
leave_page: false,
is_first_in_page: true, // 判断是否是第一次进入页面，在 websocket 连接成功时判断是否调用子路由
-methods 方法
// 初始化 websocket
initWebSocket() {
if ('WebSocket' in window) {
let url = `ws链接`
this.ws = new WebSocket(url)
this.ws.onopen = () => {
this.$wsk.setWs(this.ws) // 连接成功后，赋值给全局对象 websocket
console.log('连接 websocket 成功')
if (this.is_first_in_page) return
setTimeout(() => {
console.log('重新调用组件中的方法进行发送信息')
this.send_data()
}, 100)
}
this.ws.onclose = e => {
console.log('监听到websocket断开', e)
// 如果是离开页面或者刷新的情况下，则不做重连，否则重连
if (this.leave_page) {
console.log('断开连接', e)
} else {
console.log('正在重连中')
this.is_first_in_page = false // 设置为 false, 这样重连后就会调用组件中的方法来订阅信息
this.initWebSocket()
}
}
} else {
// 浏览器不支持 WebSocket
alert('您的浏览器不支持 WebSocket，建议使用谷歌浏览器')
}
setTimeout(() => {
// 其他代码块
return this.send_data()
}, 100)
},
// 发送消息
send_data() {
let data = {
type: 'send_data',
}
this.$wsk.ws.send(JSON.stringify(data))
this.$wsk.ws.onmessage = this.websocketonmessage
},
websocketonmessage(e){
console.log(e) // 接受消息
}
-destroyed 方法
this.leave_page = true
this.ws.close()
this.ws = null
this.$wsk.setWs(this.ws)
