<button id="start">開始接收流數(shù)據(jù)</button>
<pre id="output"></pre>

<script>
document.getElementById("start").addEventListener("click", async () => {
  const output = document.getElementById("output");
  output.textContent = "";

  const response = await fetch("/stream-endpoint");

  const reader = response.body.getReader();
  const decoder = new TextDecoder("utf-8");

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    output.textContent += decoder.decode(value, { stream: true });
  }
});
</script>

<pre id="log"></pre>
<script>
const log = document.getElementById("log");
const evtSource = new EventSource("/sse");

evtSource.onmessage = (event) => {
  log.textContent += `數(shù)據(jù)：${event.data}\n`;
};
</script>

data: Hello
data: World

<input id="msg" placeholder="輸入消息" />
<button onclick="sendMessage()">發(fā)送</button>
<pre id="chat"></pre>

<script>
const ws = new WebSocket("ws://localhost:8080");
const chat = document.getElementById("chat");

ws.onmessage = (event) => {
  chat.textContent += `服務(wù)器：${event.data}\n`;
};

function sendMessage() {
  const msg = document.getElementById("msg").value;
  ws.send(msg);
}
</script>

const response = await fetch('/stream');

const textDecoderStream = new TextDecoderStream();
const transformStream = new TransformStream({
  transform(chunk, controller) {
    const timestamped = `[${new Date().toISOString()}] ${chunk}`;
    controller.enqueue(timestamped);
  }
});

response.body
  .pipeThrough(textDecoderStream)
  .pipeThrough(transformStream)
  .pipeTo(new WritableStream({
    write(chunk) {
      document.body.innerText += chunk;
    }
  }));

<template>
  <pre>{{ content }}</pre>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const content = ref('')

onMounted(async () => {
  const response = await fetch('/stream');
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    content.value += decoder.decode(value);
  }
});
</script>