首页 > 网络编程 > JavaScript > javascript类库 > vue.js > websocket和Vue2中props实时更新数据

使用websocket和Vue2中的props实时更新数据方式

2024-08-09 09:59:52 作者：守得云开见繁星

这篇文章主要介绍了使用websocket和Vue2中的props实时更新数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

web的概念和使用

WebSocket 是一种在客户端和服务器之间提供长寿命、双向通信的协议。

它不同于传统的HTTP协议，HTTP协议主要用于从客户端向服务器请求资源，而WebSocket则为应用程序提供了全双工（full-duplex）的通信渠道，允许服务器和客户端在建立连接后随时主动向对方发送数据。

WebSocket的特点

持久连接：一旦WebSocket连接建立，客户端和服务器就可以在不关闭连接的情况下进行多次数据交换，这减少了建立和关闭连接的开销。
全双工通信：双方都可以同时发送和接收数据，无需等待对方的响应，这对于实时应用（如在线聊天、游戏、协同编辑、实时交易系统等）非常有利。
低延迟：相比轮询和长轮询技术，WebSocket减少了不必要的网络传输和延迟，提供了近乎实时的数据传输能力。
轻量级：虽然基于TCP，但WebSocket在HTTP握手之后使用了自己的更简单的帧协议，优化了数据传输效率。

WebSocket的工作流程

握手：客户端首先通过HTTP请求发起连接，并包含Upgrade头信息，表示希望协议升级为WebSocket。服务器确认并同意升级后，连接转为WebSocket协议。
数据传输：建立连接后，客户端和服务器可以开始互相发送数据片段（称为“消息”或“帧”）。这些数据可以是文本也可以是二进制格式，并且可以实时传输。
关闭连接：当一方完成数据传输或需要终止连接时，会发送关闭控制帧。收到关闭指令后，双方会清理资源，关闭连接。

props的概念和使用

在 Vue 2 中，props 是一种特性，用于父组件向子组件传递数据。

数据是单向绑定的，数据只能从父组件流向子组件。

使用 props 可以让组件更加模块化和可复用。

props的使用

数组形式：要简单地声明需要接收的属性，而不进行类型检查或设置默认值。

export default {
  props: ['message']
}

对象形式：对 props 进行更详细的配置，指定类型、默认值或自定义验证规则。

export default {
  props: {
    message: {
      type: String, // 指定 prop 类型
      required: true, // 标记 prop 为必填
      default: 'default message', // 设置默认值
      validator(value) { // 自定义验证函数
        return value.length <= 10;
      }
    }
  }
}

websocket和Vue2中的props实时更新数据

父组件中配置websocket

num作为数据更新的信号，用props将num数据传给子组件

<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关闭！！！！');
      if (!this.isHandle) {
        this.restart();
      }
      this.isHandle = false;
    },
    // 收到消息更新数据
    messageHandle(data) {
      console.log('前端接收到消息！！！！',data);
      // 使组件重新加载
      // this.$forceUpdate()
      this.num =this.num + 1  // 数据更新的信号
    },
    errorHandle() {
      console.log('WebSocket出错了！！！！');
      console.log('error');
    },
    sendMessage() {
      console.log('我发送了消息');
      // this.ws.send('请传数据给我！'+input);
    },
    closeWs() {
      this.ws.close();
    },
    restart() {
      console.log('客户端与服务器连接失败，准备重连');
      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数据，并用watch监听num数据，当数据发生改变的时候，重新发送get请求

<script>
export default {
// ------
     props:{
    //更新信号
    num:{
      type: Number,
      default:0,
    },
  },
    // 监听num
     watch:{
    num(newVal,oldVal) {
      console.log('newValpf :',newVal,'oldValpf :',oldVal)
      this.getInfo();  // 重新发送请求
    },
  },
    // 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建立了一条持久的双向通信通道，数据可以在服务器和客户端之间即时传输，几乎消除了传统HTTP请求中的延迟。
减少网络带宽和服务器资源消耗：由于WebSocket仅需建立一次连接，而后复用该连接传输多次数据，相比HTTP轮询减少了建立和断开连接的次数，从而节省了网络资源和服务器负载。HTTP轮询即使没有新数据，也会定期发送请求，浪费了带宽和计算资源。
提高效率和用户体验：WebSocket减少了不必要的HTTP头部信息传输，减轻了数据传输的负担。对于频繁交互的应用，这能够显著提升响应速度和用户体验。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。