將多個數據從后端發送到前端

Question

我正在使用 fetch api 從后端獲取數據。 我得到的數據是動態的，越來越多的數據不斷產生。 我想要的是當我在后端獲取數據時將數據發送到前端。 我怎樣才能做到這一點？ 我在下面編寫了一個示例示例。 提前致謝

 fetch('/api/blah', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ request: `{"requestType": "numbers"}` }) }).then((res) => res.json()).then(data => { if (data.status == 'success') { const numbers = data.numbers console.log(numbers) } });

 const distribution = async(req, res) => { const request = JSON.parse(req.body.request) if (request.requestType == 'numbers') { var ceiling = 100; var floor = 1; var x = 1; var step = 1; setInterval(function() { res.send({ status: 'success', numbers: x }) x += step; if (x === ceiling || x === floor) { step = -step; } }, 500); } }

Answer 1

您可以使用 sockets 來獲得您想要的 output。 您可以點擊此鏈接了解更多信息使用 socket.io 和 node.js 向特定客戶端發送消息

     const
            {Server} = require("socket.io"),
            server = new Server(8000);
        
      var ceiling = 100;
        var floor = 1;
        var x = 1;
        var step = 1;
        
        let
            sequenceNumberByClient = new Map();
        
        // event fired every time a new client connects:
        server.on("connection", (socket) => {
            console.info(`Client connected [id=${socket.id}]`);
            // initialize this client's sequence number
            sequenceNumberByClient.set(socket, 1);
        
            // when socket disconnects, remove it from the list:
            socket.on("disconnect", () => {
                sequenceNumberByClient.delete(socket);
                console.info(`Client gone [id=${socket.id}]`);
            });
        });
        
        //emit your data to specific channel
        setInterval(function() {
  for (const [client, sequenceNumber] of sequenceNumberByClient.entries()) {
           client.emit("numbers", x);
          x += step;
          if (x === ceiling || x === floor) {
            step = -step;
          }
}
        }, 500);

Answer 2

在 REST API 結構中，您只能向 API 發送一次響應。 您不能使用 setInterval 生成多個響應。 相反，您應該將所有可能的數據添加到數組中，並將該數組放入您的響應中一次。

const distribution = async (req, res) => {

  const request = JSON.parse(req.body.request);

  if (request.requestType == "numbers") {

    var ceiling = 100;
    var step = 1;
    var return_arr = [];

    for (let i = 1; i <= ceiling; i += step) {
      return_arr.push(i);
    }

    res.send({
      status: "success",
      numbers: return_arr,
    });
  }
};

Answer 3

對於從后端動態傳遞數據到前端，您可以使用 jQuery AJAX

https://www.w3schools.com/js/js_ajax_intro.asp

在您的情況下，您可以每隔幾分鍾左右調用一次 AJAX 端點以獲取新數據。

Answer 4

如果我理解正確，您希望在服務器上的數據更改后立即將服務器事件從您的服務器發送到您的前端。 為了實現這一點，您需要從前端到服務器的 websocket 連接。 websockets 是服務器和客戶端之間的雙向連接。 當客戶端通過 sockets 連接到服務器時，服務器可以在不先接收請求的情況下向前端發送事件。 我建議為此使用 socket.io。

您可以在此處找到有關 socket.io 的更多信息： https://socket.io/docs/v4/

還有更多替代方案，例如 websocketAPI。 有關 websocketAPI 的更多信息，您可以在此處的 mozilla webdocs 中找到：https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

我還發現這篇關於如何在沒有 socket.io 的情況下實現 websockets 的文章，因為 socket.io 更像是普通 websockets 之上的框架： https/websocket/nodesocket.com