快捷導(dǎo)航

使用websocket和Vue2中的props實時更新數(shù)據(jù)方式

更新時間：2024年08月09日 09:59:51 作者：守得云開見繁星

這篇文章主要介紹了使用websocket和Vue2中的props實時更新數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

web的概念和使用

WebSocket 是一種在客戶端和服務(wù)器之間提供長壽命、雙向通信的協(xié)議。

它不同于傳統(tǒng)的HTTP協(xié)議，HTTP協(xié)議主要用于從客戶端向服務(wù)器請求資源，而WebSocket則為應(yīng)用程序提供了全雙工（full-duplex）的通信渠道，允許服務(wù)器和客戶端在建立連接后隨時主動向?qū)Ψ桨l(fā)送數(shù)據(jù)。

WebSocket的特點

持久連接：一旦WebSocket連接建立，客戶端和服務(wù)器就可以在不關(guān)閉連接的情況下進行多次數(shù)據(jù)交換，這減少了建立和關(guān)閉連接的開銷。
全雙工通信：雙方都可以同時發(fā)送和接收數(shù)據(jù)，無需等待對方的響應(yīng)，這對于實時應(yīng)用（如在線聊天、游戲、協(xié)同編輯、實時交易系統(tǒng)等）非常有利。
低延遲：相比輪詢和長輪詢技術(shù)，WebSocket減少了不必要的網(wǎng)絡(luò)傳輸和延遲，提供了近乎實時的數(shù)據(jù)傳輸能力。
輕量級：雖然基于TCP，但WebSocket在HTTP握手之后使用了自己的更簡單的幀協(xié)議，優(yōu)化了數(shù)據(jù)傳輸效率。

WebSocket的工作流程

握手：客戶端首先通過HTTP請求發(fā)起連接，并包含Upgrade頭信息，表示希望協(xié)議升級為WebSocket。服務(wù)器確認(rèn)并同意升級后，連接轉(zhuǎn)為WebSocket協(xié)議。
數(shù)據(jù)傳輸：建立連接后，客戶端和服務(wù)器可以開始互相發(fā)送數(shù)據(jù)片段（稱為“消息”或“幀”）。這些數(shù)據(jù)可以是文本也可以是二進制格式，并且可以實時傳輸。
關(guān)閉連接：當(dāng)一方完成數(shù)據(jù)傳輸或需要終止連接時，會發(fā)送關(guān)閉控制幀。收到關(guān)閉指令后，雙方會清理資源，關(guān)閉連接。

props的概念和使用

在 Vue 2 中，props 是一種特性，用于父組件向子組件傳遞數(shù)據(jù)。

數(shù)據(jù)是單向綁定的，數(shù)據(jù)只能從父組件流向子組件。

使用 props 可以讓組件更加模塊化和可復(fù)用。

props的使用

數(shù)組形式：要簡單地聲明需要接收的屬性，而不進行類型檢查或設(shè)置默認(rèn)值。

export default {
  props: ['message']
}

對象形式：對 props 進行更詳細的配置，指定類型、默認(rèn)值或自定義驗證規(guī)則。

export default {
  props: {
    message: {
      type: String, // 指定 prop 類型
      required: true, // 標(biāo)記 prop 為必填
      default: 'default message', // 設(shè)置默認(rèn)值
      validator(value) { // 自定義驗證函數(shù)
        return value.length <= 10;
      }
    }
  }
}

websocket和Vue2中的props實時更新數(shù)據(jù)

父組件中配置websocket

num作為數(shù)據(jù)更新的信號，用props將num數(shù)據(jù)傳給子組件

<template>
    <div>
      <Test :num ="num"></Test>
    <Form class="form"  :num ="num"></Form>
    </div>
</template>
<script>
export default {
// ------
  mounted(){
        // websocket 更新
    this.setupWebSocket();
  },
  methods: {
    setupWebSocket() {
      this.ws = new WebSocket(`ws://localhost:8081/example/ws/${999}`);
      console.log(this.ws);
      this.ws.addEventListener('open', this.openHandle);
      this.ws.addEventListener('message', this.messageHandle);
      this.ws.addEventListener('close', this.closeHandle);
      this.ws.addEventListener('error', this.errorHandle);
    },
    openHandle() {
      console.log('WebSocket連接成功?。。。?);
    },
    closeHandle() {
      console.log('WebSocket關(guān)閉?。。。?);
      if (!this.isHandle) {
        this.restart();
      }
      this.isHandle = false;
    },
    // 收到消息更新數(shù)據(jù)
    messageHandle(data) {
      console.log('前端接收到消息?。。?！',data);
      // 使組件重新加載
      // this.$forceUpdate()
      this.num =this.num + 1  // 數(shù)據(jù)更新的信號
    },
    errorHandle() {
      console.log('WebSocket出錯了?。。?！');
      console.log('error');
    },
    sendMessage() {
      console.log('我發(fā)送了消息');
      // this.ws.send('請傳數(shù)據(jù)給我！'+input);
    },
    closeWs() {
      this.ws.close();
    },
    restart() {
      console.log('客戶端與服務(wù)器連接失敗，準(zhǔn)備重連');
      this.timer = setInterval(() => {
        console.log('重連中...');
        this.ws = new WebSocket(`ws://localhost:8081/example/ws/${999}`);
        if (this.ws.readyState === 1) {
          clearInterval(this.timer);
          this.timer = null;
          this.ws.addEventListener('open', this.openHandle);
          this.ws.addEventListener('close', this.closeHandle);
          this.ws.addEventListener('message', this.messageHandle);
          this.ws.addEventListener('error', this.errorHandle);
          console.log('重連成功');
        }
      }, 1000);
    },
  }
// ------
}
</script>

子組件接收num數(shù)據(jù)，并用watch監(jiān)聽num數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變的時候，重新發(fā)送get請求

<script>
export default {
// ------
     props:{
    //更新信號
    num:{
      type: Number,
      default:0,
    },
  },
    // 監(jiān)聽num
     watch:{
    num(newVal,oldVal) {
      console.log('newValpf :',newVal,'oldValpf :',oldVal)
      this.getInfo();  // 重新發(fā)送請求
    },
  },
    // get請求
     methods: {
    getInfo() {
       axios({
          url:'/api/outstanding-kid/kid/getAllUsers',
          method:'get'
        }).then((data)=>{
          // console.log(data.data.data);
          const electric = data.data.data.map(item => item.electric)
          const id = data.data.data.map(item => item.id)
          this.ChartView(electric,id)
        }).catch((error)=>{
          console.dir(error);
        })
    },
//------
}
</script>

通過websocket更新http請求的好處

低延遲和實時性：WebSocket建立了一條持久的雙向通信通道，數(shù)據(jù)可以在服務(wù)器和客戶端之間即時傳輸，幾乎消除了傳統(tǒng)HTTP請求中的延遲。
減少網(wǎng)絡(luò)帶寬和服務(wù)器資源消耗：由于WebSocket僅需建立一次連接，而后復(fù)用該連接傳輸多次數(shù)據(jù)，相比HTTP輪詢減少了建立和斷開連接的次數(shù)，從而節(jié)省了網(wǎng)絡(luò)資源和服務(wù)器負載。HTTP輪詢即使沒有新數(shù)據(jù)，也會定期發(fā)送請求，浪費了帶寬和計算資源。
提高效率和用戶體驗：WebSocket減少了不必要的HTTP頭部信息傳輸，減輕了數(shù)據(jù)傳輸?shù)呢摀?dān)。對于頻繁交互的應(yīng)用，這能夠顯著提升響應(yīng)速度和用戶體驗。