基本用法：
在mounted的初始化websocket，在beforeDestroy中关闭连接
init() {
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket')
} else {
// 实例化socket
this.socket = new WebSocket(
'wss://label-test.ainnovation.com/api/work_status/' // 此处使用wss是后端配置过，保证在https下不被拦截
)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open() {
console.log('socket连接成功')
this.send()
},
error() {
console.log('连接错误')
},
getMessage(msg) {
console.log(msg)
// 此处看后端返回，后端可能会1s返回一次消息，按需实现
// 比如做提交和审批的需求就需要实现如下逻辑：
// A提交 => B出现审批提示 （出现一次，存id，不出现保证不重复弹出）=> B关闭/审批（请求接口，标记为已查看，去掉id，才能保证A再次提交这个id，B还能看到）
},
send() {
// websocket请求无法设置请求头，在此采用建立连接之后主动推送token和userId给后端
const token = this.$cookies.get('auth')
const userId = this.$cookies.get('user_id')
this.socket.send(
JSON.stringify({
auth: token,
user_id: userId,
params: {
headers: {
Connection: 'upgrade' // 此处看后端要求
}
}
})
)
},
close() {
console.log('socket已经关闭')
}
在https下使用webscoket可能会报如下错误：
需要后端进行相应配置，对应如上wss: