亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue如何優(yōu)雅的使用全局WebSocket

 更新時間:2024年08月29日 10:57:29   作者:不應識  
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

描述

項目需求是做一個全局聊天系統(tǒng),隨時接受新消息通知,實時更新聊天內容

方式就是做一個全局的ws屬性,統(tǒng)一發(fā)送,統(tǒng)一接受,使用xuex存儲需要的數(shù)據(jù)

代碼步驟

第一步

utils下新建globalWs.js, 用來處理全部的ws事件,

代碼如下:

//utils/globalWs.js
import { Notification } from 'element-ui'  //引入ui組件, 作消息通知
import router from '@/router/routers'  //引入router, 作頁面跳轉
import store from '@/store'  //引入store, 作聊天消息存儲

export default {
  ws: {},
  //發(fā)送ws方法
  sendWs: function(data) {
    console.log(data, '發(fā)送的消息')
    this.ws.send(JSON.stringify(data))
  },
  //初始化ws
  initWs: function() {
    const that = this
    if ('WebSocket' in window) {
      // 打開一個 web socket
      const ws = new WebSocket(process.env.VUE_APP_WS_API)

      that.ws = ws
      ws.onopen = function() {
        console.log('ws.onopen')
        // Web Socket 已連接上,使用 that.sendWs() 方法發(fā)送數(shù)據(jù), 例如
        that.sendWs({name:'張三'})
      }
      ws.onmessage = function(evt) {
        console.log('全局數(shù)據(jù)已接收...', evt.data)
        var receivedData = JSON.parse(evt.data)
        
        // 添加聊天記錄代碼
        // store.commit('ADD_CALL_LOG', data)

        //新消息通知
        //Notification.info({
        //  title: '消息',
        //  message: '您有一條新的消息',
        //  onClick: () => {
        //     if (router.currentRoute.fullPath != '/airobot/chat') {
        //      頁面跳轉
        //      router.push('/airobot/chat')
        //    }
        //  }
        //})
      }
    }
    // 異常斷開重連(2023.4.12更新)
    ws.onerror = function(err) {
        console.log('websocket 斷開: ' + err, ws.readyState)
        if (ws.readyState != 0) {
          setTimeout(() => {
            that.initWs()
          }, 1000)
        }
      }
  },
  //斷開socked方法
  closeWs: function() {
    // 關閉定時器
    console.log('關閉定時器')
    clearInterval(this.heartbeat)
    console.log('關閉ws')
    this.ws.close()
  }
}

第二步

main.js中注冊全局屬性

//main.js
import globalWs from './utils/globalWs.js'
Vue.prototype.$globalWs = globalWs

優(yōu)雅之處講解

可以在任何時刻去選擇初始化ws, 可以是app.vue中, 也可以是驗證完用戶信息后

可以隨時使用globalWs.send()發(fā)送聊天消息

  • js中初始化:
import globalWs from '@/utils/globalWs.js'
globalWs.initWs()
  • vue中初始化:
this.globalWs.initWs()

總結

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 關于vite proxy跨域問題的解決

    關于vite proxy跨域問題的解決

    這篇文章主要介紹了關于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue3組合式函數(shù)Composable實戰(zhàn)ref和unref使用

    Vue3組合式函數(shù)Composable實戰(zhàn)ref和unref使用

    這篇文章主要為大家介紹了Vue3組合式函數(shù)Composable實戰(zhàn)ref和unref使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • vue2.0父子組件間傳遞數(shù)據(jù)的方法

    vue2.0父子組件間傳遞數(shù)據(jù)的方法

    本文通過一個小例子給大家介紹了vue2.0父子組件間傳遞數(shù)據(jù)的方法,需要的朋友參考下吧
    2018-08-08
  • 淺談Vue下使用百度地圖的簡易方法

    淺談Vue下使用百度地圖的簡易方法

    本篇文章主要介紹了淺談Vue下使用百度地圖的簡易方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • Vue項目環(huán)境搭建詳細總結

    Vue項目環(huán)境搭建詳細總結

    這篇文章主要為大家介紹了Vue項目環(huán)境搭建總結篇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue+echarts封裝氣泡圖的方法

    vue+echarts封裝氣泡圖的方法

    這篇文章主要為大家詳細介紹了vue+echarts封裝氣泡圖的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 在vue中多次調用同一個定義全局變量的實例

    在vue中多次調用同一個定義全局變量的實例

    今天小編就為大家分享一篇在vue中多次調用同一個定義全局變量的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue中插件和組件的區(qū)別點及用法總結

    vue中插件和組件的區(qū)別點及用法總結

    在本篇文章里小編給大家分享的是一篇關于vue中插件和組件的區(qū)別點及用法總結內容,有興趣的的朋友們可以學習下。
    2021-12-12
  • 教你一招解決vue頁面自適應布局

    教你一招解決vue頁面自適應布局

    在前端開發(fā)的時候經(jīng)常會遇到這樣的困惑,設計師給你的設計稿的尺寸和頁面的尺寸不一致,導致了頁面無法正常顯示,下面這篇文章主要給大家介紹了關于一招解決vue頁面自適應布局的相關資料,需要的朋友可以參考下
    2022-07-07
  • Vue3中如何使用Three.js詳解(包括各種樣例、常見場景、問題及解決方案)

    Vue3中如何使用Three.js詳解(包括各種樣例、常見場景、問題及解決方案)

    Three.js是一個常見的需求,Three.js是一個用于在瀏覽器中創(chuàng)建和顯示動畫3D計算機圖形的JavaScript庫,這篇文章主要介紹了Vue3中如何使用Three.js的相關資料,包括各種樣例、常見場景、問題及解決方案,需要的朋友可以參考下
    2025-04-04

最新評論