Vue websocket封装实现方法详解
作者：37 degrees Celsius
项目中需要使用websocke，这个是我自己修修改改好多次之后用得最顺手的一版，分享一下。这个封装需要搭配vuex使用，因为收到的数据都保存在vuex中了，真的绝绝子好用，解决了我一大堆问题
1.封装的ws.js文件
let global_callback = null
let socket = '' // 存储 WebSocket 连接.
let timeoutObj = null // 心跳定时器
let serverTimoutObj = null // 服务超时定时关闭
let lockReconnect = false // 是否真正建立了连接
let timeoutnum = null // 重新连接的定时器， 没连接上会一直重连，设置延迟避免请求过多
const socketConfig = {
url: '',
retryTimeout: 20000 // 心跳时间 暂定20s
}
export const sendWebsocket = function (agentData, callback) {
global_callback = callback
socketOnSend(agentData)
}
export const initWebSocket = function (url) {
let weburl = url || socketConfig.url
if (window.WebSocket) { return }
if (!socket) {
socket = new WebSocket(weburl)
socketOnOpen()
socketOnClose()
socketOnError()
socketOnMessage()
}
}
/**
* 关闭websocket函数
*/
export const closeWebsocket = function () {
if (socket) {
socket.close()
}
clearTimeout(timeoutObj)
clearTimeout(serverTimoutObj)
}
function socketOnSend(data) {
socket.send(data)
}
function socketOnOpen() {
socket.onopen = () => {
console.log('socket连接成功')
start()
}
}
// 开启心跳
function start() {
timeoutObj && clearTimeout(timeoutObj)
serverTimoutObj && clearTimeout(serverTimoutObj)
timeoutObj = setTimeout(() => {
// 这里发送一个心跳，后端收到后返回一个心跳消息
if (socket.readyState === 1) {
// 如果连接正常 给后端发送指定消息
socket.send('')
console.log('发送消息')
} else {
// 重连
reconnect()
}
serverTimoutObj = setTimeout(() => {
// 超时关闭连接
socket.close()
}, socketConfig.retryTimeout);
}, socketConfig.retryTimeout);
}
// 重连
function reconnect() {
if (lockReconnect) {
return
}
lockReconnect = true
timeoutnum && clearTimeout(timeoutnum)
timeoutnum = setTimeout(() => {
initWebSocket()
lockReconnect = false
}, 5000);
}
function socketOnClose() {
socket.onclose = () => {
console.log('socket已经关闭')
}
}
function socketOnError() {
socket.onerror = () => {
reconnect()
console.log('socket 连接失败')
}
}
function socketOnMessage() {
socket.onmessage = (e) => {
global_callback(e.data)
reset()
}
}
// 重置心跳
function reset() {
// 清除时间
clearTimeout(timeoutObj)
clearTimeout(serverTimoutObj)
// 重启心跳
start()
}这里的封装export了三个方法
- initWebSocket 用来初始化websock，可传入url
- sendWebsocket 用来发送数据
- closeWebsocket 用来关闭连接
2.使用方法
文件存放路径： /src/utils/ws.js
所需文件中按需引入
1.首先需要再项目中进行初始化，如果你的项目有登陆的话，则你可以再home.vue里面进行引入：
```vue
import { initWebSocket } from ‘@/utils/ws.js’
···
eport default {
created () {
initWebSocket ()
}
}
```
2. 然后在你需要获取实时数据的地方进行引入并调用 sendWebsocket
```vue
import { sendWebsocket } from ‘@/utils/ws.js’
···
eport default {
created () {
sendWebsocket (this.onWebSocketMessage)
},
methods: {
onWebSocketMessage(data) {}
}
}
```
关闭websock
import { closeSock} from "@/api/socket";
export default {
destoryed () {
closeSock()
}
}到此这篇关于Vue websocket封装实现方法详解的文章就介绍到这了,更多相关Vue websocket封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！