Vue?websocket封裝實(shí)現(xiàn)方法詳解
1.封裝的ws.js文件
let global_callback = null
let socket = '' // 存儲(chǔ) WebSocket 連接.
let timeoutObj = null // 心跳定時(shí)器
let serverTimoutObj = null // 服務(wù)超時(shí)定時(shí)關(guān)閉
let lockReconnect = false // 是否真正建立了連接
let timeoutnum = null // 重新連接的定時(shí)器, 沒連接上會(huì)一直重連,設(shè)置延遲避免請(qǐng)求過多
const socketConfig = {
url: '',
retryTimeout: 20000 // 心跳時(shí)間 暫定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()
}
}
/**
* 關(guān)閉websocket函數(shù)
*/
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(() => {
// 這里發(fā)送一個(gè)心跳,后端收到后返回一個(gè)心跳消息
if (socket.readyState === 1) {
// 如果連接正常 給后端發(fā)送指定消息
socket.send('')
console.log('發(fā)送消息')
} else {
// 重連
reconnect()
}
serverTimoutObj = setTimeout(() => {
// 超時(shí)關(guān)閉連接
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已經(jīng)關(guān)閉')
}
}
function socketOnError() {
socket.onerror = () => {
reconnect()
console.log('socket 連接失敗')
}
}
function socketOnMessage() {
socket.onmessage = (e) => {
global_callback(e.data)
reset()
}
}
// 重置心跳
function reset() {
// 清除時(shí)間
clearTimeout(timeoutObj)
clearTimeout(serverTimoutObj)
// 重啟心跳
start()
}這里的封裝export了三個(gè)方法
- initWebSocket 用來初始化websock,可傳入url
- sendWebsocket 用來發(fā)送數(shù)據(jù)
- closeWebsocket 用來關(guān)閉連接
2.使用方法
文件存放路徑: /src/utils/ws.js
所需文件中按需引入
1.首先需要再項(xiàng)目中進(jìn)行初始化,如果你的項(xiàng)目有登陸的話,則你可以再home.vue里面進(jìn)行引入:
```vue
import { initWebSocket } from ‘@/utils/ws.js’
···
eport default {
created () {
initWebSocket ()
}
}
```
2. 然后在你需要獲取實(shí)時(shí)數(shù)據(jù)的地方進(jìn)行引入并調(diào)用 sendWebsocket
```vue
import { sendWebsocket } from ‘@/utils/ws.js’
···
eport default {
created () {
sendWebsocket (this.onWebSocketMessage)
},
methods: {
onWebSocketMessage(data) {}
}
}
```
關(guān)閉websock
import { closeSock} from "@/api/socket";
export default {
destoryed () {
closeSock()
}
}到此這篇關(guān)于Vue websocket封裝實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue websocket封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue使用Vue.extend創(chuàng)建全局toast組件實(shí)例
這篇文章主要介紹了vue使用Vue.extend創(chuàng)建全局toast組件實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
vue-content-loader內(nèi)容加載器的使用方法
這篇文章主要介紹了vue-content-loader內(nèi)容加載器的使用方法,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說明
Vue?Router是Vue.js官方的路由管理器,它允許我們通過定義路由來管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式:<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法2025-01-01
關(guān)于vue?src路徑動(dòng)態(tài)拼接的小知識(shí)
這篇文章主要介紹了vue?src路徑動(dòng)態(tài)拼接的小知識(shí),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2022-04-04

