vue使用websocket連接優(yōu)化性能方式

更新時(shí)間：2023年10月24日 08:38:24 作者：跳跳的小古風(fēng)

這篇文章主要介紹了vue使用websocket連接優(yōu)化性能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用websocket連接優(yōu)化性能

需求

前端做echarts 圖表展示，每隔五秒鐘刷新一次數(shù)據(jù)

問(wèn)題

前期用的是axios 輪詢(xún)，添加定時(shí)器每秒請(qǐng)求一次接口，出現(xiàn)卡頓，服務(wù)器負(fù)擔(dān)大現(xiàn)象，且不同人打開(kāi)可能會(huì)顯示不同的數(shù)據(jù)

解決

使用了websocket建立長(zhǎng)連接

（websocket只需要一次HTTP握手，所以說(shuō)整個(gè)通訊過(guò)程是建立在一次連接/狀態(tài)中，也就避免了HTTP的非狀態(tài)性，服務(wù)端會(huì)一直知道你的信息，直到你關(guān)閉請(qǐng)求）

  data(){
   WsUrl:'',//網(wǎng)址
   lock:false//重復(fù)鏈接標(biāo)識(shí)
   url:'',
   token:'',
   deviceid:'',
   reconnetTimeout:null,
   timer:null,
   serverTimer:null,
   timeout:10*1000
   }
  mounted () {
    this.createWebsocket()
  },
  methods:{
  
    createWebsocket(){
     try{
      initWebSocket()
      }catch{
        reConnect()
       }
    }
  	initWebSocket () {
      // 創(chuàng)建一個(gè)構(gòu)造函數(shù)返回一個(gè)websocket對(duì)象
      this.wsurl = `ws://${this.url}${this.types}${this.token}?deviceid=${this.deviceid}`
      this.websock = new WebSocket(wsurl)
      // 接受到信息后的回調(diào)函數(shù)
      this.websock.onmessage = this.websocketonmessage
      // 連接成功后的回調(diào)函數(shù)
      this.websock.onopen = this.websocketonopen
      // 連接失敗后的回調(diào)函數(shù)
      this.websock.onerror = this.websocketonerror
      // 用于指定關(guān)閉后的回調(diào)函數(shù)
      this.websock.onclose = this.websocketclose
    },
        // 連接建立失敗重連
    websocketonerror () {
      this.reConnet()      
    },
    websocketonopen(){
    this.start(this.websocket)
    this.websocketSend()
   }
    // 數(shù)據(jù)接收
    websocketonmessage (e) {
	  // 處理業(yè)務(wù)邏輯
	  if(e.data==‘pong'){
	     this.statr(this.websock)
 	   }
    }
    // 關(guān)閉
    websocketclose (e) {
     this.reConnet()      
    },
  }
     reConnect() {
      if(this.lock) {
        return;
      };
      this.lock = true;
      //沒(méi)連接上會(huì)一直重連，設(shè)置延遲避免請(qǐng)求過(guò)多
      this.reconnectTime&& clearTimeout(this.reconnectTime);
      this.reconnectTime= setTimeout(function () {
        this.createWebSocket();
        this.lock = false;
      }, 4000);
    }
    WebsocketSend(){
      this.websock.send(‘ping')
     }
     start(ws){
      this.serverTimer&&clearTimeout(this.serverTime)
      this.timer&&clearTimeout(this.timer)
      this.timer=setTimeout(()=>{
         ws.send(‘ping')
      this.serverTimer=setTimeout(()=>{
           ws.close()
      },this.timeout};
      },this.timeout)
     }

websocket在vue上的使用

<template>
    <div>
        <button @click="send">發(fā)消息</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            path:"ws://192.168.1.145:8080",
            socket:""
        }
    },
    mounted () {
        // 初始化
        this.init()
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的瀏覽器不支持socket")
            }else{
                // 實(shí)例化socket
                this.socket = new WebSocket(this.path)
                // 監(jiān)聽(tīng)socket連接
                this.socket.onopen = this.open
                // 監(jiān)聽(tīng)socket錯(cuò)誤信息
                this.socket.onerror = this.error
                // 監(jiān)聽(tīng)socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function (res) {
            console.log("socket連接成功")
        },
        error: function () {
            console.log("連接錯(cuò)誤")
        },
        getMessage: function (msg) {
            /*數(shù)據(jù)*/
            console.log(msg.data)
        },
       /* send: function () {
            this.socket.send(params)
        },*/
        close: function () {
            console.log("socket已經(jīng)關(guān)閉")
        }
    },
    destroyed () {
        // 銷(xiāo)毀監(jiān)聽(tīng)
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>