브라우저 실시간 통신: 롱 폴링, SSE, WebSocket 클라이언트

async function subscribe(signal) {
  while (!signal.aborted) {                 // 재귀 대신 루프: 호출 스택·Promise 체인이 쌓이지 않는다
    try {
      const res = await fetch('/subscribe', { signal })
      if (res.status === 502 || res.status === 504) continue // 프록시가 오래 걸린 연결을 끊음 → 바로 재요청
      if (!res.ok) throw new Error(res.statusText)
      showMessage(await res.text())
    } catch (err) {
      if (err.name === 'AbortError') return
      await new Promise((r) => setTimeout(r, 1000))          // 오류면 잠깐 쉬고 다시
    }
  }
}
const controller = new AbortController()
subscribe(controller.signal)                // 화면을 떠날 때 controller.abort()

retry: 10000
                                     ← 재연결 대기 시간(ms)만 알리는 메시지
event: join
data: {"user":"보라"}
id: 41
                                     ← 커스텀 이벤트 'join'
data: 첫 줄
data: 둘째 줄
id: 42
                                     ← 'message' 이벤트, data = "첫 줄\n둘째 줄"
: keep-alive
                                     ← 콜론으로 시작하면 주석. 연결 유지용 하트비트

const es = new EventSource('/events', { withCredentials: true }) // 옵션은 이것 하나뿐(교차 출처 쿠키)
 
es.onmessage = (e) => render(JSON.parse(e.data))             // event: 가 없는 메시지
es.addEventListener('join', (e) => addUser(JSON.parse(e.data))) // 커스텀 이벤트는 addEventListener로만
es.onerror = () => {
  if (es.readyState === EventSource.CONNECTING) console.log('재연결 중')
  else console.log('끊김, 재연결 안 함')                     // CLOSED
}
es.close()                                                   // 다시 열 수 없다. 새 EventSource를 만든다

const res = await fetch('/api/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
  body: JSON.stringify({ prompt }),
  signal: controller.signal,                // 「생성 중지」 버튼
})
const reader = res.body.pipeThrough(new TextDecoderStream()).getReader()
let buffer = ''
while (true) {
  const { value, done } = await reader.read()
  if (done) break
  buffer += value
  const events = buffer.split('\n\n')       // 빈 줄로 메시지를 자른다
  buffer = events.pop()                     // 아직 덜 온 마지막 조각은 남겨 둔다
  for (const ev of events) {
    const data = ev.split('\n').filter((l) => l.startsWith('data:')).map((l) => l.slice(5).replace(/^ /, '')).join('\n')
    if (data) appendToken(JSON.parse(data))
  }
}

const ws = new WebSocket('wss://example.com/chat', ['chat.v2', 'chat.v1']) // 2번째 인자: 서브프로토콜 후보
ws.addEventListener('open', () => console.log(ws.protocol))               // 서버가 고른 것: 'chat.v2'

ws.binaryType = 'arraybuffer'   // 기본값은 'blob'
ws.onmessage = (e) => {
  if (typeof e.data === 'string') handleJson(JSON.parse(e.data))
  else handleFrame(new DataView(e.data)) // 바이트 단위로 해석
}

function sendWhenDrained(data) {
  if (ws.bufferedAmount < 64 * 1024) ws.send(data)
  else setTimeout(() => sendWhenDrained(data), 50)
}

function connect(attempt = 0) {
  const ws = new WebSocket(URL)
  ws.onopen = () => { attempt = 0; resync() }          // 끊긴 동안 놓친 메시지를 다시 받는다
  ws.onclose = (e) => {
    if (e.code === 1000 || e.code === 4001) return     // 의도한 종료·인증 만료는 재연결하지 않는다
    const delay = Math.min(30_000, 1000 * 2 ** attempt) * (0.5 + Math.random() / 2)
    setTimeout(() => connect(attempt + 1), delay)
  }
}