kigiri/test-partial-http-request.js

## test-partial-http-request.js
const { createServer, get } = require('http')

const index = `
<!DOCTYPE html>
<html>
<head>
  <title>streamable</title>
  <meta charset="utf-8">
</head>
<body>

ouvre la console

<script type="module">${(() => {
  const getNextLine = onData => {
    const decoder = new TextDecoder('utf-8')
    let buffer = ''

    return (value, done) => {
      if (done) return buffer && JSON.parse(buffer)
      buffer += decoder.decode(value)
      let start = 0
      let end = buffer.indexOf('\x1E', start)
      while (end >= 0) {
        const part = buffer.slice(start, end)
        part && onData(JSON.parse(part))
        start = end + 1
        end = buffer.indexOf('\x1E', start)
      }
      buffer = buffer.slice(start)
    }
  }

  // Fetch method, chrome and others
  const fetchStream = async onData => {
    const partReader = getNextLine(onData)
    const response = await fetch('http://localhost:5475/stream')
    const reader = response.body.getReader()

    const bodyReader = ({ value, done }) => {
      const result = partReader(value, done)
      if (done) return result
      return reader.read().then(bodyReader)
    }

    return reader.read().then(bodyReader)
  }

  // XHR method, firefox only
  const xhrStream = onData =>
    new Promise((resolve, reject) => {
      const partReader = getNextLine(onData)
      const request = new XMLHttpRequest()
      request.responseType = 'moz-chunked-arraybuffer'

      request.addEventListener('progress', progress => {
        try {
          partReader(request.response)
        } catch (err) {
          request.abort()
          reject(err)
        }
      })

      request.addEventListener('load', () => {
        try {
          resolve(partReader(undefined, true))
        } catch (err) {
          reject(err)
        }
      })

      request.addEventListener('error', event => {
        const error = new Error('request failed')
        error.event = event
        reject(error)
      })

      request.open('GET', 'http://localhost:5475/stream')
      request.send()
    })

  const isFirefox = navigator.userAgent.search('Firefox') > -1
  if (isFirefox) {
    xhrStream(console.log)
      .then(result => console.log({ result }))
      .catch(console.warn)
  } else {
    fetchStream(console.log)
      .then(result => console.log({ result }))
      .catch(console.error)
  }
})
  .toString()
  .slice(7, -1)}</script>
</body>
</html>
`

createServer((req, res) => {
  if (!req.url.startsWith('/stream')) return res.end(index)
  console.log('handeling request...')

  let count = 0
  let interval = setInterval(() => {
    if (++count > 10) {
      clearInterval(interval)
      return res.end(`\x1E${JSON.stringify({ count, done: true })}`)
    }
    res.write(`\x1E${JSON.stringify({ count })}`)
  }, 1000)

}).listen(5475, err => {
  err ? console.error(err) : console.log(`http://localhost:5475`)
})
	const { createServer, get } = require('http')

	const index = `
	<!DOCTYPE html>
	<html>
	<head>
	<title>streamable</title>
	<meta charset="utf-8">
	</head>
	<body>

	ouvre la console

	<script type="module">${(() => {
	const getNextLine = onData => {
	const decoder = new TextDecoder('utf-8')
	let buffer = ''

	return (value, done) => {
	if (done) return buffer && JSON.parse(buffer)
	buffer += decoder.decode(value)
	let start = 0
	let end = buffer.indexOf('\x1E', start)
	while (end >= 0) {
	const part = buffer.slice(start, end)
	part && onData(JSON.parse(part))
	start = end + 1
	end = buffer.indexOf('\x1E', start)
	}
	buffer = buffer.slice(start)
	}
	}

	// Fetch method, chrome and others
	const fetchStream = async onData => {
	const partReader = getNextLine(onData)
	const response = await fetch('http://localhost:5475/stream')
	const reader = response.body.getReader()

	const bodyReader = ({ value, done }) => {
	const result = partReader(value, done)
	if (done) return result
	return reader.read().then(bodyReader)
	}

	return reader.read().then(bodyReader)
	}

	// XHR method, firefox only
	const xhrStream = onData =>
	new Promise((resolve, reject) => {
	const partReader = getNextLine(onData)
	const request = new XMLHttpRequest()
	request.responseType = 'moz-chunked-arraybuffer'

	request.addEventListener('progress', progress => {
	try {
	partReader(request.response)
	} catch (err) {
	request.abort()
	reject(err)
	}
	})

	request.addEventListener('load', () => {
	try {
	resolve(partReader(undefined, true))
	} catch (err) {
	reject(err)
	}
	})

	request.addEventListener('error', event => {
	const error = new Error('request failed')
	error.event = event
	reject(error)
	})

	request.open('GET', 'http://localhost:5475/stream')
	request.send()
	})

	const isFirefox = navigator.userAgent.search('Firefox') > -1
	if (isFirefox) {
	xhrStream(console.log)
	.then(result => console.log({ result }))
	.catch(console.warn)
	} else {
	fetchStream(console.log)
	.then(result => console.log({ result }))
	.catch(console.error)
	}
	})
	.toString()
	.slice(7, -1)}</script>
	</body>
	</html>
	`

	createServer((req, res) => {
	if (!req.url.startsWith('/stream')) return res.end(index)
	console.log('handeling request...')

	let count = 0
	let interval = setInterval(() => {
	if (++count > 10) {
	clearInterval(interval)
	return res.end(`\x1E${JSON.stringify({ count, done: true })}`)
	}
	res.write(`\x1E${JSON.stringify({ count })}`)
	}, 1000)

	}).listen(5475, err => {
	err ? console.error(err) : console.log(`http://localhost:5475`)
	})