前言：ws连接不能像http一样自定义请求头,但是可以通过官方提供的Sec-WebSocket-Protocol属性，与后端约定好，当作特定的请求头属性来进行前后端的通信。
一、官方定义
varaWebSocket=newWebSocket(url [, protocols]);
url要连接的URL；这应该是WebSocket服务器将响应的URL。
protocols 可选一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个WebSocket子协议（例如，您可能希望一台服务器能够根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。
二、ws报错：Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
解决：前后端配合，前端请求头与后端响应报文都设置'Sec-WebSocket-Protocol'，并且值相同
代码如下：
initSysWebsocket() {
//在mounted里调用
try {
if ('WebSocket' in window) {
// console.log(this.$store.getters.userId)
// 正式环境参数
// this.wsUrl是连接路径，需要在data()里自己定义
console.log(this.wsBaseUrl)
let wsUrl = `${this.wsBaseUrl}/websocket/speed`
this.websocket = new WebSocket(wsUrl, ['-1'])//设置Sec-WebSocket-Protocol的值
console.log(this.websocket)
this.initWebSocket()
} else {
alert('当前浏览器 不支持')
}
} catch (e) {
console.log('尝试创建连接失败')
// 如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
this.reConnectFn()
}
},
reConnectFn() {
// 重连函数
let that = this
if (this.isConnect) return
this.reConnect && clearTimeout(this.reConnect)
// 延迟5秒重连 避免过多次过频繁请求重连
this.reConnect = setTimeout(() => {
that.initWebSocket()
}, 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.reConnectFn()
console.log('WebSocket连接发生错误 状态码：' + this.websocket.readyState)
},
setOnopenMessage() {
console.log('WebSocket连接成功 状态码：' + this.websocket.readyState)
let idList =['1566969888304496642', '1564571161175465985']
this.websocketsend(JSON.stringify(idList));
},
websocketsend(Data) { // 数据发送
console.log(Data, 'Data')
this.websocket.send(Data);
},
setOnmessageMessage(event) {
console.log(event, 'event')
// 根据服务器推送的消息做自己的业务处理
let json = JSON.parse(event.data)
// 获取标签数据
let markerData = json
console.log(markerData)
},
setOncloseMessage() {
this.isConnect = false
// 重连
this.reConnectFn()
console.log('WebSocket连接关闭 状态码：' + this.websocket.readyState)
},
onbeforeunload() {
console.log(123)
this.closeWebSocket()
},
closeWebSocket() {
this.websocket.close()
},
网友评论