안녕하세요, 저는 5년차 백엔드 개발자입니다. 이번 글에서는 Node.js의 SSE(Server-Sent Events)를を使って AI 스트리밍 응답을 구현하는 방법을 초보자도 이해할 수 있도록 단계별로 설명드리겠습니다. HolySheep AI를 사용하면 복잡한 설정 없이短短 10줄의 코드로 GPT-4.1의 실시간 스트리밍을 구현할 수 있습니다.
SSE가 뭔가요? (초보자 설명)
SSE(Server-Sent Events)를 쉽게 설명하면, 웹사이트가 서버에서源源不断的 데이터를 실시간으로 받을 수 있게 해주는 기술입니다. 예를 들어:
- 채팅 앱에서 상대방의 메시지가 한 글자씩 Appearing되는 효과
- AI가 답변을 생성할 때 실시간으로 글자가 나타나는 효과
- 주식 시세나 날씨 정보가 실시간으로 업데이트되는 효과
왜 WebSocket이 아닌 SSE를 사용하나요?
- SSE는 단방향通信이므로 AI 응답 스트리밍에 적합
- 설정이非常简单하고 HTTP 프로토콜만 사용
- 자동 재연결 기능이 기본 제공
- Firewall 친화적 (HTTP 포트 443 사용)
1. 사전 준비물
이 튜тори얼을 따라하려면 다음이 필요합니다:
- Node.js 18.x 이상 설치 (터미널에서
node --version으로 확인) - npm 또는 yarn 패키지 관리자
- HolySheep AI 무료 계정 (가입 시 $1 무료 크레딧 제공)
[스크린샷 힌트] HolySheep 대시보드에서 API Keys 메뉴로 이동하면 새 API 키를 생성할 수 있습니다. 'sk-holysheep-'로 시작하는 키를 복사하세요.
2. 프로젝트 세팅
터미널에서 다음 명령어를 순서대로 실행하세요:
mkdir sse-ai-chat
cd sse-ai-chat
npm init -y
npm install express cors dotenv
npm install --save-dev nodemon프로젝트 구조는 다음과 같이 구성됩니다:
sse-ai-chat/
├── .env # API 키 저장
├── server.js # 메인 서버 코드
├── public/
│ └── index.html # 테스트용 웹 페이지
└── package.json3. HolySheep API 키 설정 (.env 파일)
[스크린샷 힌트] .env 파일은 프로젝트 루트 폴더에 만들어야 합니다. 확장자 없이 파일 이름만 .env입니다.
HOLYSHEEP_API_KEY=YOUR_HOLYSHEEP_API_KEY
PORT=3000중요: YOUR_HOLYSHEEP_API_KEY 부분을 HolySheep 대시보드에서 생성한 실제 API 키로 교체하세요. API 키는他人에게 공개하지 마세요!
4. Express 서버 + SSE 스트리밍 구현 (핵심 코드)
이제 실제 스트리밍 기능을 구현해보겠습니다. server.js 파일을 만들고 다음 코드를 붙여넣으세요:
const express = require('express');
const cors = require('cors');
const path = require('path');
require('dotenv').config();
const app = express();
const PORT = process.env.PORT || 3000;
// HolySheep API 설정
const HOLYSHEEP_API_KEY = process.env.HOLYSHEEP_API_KEY;
const HOLYSHEEP_BASE_URL = 'https://api.holysheep.ai/v1';
// 미들웨어 설정
app.use(cors());
app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));
// SSE 스트리밍 엔드포인트
app.post('/api/chat/stream', async (req, res) => {
const { message } = req.body;
// SSE 헤더 설정 - 이것이 중요!
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
'X-Accel-Buffering': 'no' // Nginx 사용 시 필수
});
try {
// HolySheep API 호출
const response = await fetch(
${HOLYSHEEP_BASE_URL}/chat/completions,
{
method: 'POST',
headers: {
'Authorization': Bearer ${HOLYSHEEP_API_KEY},
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: 'gpt-4.1',
messages: [
{ role: 'user', content: message }
],
stream: true // 스트리밍 모드 활성화
})
}
);
// 스트리밍 응답 처리
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) {
res.write('event: done\ndata: [DONE]\n\n');
res.end();
break;
}
// 청크 데이터를 문자열로 변환
const chunk = decoder.decode(value);
// SSE 형식으로 변환하여 전송
// data: {...}\n\n 형식이어야 함
const lines = chunk.split('\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
const data = line.slice(6);
if (data === '[DONE]') {
res.write('event: done\ndata: [DONE]\n\n');
return;
}
// SSE 형식으로 클라이언트에 전송
res.write(data: ${data}\n\n);
}
}
}
} catch (error) {
console.error('HolySheep API 오류:', error);
res.write(event: error\ndata: ${JSON.stringify({ error: error.message })}\n\n);
res.end();
}
});
// 헬스 체크
app.get('/api/health', (req, res) => {
res.json({ status: 'ok', timestamp: new Date().toISOString() });
});
app.listen(PORT, () => {
console.log(✅ SSE 서버 실행 중: http://localhost:${PORT});
console.log(📡 HolySheep API 엔드포인트: ${HOLYSHEEP_BASE_URL});
});5. 테스트용 프론트엔드 HTML
public 폴더를 만들고 index.html 파일을 생성하세요:
<