封装websocket请求-----vue项⽬实战（完整版）前⾔：
如果项⽬中多个组件都使⽤到WebSocket请求，那么我们需要对WebSocket进⾏封装，⽅便我们使⽤。
下⾯我根据我的项⽬结构来创建⽂件和引⼊⽂件，⼤家注意⼀下⾃⼰项⽬结构。
⼀、在utils⽬录下创建websocket.js⽂件
import{ Message }from'element-ui'
import{ getToken }from'@/utils/authToken'// 与后端的协商，websocket请求需要带上token参数
let websock =null
let messageCallback =null
let errorCallback =null
let wsUrl =''
let tryTime =0
/
/ 接收ws后端返回的数据
function websocketonmessage(e){
messageCallback(JSON.parse(e.data))
}
/**
* 发起websocket连接
* @param {Object} agentData 需要向后台传递的参数数据
*/
function websocketSend(agentData){
// 加延迟是为了尽量让ws连接状态变为OPEN
setTimeout(()=>{
/
/ 添加状态判断，当为OPEN时，发送消息
adyState === websock.OPEN){// websock.OPEN = 1
// 发给后端的数据需要字符串化
websock.send(JSON.stringify(agentData))
}
adyState === websock.CLOSED){// websock.CLOSED = 3
console.log('adyState=3')
<('ws连接异常，请稍候重试')
errorCallback()
}
},500)
}
// 关闭ws连接
function websocketclose(e){
// e.code === 1000  表⽰正常关闭。⽆论为何⽬的⽽创建, 该链接都已成功完成任务。
// e.code !== 1000  表⽰⾮正常关闭。
if(e && e.code !==1000){
<('ws连接异常，请稍候重试')
errorCallback()
// // 如果需要设置异常重连则可替换为下⾯的代码，⾃⾏进⾏测试
// if (tryTime < 10) {
//  setTimeout(function() {
/
/    websock = null
//    tryTime++
//    initWebSocket()
//    console.log(`第${tryTime}次重连`)
//  }, 3 * 1000)
//} else {
//  ('重连失败！请稍后重试')
//}
}
}
// 建⽴ws连接
function websocketOpen(e){
// console.log('ws连接成功')
}
// 初始化weosocket
function initWebSocket(){
if(typeof(WebSocket)==='undefined'){
<('您的浏览器不⽀持WebSocket，⽆法获取数据')
return false
}
const token ='JWT='+getToken()
// ws请求完整地址
const requstWsUrl = wsUrl +'?'+ token
websock =new WebSocket(requstWsUrl)
websocketonmessage(e)
}
websocketOpen()
}
<('ws连接异常，请稍候重试')
errorCallback()
}
websocketclose(e)
}
}
/**
* 发起websocket请求函数
* @param {string} url ws连接地址
* @param {Object} agentData 传给后台的参数
* @param {function} successCallback 接收到ws数据，对数据进⾏处理的回调函数 * @param {function} errCallback ws连接错误的回调函数
*/
export function sendWebsocket(url, agentData, successCallback, errCallback){  wsUrl = url
initWebSocket()
messageCallback = successCallback
errorCallback = errCallback
websocketSend(agentData)
}
/**
* 关闭websocket函数
*/
export function closeWebsocket(){
if(websock){
websock.close()// 关闭websocket
}
}
⼆、在vue组件中使⽤WebSocket封装好的功能
<template>
<div>
<button @click="requstWs">点击发起websocket请求</button>
</div>
</template>
<script>
import{ sendWebsocket, closeWebsocket }from'@/utils/websocket.js'
export default{
beforeDestroy(){
// 页⾯销毁时关闭ws。因为有可能ws连接接收数据尚未完成，⽤户就跳转了页⾯
// 在需要主动关闭ws的地⽅都可以调⽤该⽅法
closeWebsocket()
},
methods:{
// ws连接成功，后台返回的ws数据，组件要拿数据渲染页⾯等操作
wsMessage(data){
const dataJson = data
console.log(dataJson)
// 这⾥写拿到数据后的业务代码
},
// ws连接失败，组件要执⾏的代码
wsError(){
// ⽐如取消页⾯的loading
},
requstWs(){
// 防⽌⽤户多次连续点击发起请求，所以要先关闭上次的ws请求。
closeWebsocket()
// 跟后端协商，需要什么参数数据给后台
const obj ={
monitorUrl:'xxxxxxxxxxxxx',
userName:'xxxxxxxxxx'
}
// 发起ws请求
sendWebsocket('ws://test.ws', obj,this.wsMessage,this.wsError)
}
}
}
</script>
介绍WebSocket对象中的readyState属性
WebSocket的readyState属性⽤来定义连接状态，该属性的值有下⾯⼏种：
0 ：对应常量 CONNECTING
正在建⽴连接连接，还没有完成。
1 ：对应常量 OPEN
连接成功建⽴，可以进⾏通信。
2 ：对应常量 CLOSING
连接正在进⾏关闭握⼿，即将关闭。
3 : 对应常量 CLOSED
连接已经关闭或者根本没有建⽴。
介绍WebSocket断开连接onclose的重要信息错误状态码
WebSocket断开时，会触发CloseEvent, CloseEvent会在连接关闭时发送给使⽤ WebSockets 的客户端.
它在 WebSocket 对象的onclose 事件中使⽤。CloseEvent的code字段表⽰了WebSocket断开的原因。可以从该字段中分析断开的原因。CloseEvent有三个字段需要注意, 通过分析这三个字段，⼀般就可以到断开原因。
CloseEvent.wasClean: wasClean表⽰是否正常断开，是布尔值。⼀般正常断开时，该值为true
如下是在关闭ws连接的时候打印出来的CloseEvent对象：
关闭状态码表
下⾯标红的状态码是我在项⽬中测试遇到过的。
状态码描述
0–999保留段, 未使⽤
1000正常关闭; ⽆论为何⽬的⽽创建, 该链接都已成功完成任务.
1001终端离开, 可能因为服务端错误, 也可能因为浏览器正从打开连接的页⾯跳转离开.
1002由于协议错误⽽中断连接.
1003由于接收到不允许的数据类型⽽断开连接 (如仅接收⽂本数据的终端接收到了⼆进制数据).
1004保留. 其意义可能会在未来定义.
1005保留. 表⽰没有收到预期的状态码.
1006保留. ⽤于期望收到状态码时连接⾮正常关闭 (也就是说, 没有发送关闭帧).
1007由于收到了格式不符的数据⽽断开连接 (如⽂本消息中包含了⾮ UTF-8 数据).
1008由于收到不符合约定的数据⽽断开连接. 这是⼀个通⽤状态码, ⽤于不适合使⽤ 1003 和 1009 状态码的场景.
1009由于收到过⼤的数据帧⽽断开连接.
1010客户端期望服务器商定⼀个或多个拓展, 但服务器没有处理, 因此客户端断开连接.
1011客户端由于遇到没有预料的情况阻⽌其完成请求, 因此服务端断开连接.
1012服务器由于重启⽽断开连接.
1013服务器由于临时原因断开连接, 如服务器过载因此断开⼀部分客户端连接.
websocket和socket1014由 WebSocket标准保留以便未来使⽤.
1015保留. 表⽰连接由于⽆法完成 TLS 握⼿⽽关闭 (例如⽆法验证服务器证书).
1016–1999由 WebSocket标准保留以便未来使⽤.
2000–2999由 WebSocket拓展保留使⽤.
ps: 其他注意事项
如果你的服务所⽤的协议是HTTPS的，那么使⽤的WebSocket协议也必须是wss, ⽽不能是ws
最后提供个完整的测试例⼦给⼤家学习
仓库中的代码⽐上⾯的封装代码还要详细：包括失败重连、⼼跳检测等，还有详细的注释。
在vscode编辑器中安装Live Server插件，如下图在index.html⽂件中右键操作即可运⾏测试。更多好⽤的vscode插件可看：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。