[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ja/docs/Web/API/Streams_API/Using_writable_streams [Back]  [Original]

- Web API | MDN

MDN Web Docs

View in English Always switch to English

JavaScript API

:

dom-examples/streams Simple writer example UI UI

WritableStream()

js
const stream = new WritableStream(
  {
    start(controller) {},
    write(chunk, controller) {},
    close(controller) {},
    abort(reason) {},
  },
  {
    highWaterMark: 3,
    size: () => 1,
  },
);

2 JavaScript 2 ByteLengthQueuingStrategy CountQueuingStrategy

4

  1. start(controller) WritableStream 1
  2. write(chunk,controller) chunk
  3. close(controller)
  4. abort(reason)

js
const decoder = new TextDecoder("utf-8");
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
let result = "";
const writableStream = new WritableStream(
  {
    // 
    write(chunk) {
      return new Promise((resolve, reject) => {
        const buffer = new ArrayBuffer(1);
        const view = new Uint8Array(buffer);
        view[0] = chunk;
        const decoded = decoder.decode(view, { stream: true });
        const listItem = document.createElement("li");
        listItem.textContent = `Chunk decoded: ${decoded}`;
        list.appendChild(listItem);
        result += decoded;
        resolve();
      });
    },
    close() {
      const listItem = document.createElement("li");
      listItem.textContent = `[MESSAGE RECEIVED] ${result}`;
      list.appendChild(listItem);
    },
    abort(err) {
      console.error("Sink error:", err);
    },
  },
  queuingStrategy,
);
  • write() UI
  • close() 1 UI
  • abort()

sendMessage()

js
sendMessage("Hello, world.", writableStream);

sendMessage()

js
function sendMessage(message, writableStream) {
  // defaultWriter  WritableStreamDefaultWriter 
  const defaultWriter = writableStream.getWriter();
  const encoder = new TextEncoder();
  const encoded = encoder.encode(message, { stream: true });
  encoded.forEach((chunk) => {
    defaultWriter.ready
      .then(() => defaultWriter.write(chunk))
      .then(() => console.log("Chunk written to sink."))
      .catch((err) => console.error("Chunk error:", err));
  });
  // 
  // ready 
  defaultWriter.ready
    .then(() => defaultWriter.close())
    .then(() => console.log("All chunks written"))
    .catch((err) => console.error("Stream error:", err));
}

WritableStream.getWriter() WritableStreamDefaultWriter

TextEncoder

forEach() WritableStreamDefaultWriter.ready ready WritableStreamDefaultWriter.write() WritableStream() write()

ready ready WritableStreamDefaultWriter.close() WritableStream() close()

WritableStream() start()write()close() controller WritableStreamDefaultController

WritableStreamDefaultController.error()

close() WritableStream() close()

WritableStreamDefaultWriter.abort()

close

abort() WritableStream() abort()


Web Proxy Viewer  |  New URL  |  Original Page