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

更新時間：2023年10月24日 08:38:24 作者：跳跳的小古風

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

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

需求

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

問題

前期用的是axios 輪詢，添加定時器每秒請求一次接口，出現卡頓，服務器負擔大現象，且不同人打開可能會顯示不同的數據

解決

使用了websocket建立長連接

（websocket只需要一次HTTP握手，所以說整個通訊過程是建立在一次連接/狀態(tài)中，也就避免了HTTP的非狀態(tài)性，服務端會一直知道你的信息，直到你關閉請求）

  data(){
   WsUrl:'',//網址
   lock:false//重復鏈接標識
   url:'',
   token:'',
   deviceid:'',
   reconnetTimeout:null,
   timer:null,
   serverTimer:null,
   timeout:10*1000
   }
  mounted () {
    this.createWebsocket()
  },
  methods:{
  
    createWebsocket(){
     try{
      initWebSocket()
      }catch{
        reConnect()
       }
    }
  	initWebSocket () {
      // 創(chuàng)建一個構造函數返回一個websocket對象
      this.wsurl = `ws://${this.url}${this.types}${this.token}?deviceid=${this.deviceid}`
      this.websock = new WebSocket(wsurl)
      // 接受到信息后的回調函數
      this.websock.onmessage = this.websocketonmessage
      // 連接成功后的回調函數
      this.websock.onopen = this.websocketonopen
      // 連接失敗后的回調函數
      this.websock.onerror = this.websocketonerror
      // 用于指定關閉后的回調函數
      this.websock.onclose = this.websocketclose
    },
        // 連接建立失敗重連
    websocketonerror () {
      this.reConnet()      
    },
    websocketonopen(){
    this.start(this.websocket)
    this.websocketSend()
   }
    // 數據接收
    websocketonmessage (e) {
	  // 處理業(yè)務邏輯
	  if(e.data==‘pong'){
	     this.statr(this.websock)
 	   }
    }
    // 關閉
    websocketclose (e) {
     this.reConnet()      
    },
  }
     reConnect() {
      if(this.lock) {
        return;
      };
      this.lock = true;
      //沒連接上會一直重連，設置延遲避免請求過多
      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{
                // 實例化socket
                this.socket = new WebSocket(this.path)
                // 監(jiān)聽socket連接
                this.socket.onopen = this.open
                // 監(jiān)聽socket錯誤信息
                this.socket.onerror = this.error
                // 監(jiān)聽socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function (res) {
            console.log("socket連接成功")
        },
        error: function () {
            console.log("連接錯誤")
        },
        getMessage: function (msg) {
            /*數據*/
            console.log(msg.data)
        },
       /* send: function () {
            this.socket.send(params)
        },*/
        close: function () {
            console.log("socket已經關閉")
        }
    },
    destroyed () {
        // 銷毀監(jiān)聽
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>