web端数据实时更新是如何实现的？
web端数据实时更新是如何实现的？
为了实现Web端数据的实时更新，我们可以使⽤两种⽅式。
Ajax 轮询，通过定时器，定时刷新数据，但是实时性不够，且造成服务器的压⼒⽐较⼤
HTTP协议⼯作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。
http建⽴在tcp协议之上，tcp是双向连接的，但是http协议是请求才会有响应，⼀旦请求完就会释放连接，⽆法保持长时间的连接，⾃然⽆法完成数据的实时更新。但是可以通过定时器，定时去刷新页⾯，但是这是指标不治本的做法。
websocket协议，双向连接并能够保持长连接。
WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
Websocket是对http协议的升级，升级之后，可以相互发送信息，⽽http协议服务端是⽆法主动发消息给客户端的。
当然我们下⾯的重点肯定就是Websocket协议了。
Websocket简介
WebSocket 协议在2008年诞⽣，2011年成为国际标准。所有主流浏览器都已经⽀持了。
它的最⼤特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的⼀种。
其他特点包括：
（1）建⽴在 TCP 协议之上，服务器端的实现⽐较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端⼝也是80和443，并且握⼿阶段采⽤ HTTP 协议，因此握⼿时不容易屏蔽，能通过各种HTTP 代理服务器。
（3）数据格式⽐较轻量，性能开销⼩，通信⾼效。
（4）可以发送⽂本，也可以发送⼆进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器⽹址就是 URL。
Websocket使⽤场景
聊天室
直播弹幕
实时数据更新
等
Websocket实战
本⼈写博客向来不只是单纯的介绍知识点，⽽是了解了之后，去做出⼀个实际的东西出来。
我们来做⼀个简单的Demo，实现Web端图表数据的实时更新，⽽不⽤去刷新页⾯。
当我们更新数据库中的数据之后，图表中的曲线将会⾃动更新，⽽不⽤通过刷新页⾯。
当然我们可以通过http协议的⽅式去获得数据，但是当数据更新后，必须要刷新页⾯才能看到数据的变化。这就是为什么我们要使⽤Websocket协议的原因了。
使⽤的技术栈为：
后端： go，gin，websocket第三⽅库，gorm
数据库：mysql
前端：vue2，vue-cli，echarts
由于该代码是为了公司的项⽬⽽写，所以将代码架构设计的⽐较详细。在这⾥只贴出核⼼代码。
func WsHandler(c *gin.Context){
var(
wsConn *websocket.Conn
err error
data []byte
pl []float32
)
//从http升级协议为websocket协议
if wsConn, err = upgrader.Upgrade(c.Writer, c.Request,nil);err !=nil{
return// 获取连接失败直接返回
}
for{
//从service层获取数据，并发送到客户端
pl = service.GetData()
data,_= json.Marshal(pl)
if err = wsConn.WriteMessage(websocket.TextMessage, data); err !=nil{
goto ERR // 发送消息失败，关闭连接
}
}
ERR:
// 关闭连接
wsConn.Close()
}
<template>
<div id="myChart":></div>
</template>
<script>
import*as echarts from'echarts';
前端websocket怎么用export default{
name:"Echart",
data(){
return{
}
},
methods:{
drawLine(){
let myChart = echarts.ElementById("myChart"));
let option;
option ={
title:{
"text":"电⼒负荷",
},
xAxis:[{
name:'⽇期',
data:["1","2","3","4","5"]
}],
yAxis:{
name:'电⼒负荷/MW',
type:'value'
},
series:[{
name:'销量',
type:'line',
smooth:'true',
data:[10,20,30,40,50]
}]
};
let ws =new WebSocket("ws://localhost:8081/ws")
console.log("链接成功")
}
let pl =JSON.parse(msg.data)
console.log(pl)
option.series[0].data = pl
option && myChart.setOption(option);
}
}
},
mounted(){
this.drawLine();
}
}
</script>
<style scoped>
</style>
当我们更改数据库中的数据之后
web端的曲线将会实时更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。