最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue?websocket封裝實現(xiàn)方法詳解

 更新時間:2022年09月29日 09:57:09   作者:37?degrees?Celsius  
項目中需要使用websocke,這個是我自己修修改改好多次之后用得最順手的一版,分享一下。這個封裝需要搭配vuex使用,因為收到的數(shù)據(jù)都保存在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函數(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(() => {
      // 超時關閉連接
      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 用來發(fā)送數(shù)據(jù)
  • closeWebsocket 用來關閉連接

2.使用方法

文件存放路徑: /src/utils/ws.js

所需文件中按需引入

 1.首先需要再項目中進行初始化,如果你的項目有登陸的話,則你可以再home.vue里面進行引入:
 ```vue
 import { initWebSocket } from ‘@/utils/ws.js’
 ···
 eport default {
      created () {
         initWebSocket ()
     } 
 }
 ```

 2. 然后在你需要獲取實時數(shù)據(jù)的地方進行引入并調用 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封裝實現(xiàn)方法詳解的文章就介紹到這了,更多相關Vue websocket封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vue的生命周期一起來看看

    Vue的生命周期一起來看看

    這篇文章主要為大家詳細介紹了Vue的生命周期,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • Vue實現(xiàn)剪貼板復制功能

    Vue實現(xiàn)剪貼板復制功能

    這篇文章主要介紹了Vue實現(xiàn)剪貼板復制功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Javascript對象及Proxy工作原理詳解

    Javascript對象及Proxy工作原理詳解

    這篇文章主要為大家介紹了Javascript對象及Proxy工作原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue3.0如何修改瀏覽器標題(靜態(tài))

    vue3.0如何修改瀏覽器標題(靜態(tài))

    這篇文章主要介紹了vue3.0如何修改瀏覽器標題(靜態(tài)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue todo-list組件發(fā)布到npm上的方法

    vue todo-list組件發(fā)布到npm上的方法

    這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue使用Vue.extend創(chuàng)建全局toast組件實例

    vue使用Vue.extend創(chuàng)建全局toast組件實例

    這篇文章主要介紹了vue使用Vue.extend創(chuàng)建全局toast組件實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue-content-loader內容加載器的使用方法

    vue-content-loader內容加載器的使用方法

    這篇文章主要介紹了vue-content-loader內容加載器的使用方法,本文分步驟給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-08-08
  • vue中解決微信html5原生ios虛擬鍵返回不刷新問題

    vue中解決微信html5原生ios虛擬鍵返回不刷新問題

    這篇文章主要介紹了vue中解決微信html5原生ios虛擬鍵返回不刷新問題,本文給大家分享解決方法,通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • Vue-router跳轉和location.href的區(qū)別及說明

    Vue-router跳轉和location.href的區(qū)別及說明

    Vue?Router是Vue.js官方的路由管理器,它允許我們通過定義路由來管理應用程序的不同視圖和狀態(tài),Vue路由跳轉主要有以下幾種方式:<router-link>標簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法
    2025-01-01
  • 關于vue?src路徑動態(tài)拼接的小知識

    關于vue?src路徑動態(tài)拼接的小知識

    這篇文章主要介紹了vue?src路徑動態(tài)拼接的小知識,具有很好的參考價值,希望對大家有所幫助。
    2022-04-04

最新評論

乾安县| 东乡县| 大渡口区| 镇赉县| 五大连池市| 大关县| 东乌珠穆沁旗| 民权县| 遂昌县| 澄迈县| 陇川县| 怀宁县| 昌平区| 峨边| 固阳县| 屯门区| 西昌市| 茶陵县| 韶关市| 视频| 扎兰屯市| 玉龙| 大竹县| 资兴市| 彩票| 忻城县| 和林格尔县| 永靖县| 通许县| 论坛| 财经| 兴山县| 富平县| 镇赉县| 磐石市| 彭山县| 昌都县| 搜索| 清新县| 普格县| 民县|