1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: Streams API
slug: Web/API/Streams_API
translation_of: Web/API/Streams_API
---
<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
<p class="summary">Streams API (АПИ обработки потоков) позволяет программно получить доступ с помощью JavaScript к полученным по сети потокам данных и обработать их по желанию разработчика.</p>
<h2 id="Концепция_и_использование">Концепция и использование</h2>
<p>Потоковая передача данных предполагает разбивку ресурса, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.</p>
<p>Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам всё равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведён к необходимому формату и только потом работать с файлом после его полной загрузки.</p>
<p>С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буфер, строку или какой либо объект из потока.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
<p>Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.</p>
<p>Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа {{domxref("Body")}} возвращённого успешным <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросом</a> может быть представлено как {{domxref("ReadableStream")}}, и вы можете прочитать его используя ридер полученный методом {{domxref("ReadableStream.getReader()")}}, отменить его с помощью {{domxref("ReadableStream.cancel()")}}, и тп.</p>
<p>Более сложные примеры задействуют создание ваших собственных потоков с помощью конструктора {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, например чтобы обработать данные внутри <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>.</p>
<p>Вы также можете записывать данные в потоки используя {{domxref("WritableStream")}}.</p>
<div class="note">
<p><strong>Заметка</strong>: вы можете найти больше информации о теории и практике использования потоков в следующих статьях — <a href="/en-US/docs/Web/API/Streams_API/Concepts">Концепты API потоков</a> , <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Использование потоков на чтение</a>, и <a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Использование потоков на запись</a>.</p>
</div>
<h2 id="Интерфейсы">Интерфейсы</h2>
<h3 id="Потоки_чтения_данных">Потоки чтения данных</h3>
<dl>
<dt>{{domxref("ReadableStream")}}</dt>
<dd>Представляет собой считываемый поток данных. Он может быть использован чтобы обработать потоки ответов от <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, или созданный разработчиком поток (например произвольный {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}).</dd>
<dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
<dd>Представляет собой считывателя, который может быть использован чтобы считать данные поставляемые из сети (например fetch запрос).</dd>
<dt>{{domxref("ReadableStreamDefaultController")}}</dt>
<dd>Представляет собой контроллер позволяющий контролировать состояние {{domxref("ReadableStream")}} и очереди внутри него. Является контроллером по умолчанию для не байтовых потоков.</dd>
</dl>
<h3 id="Writable_streams">Writable streams</h3>
<dl>
<dt>{{domxref("WritableStream")}}</dt>
<dd>Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идёт вместе со встроенными методами контроля обратного потока и созданием очередей.</dd>
<dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
<dd>Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.</dd>
<dt>{{domxref("WritableStreamDefaultController")}}</dt>
<dd>Представляет собой контроллер состояния {{domxref("WritableStream")}}. При создании <code>WritableStream</code>, создаётся также соответствующий экземпляр <code>WritableStreamDefaultController</code>.</dd>
</dl>
<h3 id="Дополнительные_API_и_операции_по_работе_с_потоками">Дополнительные API и операции по работе с потоками</h3>
<dl>
<dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
<dd>Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.</dd>
<dt>{{domxref("CountQueuingStrategy")}}</dt>
<dd>Предоставляет встроенную стратегию организации очередей подсчёта чанков, которая может использоваться при построении потоков.</dd>
</dl>
<h3 id="Дополнения_к_другим_API">Дополнения к другим API</h3>
<dl>
<dt>{{domxref("Request")}}</dt>
<dd>При создании нового объекта типа <code>Request</code>, вы можете добавить {{domxref("ReadableStream")}} в свойство <code>body</code> его словаря <code>RequestInit</code>. Этот объект типа <code>Request</code> может быть отправлен в {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, чтобы начать загрузку потока.</dd>
<dt>{{domxref("Body")}}</dt>
<dd>Ответ {{domxref("Body")}} возвращённый успешному <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch запросу</a> вывешивается по умолчанию как {{domxref("ReadableStream")}}, и может иметь получателя прикреплённого к нему и тп.</dd>
</dl>
<h3 id="Интерфейсы_в_дополнение_к_ByteStream">Интерфейсы в дополнение к ByteStream</h3>
<div class="warning">
<p><strong>Важно</strong>: данные интерфейсы пока не реализованы, и были подняты вопросы о том, находятся ли детали спецификации в достаточно законченном состоянии для их реализации. Со временем это может измениться</p>
</div>
<dl>
<dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
<dd>Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor).</dd>
<dt>{{domxref("ReadableByteStreamController")}}</dt>
<dd>Контроллер позволяющий обрабатывать состояние {{domxref("ReadableStream")}} и внутреннюю очередь. Байтовые контроллеры для байтовых потоков.</dd>
<dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
<dd>Represents a pull into request in a {{domxref("ReadableByteStreamController")}}.</dd>
</dl>
<h2 id="Примеры">Примеры</h2>
<p>Мы создали папку с примерами, которые идут вместе с документацией к API потоков — смотрите <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. Можно найти такие примеры как:</p>
<ul>
<li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: Этот пример показывает как использовать поток чтения данных и передавать его данные в другой поток.</li>
<li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Сделать черно-белый PNG</a>: Пример показывает конвертацию потока данных PNG изображения в черно-белый формат.</li>
<li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Простой произвольный поток</a>: В этом примере показано, как использовать пользовательский поток для создания случайных строк, помещать их в очередь как блоки, а затем считывать их обратно.</li>
<li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: Этот пример расширяет первый пример, показывая как поток может быть связан, и оба результирующих потока будут прочитаны независимо.</li>
<li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
<li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
</ul>
<p>Примеры от других разработчиков:</p>
<ul>
<li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, & Fetch</a>.</li>
</ul>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('Streams')}}</td>
<td>{{Spec2('Streams')}}</td>
<td>Первоначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div class="hidden">
<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<h3 id="Поток_записи_данных">Поток записи данных</h3>
<p>{{Compat("api.WritableStream")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API концепт</a></li>
<li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Использование потоков чтения</a></li>
<li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Использование потоков записи</a></li>
</ul>
|
