What is the best way to implement generators in express.js streams?

Currently, this is the code snippet I am using:

app.get('/foo', (req, res) => {

  res.set('Content-type', 'text/plain');
  res.set('Transfer-Encoding', 'chunked');

  const stream = new Stream.Readable({ read() { } });
  stream.pipe(res);

  for (let i = 0; i < 10; i++) {
    let result = JSON.stringify({ bar: i});
    res.cork();
    stream.push(`${result}\n`);
    freeze(50);
    process.nextTick(() => res.uncork());
  }

  res.end();

})

Is it feasible for the client to request the next 'bar' object using a generator function, allowing the client to control when the next 'bar' object will be streamed?

Answer №1

Big shoutout to robertklep for the awesome suggestion. I decided to go with socket.io and created a simple example where the client has control over the pace of the stream.

On the Server Side:

const express = require('express');
const app = express();

const http = require('http');
const { Server } = require("socket.io");

function* numsGenerator() {
  for (let i = 0; i < 10; i++) {
    yield i;
  }
}

const server = http.createServer(app);
const io = new Server(server, { cors: { origin: '*' } });

io.of("/stream").on("connection", (socket) => {
  const gen = numsGenerator();
  socket.on('stream:get', () => {
    socket.emit('stream:result', gen.next());
  });

});

const port = 4000;
server.listen(port, () => {
  console.log('\nReady for requests on http://localhost:' + port);
});

On the Client Side:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script type="module">
    import { io } from "https://cdn.socket.io/4.5.1/socket.io.esm.min.js";

    const socket = io("ws://localhost:4000/stream");

    socket.emit('stream:get');

    socket.on("stream:result", (result) => {
      console.log(result);
      if (result.done) return;
      socket.emit('stream:get');
    });

  </script>

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Initial argument for the event listener

If I have event handlers registered inline in my markup (even though it's deprecated) like span id="..." onclick="foo(p1,p2,p3)" how do I access the "event" object in the event handler function foo? Is changing the above to span ...

Steps to remove OTP from dynamodb after a specified time period (2 minutes)

Recently, I have been utilizing the setImmediate Timeout function to call the deleteOTP function with details such as the userId of the OTP to be deleted. However, I am encountering challenges when passing the argument (userId) to the deleteOTP function ...

The hover effect becomes disabled once the slider is toggled

My table has a feature where I can change the background color and other elements using a slider. However, I'm facing an issue where the hover effect on the table stops working when I toggle the slider on or off. I attempted to solve this with a funct ...

What are some strategies for breaking down large components in React?

Picture yourself working on a complex component, with multiple methods to handle a specific task. As you continue developing this component, you may consider refactoring it by breaking it down into smaller parts, resembling molecules composed of atoms (it ...

Addressing the issue with this.setState and this.state on the Registration page

I am facing an issue with my Registration Page code. I am trying to send data to a database using this.setState and this.state, but every time I run the code, it shows an error in the onSubmit function related to this.state. Can someone please help me unde ...

Utilizing React Refs to Retrieve Value from HTML Select Element

I am currently working on a form that includes the use of an HTML select element. <select className="form-control" id="ntype" required > <option value = "">None</option> <option value = "1">1</option> < ...

Nodejs and javascript are utilized to create dynamic SES emails

I have successfully implemented sending an email using node-ses client.sendEmail({ to: to_id, , cc: cc_id, , bcc: bcc_id, , subject: 'greetings' , message: 'your <b>message</b> goes here' , altText: 'plain text& ...

The React Router onEnter Function Error: "Maximum call stack size exceeded"

I'm currently checking if a specific configuration value is set, and if it is, I want to redirect to a child route. If not, the page should display as usual. However, when I implement this code, the URL updates as expected but then seems to get stuck ...

Question about React.js: What is the best way to add multiple classes to a component by using a ternary operator?

I am looking to apply multiple classes to a component by utilizing a ternary operator. In our shared ts theme file, we have the general button styles defined, but for this specific component, I want to adjust the sizes based on screen width. To achieve thi ...

What is the best way to reference a const from a different class in React?

I'm relatively new to ReactJS, specifically using NextJS. In my project, I have two files - index.js and welcome.js In index.js, I've added Welcome as a component, along with a const called hideWelcome to hide the component and perform some acti ...

"Here's a neat trick for assigning the value of a div to a text box without any identifiers like id or

I needed a way to transfer the value of a .item div into an empty textbox without any specific identifier. Then, when the input loses focus, the value should be sent back to the original .item div. $(document).on("click", ".item", function() { $(this) ...

What are effective ways to work around the CORS policy while making get/post requests from within React JS?

My React JS application is encountering an issue with CORS policy while trying to fetch data from servers in other domains. Despite using http-proxy-middleware and setting up the necessary proxy, I am still unable to make successful get/post calls to the e ...

What are the steps to resolve the "Address already in use" error in an Azure app service?

My nodejs/express application is being deployed to Azure Appservice on the Linux platform. Azure assigns port 8080 for the app to run on, but upon deployment, I encounter the following error: Error listen EADDRINUSE: address already in use :::8181 error Co ...

Using Blob to save CSV file on Safari

Here are the codes I am using to generate a download link for users to download a .csv file from my website. var link = document.createElement("a"); link.id = "csvDwnLink"; window.URL = window.URL || window.webkitURL; var csv = "\ufeff" + CSV, b ...

One-time exchange of JSON information from server to client using ExpressJS

I'm currently working on an expressJS project that involves transferring approximately 50mb (exact size may vary due to compression) of JSON data from the server to the client during the initial load of the application. I'm facing challenges in f ...

jQuery on-click event malfunctioning as expected

I'm currently developing a project that utilizes the GIPHY API to retrieve GIFs. Each time a search is performed, I am storing the search history as individual buttons which users can click on to view the results without needing to re-enter the search ...

Is it possible to exclusively deploy the backend of my React Native app on Heroku?

I am currently developing a react native app with expo, using node.js and Express for the backend. My project structure consists of a frontend folder and a backend (server) folder within the root directory. Root | |Frontend |Various screens & assoc ...

How can dependencies be conditionally imported in a module that is shared between React (Next.js) and React Native?

I am looking to create a shared Typescript module that can be used in both a React (Next.js) web app and React Native mobile apps. This module will be responsible for managing communication with the backend (Firebase) and handling state management using t ...

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Exploring angular for the first time and dabbling with the trello API. I have an array containing some list IDs that I need to make HTTP GET calls for, equal to the length of the array. For instance, if there are two IDs in the array, then the HTTP call sh ...

Ways to close jQuery Tools Overlay with a click, regardless of its location

I have integrated the Overlay effect from jQuery Tools to my website, with the "Minimum Setup" option. However, I noticed that in order to close it, the user has to specifically target a small circle in the upper right corner which can affect usability. It ...