前端大屏数据实时更新

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");
})

参考文章