LEVEL 52 QUEST

AI 응답 스트리밍 구현

SSE와 EventSource로 실시간 AI 채팅 인터페이스 구축

Server-Sent Events (SSE) 개념

왜 스트리밍인가?

AI 응답을 한 번에 받으면 5~15초를 기다려야 합니다. 스트리밍으로 토큰 단위로 실시간 표시하면 체감 응답 속도가 10배 빨라집니다. ChatGPT가 글자를 하나씩 표시하는 것이 바로 이 기술입니다.

항목	일반 요청	스트리밍 (SSE)
응답 방식	전체 완성 후 한 번에 전송	토큰 단위로 실시간 전송
첫 글자 표시	5~15초 후	0.3~1초 후
사용자 경험	로딩 스피너만 보임	타이핑 효과 (몰입감)
구현 복잡도	낮음	중간
에러 처리	단순 (성공/실패)	중간 중단 처리 필요

SSE (Server-Sent Events)

서버에서 클라이언트로 단방향 실시간 데이터 전송 프로토콜. HTTP 기반이라 별도 라이브러리 없이 사용 가능합니다. WebSocket보다 간단하고, AI 스트리밍에 최적입니다.

EventSource API

브라우저 내장 JavaScript API로, SSE 서버에 자동 연결하고 메시지를 실시간으로 수신합니다. 연결 끊김 시 자동 재연결도 지원합니다.

PHP SSE 서버 구현

stream.php - SSE 엔드포인트

PHP에서 SSE를 구현하려면 출력 버퍼링을 비활성화하고, 적절한 헤더를 설정해야 합니다.

// stream.php - AI 응답 스트리밍 엔드포인트
<?php

// SSE 헤더 설정
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');
header('X-Accel-Buffering: no'); // nginx 버퍼링 비활성화

// PHP 출력 버퍼링 비활성화
ini_set('output_buffering', 'off');
ini_set('zlib.output_compression', false);
while (ob_get_level()) { ob_end_clean(); }

// 입력 파라미터
$message = $_GET['message'] ?? '';
$convId  = (int)($_GET['conv_id'] ?? 0);

if (empty($message)) {
    echo "data: {\"error\": \"메시지가 비어있습니다\"}\n\n";
    exit;
}

/**
 * SSE 메시지 전송 헬퍼
 */
function sendSSE(string $event, $data): void {
    echo "event: {$event}\n";
    echo "data: " . json_encode($data, JSON_UNESCAPED_UNICODE) . "\n\n";
    flush();
}

// 시작 이벤트 전송
sendSSE('start', ['status' => 'generating']);
    

🔒

여기까지는 미리보기입니다

AI 응답 스트리밍 구현
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)