async function fetchStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while(true) {
    const { done, value } = await reader.read();
    if(done) break;
    
    // 處理分塊數(shù)據(jù)
    const chunk = decoder.decode(value);
    document.getElementById('output').innerHTML += chunk;
    
    // 自動(dòng)滾動(dòng)到底部
    window.scrollTo(0, document.body.scrollHeight);
  }
}

const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  appendToDOM(data.content); 
};

eventSource.onerror = () => {
  console.error('Stream closed');
};

function StreamComponent() {
  const [content, setContent] = useState('');

  useEffect(() => {
    const controller = new AbortController();
    
    fetch('/api/stream', { signal: controller.signal })
      .then(response => {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        function read() {
          reader.read().then(({ done, value }) => {
            if(done) return;
            setContent(prev => prev + decoder.decode(value));
            read();
          });
        }
        read();
      });

    return () => controller.abort();
  }, []);

  return <div className="stream-output">{content}</div>;
}

<template>
  <div ref="output"></div>
</template>

<script>
export default {
  mounted() {
    this.initStream();
  },
  methods: {
    async initStream() {
      const response = await fetch('/stream');
      const reader = response.body.getReader();
      
      while(true) {
        const { done, value } = await reader.read();
        if(done) break;
        this.$refs.output.innerHTML += new TextDecoder().decode(value);
      }
    }
  }
}
</script>

// WebSocket實(shí)現(xiàn)示例
const ws = new WebSocket('wss://api.example.com/chat');

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  const bubble = `
    <div class="message ${message.sender}">
      <span class="text">${escapeHtml(message.content)}</span>
    </div>
  `;
  document.querySelector('.chat-box').insertAdjacentHTML('beforeend', bubble);
};

// 高亮關(guān)鍵詞的流式處理
function processLogChunk(chunk) {
  const highlighted = chunk
    .replace(/ERROR/g, '<span class="error">ERROR</span>')
    .replace(/WARN/g, '<span class="warn">WARN</span>');
  return highlighted;
}