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
142
143
144
|
---
title: WritableStream
slug: Web/API/WritableStream
translation_of: Web/API/WritableStream
---
<p>{{SeeCompatTable}}{{APIRef("Streams")}}</p>
<p><a href="/en-US/docs/Web/API/Streams_API">Streams API</a>의 <strong><code>WritableStream</code></strong>는 지정된 곳에 스트림 데이터를 writing하기 위한 싱크 추상 인터페이스입니다. 이 객체는 내장 백프레셔와 큐잉으로 구성되어 있다.</p>
<h2 id="생성자">생성자</h2>
<dl>
<dt>{{domxref("WritableStream.WritableStream", "WritableStream()")}}</dt>
<dd>새 <code>WritableStream</code> 오브젝트를 생성한다.</dd>
</dl>
<h2 id="속성">속성</h2>
<dl>
<dt>{{domxref("WritableStream.locked")}} {{readonlyinline}}</dt>
<dd><code>WritableStream</code>의 locked 여부를 boolean 값으로 반환한다. </dd>
</dl>
<h2 id="메소드">메소드</h2>
<dl>
<dt>{{domxref("WritableStream.abort()")}}</dt>
<dd>스트림을 중단한다. 생산자에게 더 이상 쓰기 스트림을 사용할 수 없으며 에러 상태로 전한됨을 고지한다. 큐잉되어 있던 모든 쓰기 작업은 소실된다.</dd>
<dt>{{domxref("WritableStream.getWriter()")}}</dt>
<dd>새 {{domxref("WritableStreamDefaultWriter")}} 인스턴스를 반환하고 스트림에 락을 건다. 스트림에 락이 걸린 동안에는 해제하기 전까지 다른 writer를 요청할 수 없다.</dd>
</dl>
<h2 id="예시">예시</h2>
<p>아래 예시는 본 인터페이스의 몇 가지 기능을 소개합니다. 커스텀 콜백과 API를 통한 queuing strategy 값을 가지고 <code>WritableStream</code>을 생성하는 법을 보여줍니다. 그 후 생성된 스트림과 문자열을 전달하여 <code>sendMessage()</code>를 합니다. 함수 내부에선 {{domxref("WritableStreamDefaultWriter")}} 인스턴스를 반환하는 스트림의 <code>getWriter()</code> 메소드를 호출합니다. 문자열 조각들을 각각 스트림에 쓰기 위해 <code>forEach()</code> 를 사용하구요. 마지막으로 문자열 조각과 스트림 성공/실패를 처리하기 위해 <code>write()</code>와 <code>close()</code>는 Promise를 반환합니다.</p>
<ul>
</ul>
<pre class="brush: js">const list = document.querySelector('ul');
function sendMessage(message, writableStream) {
// defaultWriter is of type WritableStreamDefaultWriter
const defaultWriter = writableStream.getWriter();
const encoder = new TextEncoder();
const encoded = encoder.encode(message, { stream: true });
encoded.forEach((chunk) => {
defaultWriter.ready
.then(() => {
return defaultWriter.write(chunk);
})
.then(() => {
console.log("Chunk written to sink.");
})
.catch((err) => {
console.log("Chunk error:", err);
});
});
// Call ready again to ensure that all chunks are written
// before closing the writer.
defaultWriter.ready
.then(() => {
defaultWriter.close();
})
.then(() => {
console.log("All chunks written");
})
.catch((err) => {
console.log("Stream error:", err);
});
}
const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream({
// Implement the sink
write(chunk) {
return new Promise((resolve, reject) => {
var buffer = new ArrayBuffer(2);
var view = new Uint16Array(buffer);
view[0] = chunk;
var decoded = decoder.decode(view, { stream: true });
var listItem = document.createElement('li');
listItem.textContent = "Chunk decoded: " + decoded;
list.appendChild(listItem);
result += decoded;
resolve();
});
},
close() {
var listItem = document.createElement('li');
listItem.textContent = "[MESSAGE RECEIVED] " + result;
list.appendChild(listItem);
},
abort(err) {
console.log("Sink error:", err);
}
}, queuingStrategy);
sendMessage("Hello, world.", writableStream);</pre>
<p><a href="https://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer example</a>에서 전체 코드를 볼 수 있습니다.</p>
<h3 id="백프레셔(배압)">백프레셔(배압)</h3>
<p>API 내부에서 백프레셔가 어떻게 구현되어 있는지에 따라 코드가 보기에 영 깔끔하지 않을 수 있습니다. 세 가지 관점에서 백프레셔가 어떻게 구현되어 있는지 알아봅시다.</p>
<ul>
<li>Counting strategy를 생성할 때 35라인에서 지정 된 <code>highWaterMark</code> 프로퍼티는 <code>write()</code>를 한 번 호출할때 <code>WritableStream</code>가 처리할 수 있는 최대 데이터량을 지정합니다. 이 예시에선 <code>defaultWriter.write()</code> 에 처리할 수 있는 최대량이 전달됩니다 (line 9).</li>
<li><code>writer.ready</code>프로퍼티는 <code>(WritableStream</code> 생성자의 첫 번째 파라미터로 전달 된) 콜백 객체가 데이터 쓰기를 완료했을 때 resolved되는 Promise를 반환합니다. 데이터 소스는 추가 데이터를 write하거나 (line 9) <code>close()</code> 를 호출할 수 있습니다(line 21). close()를 빨리 호출하면 더 이상 데이터를 쓸 수 없게 막을 수 있습니다. 예시에서 <code>writer.ready</code>를 두 번 호출한 이유입니다 (lines 7 and 19). </li>
<li>콜백 객체의 <code>write()</code>가 반환한 {{jsxref("Promise")}}는 <code>WritableStream</code>과 그 writer가 <code>writer.ready</code>를 언제 resolve 해야 할 지 알려줍니다.</li>
</ul>
<h2 id="스펙">스펙</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Streams','#ws-class','WritableStream')}}</td>
<td>{{Spec2('Streams')}}</td>
<td>최초 정의.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div>
<p>{{Compat("api.WritableStream")}}</p>
</div>
<h2 id="더_보기">더 보기</h2>
<ul>
<li><a href="https://whatwg-stream-visualizer.glitch.me/">WHATWG Stream Visualiser</a>, redable, writable 스트림 및 스트림간 변환을 시각화 한 예시.</li>
</ul>
|
