如何设置获取此 websockets 数据的时间间隔？

Posted 2023-02-16

【中文标题】如何设置获取此 websockets 数据的时间间隔？

【英文标题】：how to set the interval at which this websockets data is fetched?

【发布时间】：2021-11-25 09:44:42

【问题描述】：

这是代码--->

const delay = 5000;
    
let ws = new WebSocket('wss://stream.binance.com:9443/ws/ethusdt@trade');
let priceElement1 = document.getElementById('ethprice');
let lastPrice1 = null

ws.onmessage = (event) => 
    let stockObject = JSON.parse(event.data);
    let price = parseFloat(stockObject.p).toFixed(2);
    priceElement1.innerText = price;
    priceElement1.style.color = !lastPrice1 || lastPrice1 === price ? 'white' : price > lastPrice1 ? '#AAFF00' : 'red';
    lastPrice1 = price;
;

---

我试图让它不是每 1ms 向元素传输数据，而是每 5000ms 执行一次。

这是我的第一个堆栈溢出帖子，如果它不好，我几个月前才开始接触 html css 和 js，我正在努力解决更困难的任务。

谢谢！

【参考方案1】：

一般情况下，websocket 数据不会被获取，而是在服务器发送后立即接收。这就是为什么首先使用 websockets 而不是其他方法（如 ajax 轮询）。

在您的情况下，您可以简单地将传入消息保存到一个变量中，并且每 5 秒检查一次该变量的更新。 这可能如下所示：

const delay = 5000;

let ws = new WebSocket('wss://stream.binance.com:9443/ws/ethusdt@trade');
let priceElement1 = document.getElementById('ethprice');
let lastPrice1 = null
let stockObject = null;

ws.onmessage = (event) => 
    stockObject = JSON.parse(event.data);
;

setInterval(() => 
    if(stockObject === null) 
        return;
    
    let price = parseFloat(stockObject.p).toFixed(2);
    priceElement1.innerText = price;
    priceElement1.style.color = !lastPrice1 || lastPrice1 === price ? 'white' : price > lastPrice1 ? '#AAFF00' : 'red';
    lastPrice1 = price;
    stockObject = null;
, delay);