欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

描述

項(xiàng)目需求是做一個(gè)全局聊天系統(tǒng)，隨時(shí)接受新消息通知，實(shí)時(shí)更新聊天內(nèi)容

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

代碼步驟

第一步

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

代碼如下：

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

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) {
      // 打開一個(gè) 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('全局?jǐn)?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') {
        //      頁面跳轉(zhuǎn)
        //      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() {
    // 關(guān)閉定時(shí)器
    console.log('關(guān)閉定時(shí)器')
    clearInterval(this.heartbeat)
    console.log('關(guān)閉ws')
    this.ws.close()
  }
}

第二步

main.js中注冊(cè)全局屬性

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

優(yōu)雅之處講解

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

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論