send multiple data from backend to front end

Question

I am using the fetch api to get data from backend. The data I am getting is dynamic and more and more data keeps producing. What I want is to send the data to the front end when I get the data in the backend. How can I achieve this? I have coded a sample example of my senario below. Thanks in advance

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

WebSockets or Server Sent Events

Marc
– Marc

2022-09-22 10:27:22 +00:00
Commented Sep 22, 2022 at 10:27 — Marc
– Marc, Commented Sep 22, 2022 at 10:27

umer bilal · Accepted Answer · 2022-09-22 10:51:28Z

2

You can use sockets to get your desired output. You can follow this link for more info Send message to specific client with socket.io and 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);

edited Sep 22, 2022 at 10:51

answered Sep 22, 2022 at 10:50

umer bilal

1013 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

seriously Over a year ago

then how do I access numbers on client side?

umer bilal Over a year ago

check the link i referred they provide client and server side implementation

umer bilal Over a year ago

you can also use this simple chat example and use it in your code with little modifications socket.io/get-started/chat

seriously Over a year ago

how can I allow cors with your code?

umer bilal Over a year ago

you can use cors package for express like => app.use(cors())

SuperNoob · Accepted Answer · 2022-09-22 10:33:57Z

1

For passing data from the back-end to the front-end dynamically, you can use jQuery AJAX

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

In your case, you can call the AJAX endpoint once every few minutes or so to get the new data.

answered Sep 22, 2022 at 10:33

SuperNoob

231 silver badge7 bronze badges

1 Comment

seriously Over a year ago

I can do that with fetch too but that's not the solution Im looking for

umer bilal · Accepted Answer · 2022-09-22 10:35:37Z

0

In REST API structure you can send a response to an API only once. You cannot use setInterval to generate multiple response. instead you should add all possible data in array and put that array in your response once.

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

edited Sep 22, 2022 at 10:35

answered Sep 22, 2022 at 10:31

umer bilal

1013 bronze badges

4 Comments

seriously Over a year ago

My data is dynamic and I need the data as soon as I got it in the backend

umer bilal Over a year ago

can you please explain it in detail?

umer bilal Over a year ago

if you want to get data dynamic from the server then you can use sockets

seriously Over a year ago

say my celling is 2000 I can't wait until 2000 is reached I need to access the data in front end as soon as I get it in the back end

Fiehra · Accepted Answer · 2022-09-22 10:47:31Z

If I understand correctly you want to send server events from your server to your frontend as soon as data changes on the server. In order to achieve this you will need websocket connections from frontend to server. websockets are a bidirectional connection between your server and client. while the clients are connected to the server via sockets, the server can send events to the frontend without receiving a request first. I suggest using socket.io for this.

You can find more info about socket.io here: https://socket.io/docs/v4/

There are more alternatives like the websocketAPI. more info about websocketAPI you can find in mozilla webdocs here: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

Also I found this article on how to implement websockets without socket.io as socket.io is more like a framework on top of normal websockets: https://www.piesocket.com/blog/nodejs-websocket

Collectives™ on Stack Overflow

send multiple data from backend to front end

4 Answers 4

5 Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related