CODEWITHSUNDEEP
javascriptnode.jshttpresponserxjs5multipart
Hitmands
Hitmands

Reputation: 14159

Dynamic Chunked Response in NodeJS

Given the following javascript pseudo code (example 1),
as you can see, there are 3 async streams which in turn write to the response. They will of course write to the response in an async way, so the order of the chunks is not kept (it is actually unpredictable).

import pre from './pre';
import content from './content';
import post from './post';

export function renderIndex(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/html; charset=utf-8',
    'Transfer-Encoding': 'chunked',
  });

  const onEnd = () => {
    if(!pre._readableState.ended) return;
    if(!body._readableState.ended) return;
    if(!post._readableState.ended) return;

    res.end();
  };

  pre.on('data', (chunk) => { res.write(chunk); }).on('end', onEnd);
  body.on('data', (chunk) => { res.write(chunk); }).on('end', onEnd);
  post.on('data', (chunk) => { res.write(chunk); }).on('end', onEnd);
}

is it possible to tell the client the position of each chunk of data?

I'd like to achieve something like this:

// ---- Stream 1 keep open
<html>
  <head>
  ...
  ...
  ...
  ...


// --- Stream 2 keep open

<body>
  ...
  ...
  ...

// --- Stream 3 keep open
<script src="..."></script>
<script src="..."></script>
<script src="..."></script>


// --- Stream 1 CLOSE
  </head>

// --- Stream 2 CLOSE
  </body>

// --- Stream 3 CLOSE
  </html>


// res.end()
  1. Range Requests
  2. Multipart Range

Marble-like Explanation:

Upvotes: 0

Views: 538

Answers (2)

kharandziuk
kharandziuk

Reputation: 12870

I believe you can achieve expected behavior with a library called highland.js. It gives you a way to perform some operations on top of streams

/*
the sample to show how it works
H([
  H([1, 2, 3]),
  H([4, 5, 6])
]).sequence().pipe(process.stdout);
*/

import pre from './pre';
import content from './content';
import post from './post';
const H = require('highland')

export function renderIndex(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/html; charset=utf-8',
    'Transfer-Encoding': 'chunked',
  });

  H([
    pre,
    content,
    post
  ]).sequence().pipe(res);
}

Upvotes: 1

hsz
hsz

Reputation: 152206

The simplest way to solve it is to write chunks into dedicated variables and on end event, write whole pre/body/post response to the res.

Upvotes: 0

Related Questions