Vue?websocket封裝實(shí)現(xiàn)方法詳解
1.封裝的ws.js文件
let global_callback = null let socket = '' // 存儲 WebSocket 連接. let timeoutObj = null // 心跳定時器 let serverTimoutObj = null // 服務(wù)超時定時關(guān)閉 let lockReconnect = false // 是否真正建立了連接 let timeoutnum = null // 重新連接的定時器, 沒連接上會一直重連,設(shè)置延遲避免請求過多 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() } } /** * 關(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ā)送一個心跳,后端收到后返回一個心跳消息 if (socket.readyState === 1) { // 如果連接正常 給后端發(fā)送指定消息 socket.send('') console.log('發(fā)送消息') } else { // 重連 reconnect() } serverTimoutObj = setTimeout(() => { // 超時關(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() { // 清除時間 clearTimeout(timeoutObj) clearTimeout(serverTimoutObj) // 重啟心跳 start() }
這里的封裝export了三個方法
- 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ù)據(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)輸入框自動跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)輸入框自動跳轉(zhuǎn)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-05-05讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03關(guān)于SpringBoot與Vue交互跨域問題解決方案
最近在利用springboot+vue整合開發(fā)一個前后端分離的個人博客網(wǎng)站,所以這一篇總結(jié)一下在開發(fā)中遇到的一個問題,關(guān)于解決在使用vue和springboot在開發(fā)前后端分離的項(xiàng)目時,如何解決跨域問題。在這里分別分享兩種方法,分別在前端vue中解決和在后臺springboot中解決。2021-10-10vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03elementUI實(shí)現(xiàn)下拉選項(xiàng)加多選框的示例代碼
因產(chǎn)品需求和UI樣式調(diào)整,本文主要實(shí)現(xiàn)elementUI下拉選項(xiàng)加多選框的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10