目录
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头部信息传输,减轻了数据传输的负担。对于频繁交互的应用,这能够显著提升响应速度和用户体验。