Streamování dat pomocí Fetch() a NDJSON

Streamy pronikají do scény, jak hledáme způsoby, jak zlepšit výkon. Co když místo čekání na naše celé Ajax odpověď je dokončena, mohli bychom začít zobrazovat data, jakmile dorazí?

Streamy nám to umožňují. Jsou zdrojem dat, který lze vytvářet a zpracovávat postupně. To znamená, že jakmile budou k dispozici kusy dat, můžeme na nich okamžitě pracovat.

Pomocí rozhraní Fetch API s formátem dat nazvaným NDJSON, který rozděluje větší objekty JSON na menší objekty JSON oddělené znaky nového řádku, jsme schopni přijímat proud menších částí dat JSON jako stream. Jak se naše data NDJSON streamují, můžeme okamžitě začít zpracovávat a vykreslovat. To dělá uživatele šťastnými, protože jsou schopni vidět věci dříve a vývojáři spokojeni, protože to zvyšuje celkový výkon. Pokud toto vše spojíte se servisními pracovníky, pak skutečně uvidíte zlepšení výkonu.

Příklad použití

Jak je vidět níže, můžete použít fetch() s koncovým bodem, který odešle NDJSON, aby začal s těmito daty manipulovat a vykreslovat je řádek po řádku tak, jak je přijímáte.

Zní to jako win-win, ale v čem je háček? No, na npm existují balíčky, jako je ndjson, který serializuje JSON na NDJSON, ale nemáme snadný způsob, jak deserializovat NDJSON na proud objektů JavaScriptu… až do teď!

Představujeme can-ndjson-stream

can-ndjson-stream je jednoduchý modul JavaScriptu, který dělá těžkou práci při serializaci vašeho streamu NDJSON do objektu ReadableStream JavaScriptu. Použijte to stejně jako JSON.parse s objektem JSON.

Chcete-li použít can-ndjson-stream, postupujte podle těchto jednoduchých kroků modul.

//1. require the can-ndjson-stream module
import ndjsonStream from 'can-ndjson-stream';

//2. pass the NDJSON stream response body to the ndjsonStream function. Typically, this would be used with the fetch() method.

const readableStream = ndjsonStream(response.body);  
//3. use readableStream, which is now a ReadableStream of JS objects, however you like. The ReadableStream API exposes a .getReader() and .cancel() method.

//https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream

Začínáme

1. Stáhněte si balíček z npm a uložte jej do svého projektu.

npm i can-ndjson-stream --save

2. Importujte modul jako typický modul npm v horní části každého souboru.

Vyžadovatvar ndjsonStream = require('can-ndjson-stream');

-- NEBO --

ES6 importimport ndjsonStream from 'can-ndjson-stream';

3. Analyzujte response.body pomocí ndjsonStream fungovat a pracovat na výsledku.

Jakmile analyzujete response.body , můžete se svým ReadableStreamem komunikovat do read je to takto:exampleStream.getReader().read() . To vrátí příslib, který se přenese na jeden řádek vašeho NDJSON.

Použití funkce Async/Await

import ndjsonStream from 'can-ndjson-stream';

const fetchNdjson = async () => {
  const response = await fetch("/api");
  const exampleReader = ndjsonStream(response.body).getReader();

  let result;
  while (!result || !result.done) {
    result = await exampleReader.read();
    console.log(result.done, result.value); //result.value is one line of your NDJSON data
  }
}

Používání slibů

import ndjsonStream from 'can-ndjson-stream';

fetch('/api')  // make a fetch request to a NDJSON stream service
.then((response) => {
	return ndjsonStream(response.body); //ndjsonStream parses the response.body

}).then((exampleStream) => {
	let read;
	exampleStream.getReader().read().then(read = (result) => {
		if (result.done) return;
		console.log(result.value);

		exampleStream.getReader().read().then(read); //recurse through the stream
	});
});

4. [Volitelné] Vytvořte jednoduché rozhraní API pro poskytování ukázkových dat NDJSON.

Postupujte podle tohoto návodu na blogu Bitovi, který vám pomůže začít, nebo se podívejte na ukázku v repozitáři can-ndjson-stream.

Co dál?

Pokud se vám tento článek líbil, napište nám, jak plánujete tento modul používat! Podívejte se také na zbytek knihovny CanJS. Pokud potřebujete pomoc, nebojte se zanechat komentář níže nebo se zeptat na CanJS Gitter nebo na fórech!

Inspirativní citáty o proudech dějin[^1]

[^1]:může, ale nemusí být přesné.

[^2]:NDJSON je zkratka pro nový řádek oddělený JSON. Každý znak nového řádku v souboru odděluje tento řádek na jednotlivé objekty JSON, což nám umožňuje streamovat mnoho menších částí JSON namísto jednoho velkého objektu JSON.