前言:vue项目中,我们常会使用websocket实现长连接,实时更新页面数据状态,那么封装一个实用的websocekt就尤为重要,以下是本人项目过程中,针对websocket进行的封装,仅供学习参考,如果大家有更好的方案,欢迎留言分享。
在vue项目的utils文件夹下,新建websocket.js文件,如下:
let limitConnect = 3
let timeConnect = 0
let timerWs = null
let Socket = ''
// 缓存ip
let ip = ''
/**
* 建立websocket连接
* @param {string} url ws地址
*/
export const createSocket = url => {
ip = url
Socket = new WebSocket(url)
// 发送心跳
Socket.onopen = onopenWS
// 接收消息
Socket.onmessage = onmessageWS
// 断开重连
Socket.onclose = oncloseWS
}
// 断开连接
export const closeSoket = () => {
if (Socket.readyState === 1) {
Socket.close()
Socket = null
}
}
/** 打开WS之后发送心跳 */
const onopenWS = () => {
sendPing()
}
/** WS数据接收统一处理 (通过事件订阅处理)*/
const onmessageWS = e => {
window.dispatchEvent(
new CustomEvent('onmessageWS', {
detail: {
data: e.data
}
})
)
}
/** 断开重连 */
const oncloseWS = () => {
reconnectWs()
}
/**
* @description 重连机制
*/
const reconnectWs = () => {
if (limitConnect > 0) {
limitConnect--
timeConnect++
console.log(`第${timeConnect}次重连`)
setTimeout(() => {
createSocket(ip)
}, 2000)
} else {
console.log('webSocket连接超时')
}
}
/**
* 发送数据
* @param {any} message 需要发送的数据
*/
export const sendWSPush = message => {
return new Promise((reslove, reject) => {
Socket.send(JSON.stringify(message))
reslove(Socket.readyState)
})
}
/** 发送心跳
* @param {number} time 心跳间隔毫秒10s 默认5min=5*60s 1s=1000ms
* @param {string} ping 心跳名称 默认字符串ping
*/
export const sendPing = (time = 1000 * 10, ping = 'ping') => {
if (timerWs) {
clearInterval(timerWs)
timerWs = null
}
timerWs = setInterval(() => {
Socket.send(ping)
}, time)
}
// Socket.readyState状态码:0:正在连接;1:连接成功,可以通信 2:表示连接正在关闭 3:表示连接已经关闭,或者打开连接失败
页面中调用:
//引入创建websocket的方案
import { createSocket } from '../../utils/webscoket'
//在data中定义一个变量:
data(){
return{
getSocketData:null
}
}
//在methods中写个方法initWebsSocket,在mounted初始化websocket
initWebsSocket() {
const wsUrl="ws:xxx:xxx:xxx:xxx:xxxx"
createSocket(wsUrl)
// 创建接收消息函数
this.getSocketData = e => {
const data = e && e.detail.data
// 如果不是连接成功的心跳数据,弹出提示
if (data !== 'pong') {
this.handleNotifyMsg(data) //处理消息的函数
}
}
// 注册监听事件
window.addEventListener('onmessageWS', this.getSocketData)
},
注意在页面 destroyed中的移除消息处理监听
destroyed() {
// 移除监听器
window.removeEventListener('onmessageWS', this.getSocketData)
},
如果不做封装,可以参考以下用法使用: