前端大屏数据实时更新

1. 方案一：

在页面中使用 setInterval 每隔几秒去获取一下数据。伪代码如下：

created() {    this.getLatestData()},destroyed(){    clearInterval(this.timerId)}methods: { getLatestData() {     this.timerId = setInterval(async() => {        const res = await getLatestDataApi()        const { data } = res        this.list = data      }, 1000 * 5)    }}

一般不建议这样使用，因为会给页面造成性能问题。

2. 方案二：

使用 websocket
如果使用 websocket 纯前端无法独立完成，需要后台 配合提供相应的接口。

3. 方案三：

使用SSE(Server-Sent Events)， 纯前端无法独立完成，需要后台 配合提供相应的接口。

SSE优点

SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。SSE 默认支持断线重连，WebSocket 需要自己实现。SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。SSE 支持自定义发送的消息类型。

实现代码如下：

客户端：

created(){    this.getDataList()},methods: {   getDataList() {      var _this = this      // 使用node来启一个服务      const source = new EventSource('http://localhost:9528/getlist')      // readyState      // 0 可能是第一次链接，也可能是断开链接了又重新链接，客户端和服务器正在链接，还没有链接上      // 1 客户端和服务器链接上了，就可以接受服务器数据      // 2 彻底断开链接并且不在重连      console.log('source==>', source)      console.log(EventSource.CONNECTING) // 0      console.log(EventSource.OPEN) // 1      console.log(EventSource.CLOSED) // 2      // open事件是 客户端和服务器链接上触发      source.onopen = function(event) {        console.log('onopen===>', event)      }      // message 事件 是服务器向客户度发送消息时触发      source.onmessage = function(event) {        console.log('onmessage===>', event)        // 服务端发送的数据 event.data        _this.orderList = JSON.parse(event.data)      }      // 是服务器和客户端 链接出错时触发      source.onerror = function(event) {        console.log('onerror===>', event)      }    }}

服务端：

使用node简单的启动一个服务：

mockData.js

// const orderData = [//   {//     date: '2022-9-27',//     order: 50,//     returnOrder: 2//   },//   {//     date: '2022-9-27',//     order: 50,//     returnOrder: 2//   }// ]// console.log(orderData) function getOrderList() {  const orderData = []  for (let i = 1; i <= 30; i++) {    orderData.push({      date: `2022-09-${i > 9 ? i : '0' + i}`,      order: randomLowerBUpper(50, 100),      returnOrder: randomLowerBUpper(5, 10)    })  }  return orderData}function randomLowerBUpper(lower, upper) {  const choice = upper - lower + 1  return Math.floor(Math.random() * choice + lower)}module.exports = getOrderList

index.js

const http = require('http');const getOrderList = require('./mockData.js')const server = http.createServer((req,res)=>{  const url = req.url  console.log(url);  // 发送 data 由 message组成 \n\n  // mesage id,data,retry,event  // data:数据  if(url=="/getlist"){    res.writeHead(200, {      "Content-Type":"text/event-stream",      "Cache-Control":"no-cache",      "Connection":"keep-alive",      "Access-Control-Allow-Origin": '*', // 解决跨域    });    res.write("retry: 10000\n");    interval = setInterval(function () {      res.write("data: " + JSON.stringify(getOrderList()) + "\n\n");    }, 1000*5);    req.connection.addListener("close", function () {      clearInterval(interval);    }, false);  }  // res.end()})server.listen(9528,()=>{  console.log("服务已启动。。。端口9528");})

参考文章