1. 方案一：

在頁面中使用?setInterval?每隔幾秒去獲取一下數(shù)據(jù)。偽代碼如下：

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 純前端無法獨立完成，需要后臺?配合提供相應(yīng)的接口。

3. 方案三：

使用SSE(Server-Sent Events)， 純前端無法獨立完成，需要后臺?配合提供相應(yīng)的接口。

SSE優(yōu)點

• SSE 使用 HTTP 協(xié)議，現(xiàn)有的服務(wù)器軟件都支持。WebSocket 是一個獨立協(xié)議。
• SSE 屬于輕量級，使用簡單；WebSocket 協(xié)議相對復(fù)雜。
• SSE 默認(rèn)支持?jǐn)嗑€重連，WebSocket 需要自己實現(xiàn)。
• SSE 一般只用來傳送文本，二進(jìn)制數(shù)據(jù)需要編碼后傳送，WebSocket 默認(rèn)支持傳送二進(jìn)制數(shù)據(jù)。
• SSE 支持自定義發(fā)送的消息類型。

實現(xiàn)代碼如下：

客戶端：

created(){
    this.getDataList()
},
methods: {
   getDataList() {
      var _this = this
      // 使用node來啟一個服務(wù)
      const source = new EventSource('http://localhost:9528/getlist')
      // readyState
      // 0 可能是第一次鏈接，也可能是斷開鏈接了又重新鏈接，客戶端和服務(wù)器正在鏈接，還沒有鏈接上
      // 1 客戶端和服務(wù)器鏈接上了，就可以接受服務(wù)器數(shù)據(jù)
      // 2 徹底斷開鏈接并且不在重連
      console.log('source==>', source)
      console.log(EventSource.CONNECTING) // 0
      console.log(EventSource.OPEN) // 1
      console.log(EventSource.CLOSED) // 2

      // open事件是 客戶端和服務(wù)器鏈接上觸發(fā)
      source.onopen = function(event) {
        console.log('onopen===>', event)
      }
      // message 事件 是服務(wù)器向客戶度發(fā)送消息時觸發(fā)
      source.onmessage = function(event) {
        console.log('onmessage===>', event)
        // 服務(wù)端發(fā)送的數(shù)據(jù) event.data
        _this.orderList = JSON.parse(event.data)
      }
      // 是服務(wù)器和客戶端 鏈接出錯時觸發(fā)
      source.onerror = function(event) {
        console.log('onerror===>', event)
      }
    }
}

服務(wù)端：

使用node簡單的啟動一個服務(wù)：

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);
  // 發(fā)送 data 由 message組成 \n\n
  // mesage id,data,retry,event
  // data:數(shù)據(jù)
  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("服務(wù)已啟動。。。端口9528");
})

參考文章文章來源地址http://www.zghlxwxcb.cn/news/detail-743204.html

到了這里，關(guān)于前端大屏數(shù)據(jù)實時更新的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！