AJAX를 사용하여 서버에서 데이터를 스트리밍하는 방식은 일반적으로 서버에서 클라이언트로 데이터를 지속적으로 전송하는 것을 의미합니다. 이를 위해 XMLHttpRequest 또는 fetch API를 사용할 수 있습니다. 아래는 간단한 예제를 통해 AJAX 스트리밍을 구현하는 방법을 보여드리겠습니다.
1. 서버 측 (PHP 예제)
서버 측에서는 클라이언트의 요청에 대해 지속적으로 데이터를 전송하는 스크립트를 작성합니다. 아래는 PHP로 작성된 간단한 예제입니다.
<?php
// stream.php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$counter = 0;
while (true) {
// 데이터 전송
echo "data: " . json_encode(['counter' => $counter]) . "\n\n";
ob_flush(); // 출력 버퍼를 비우고
flush(); // 클라이언트로 전송
$counter++;
sleep(1); // 1초 대기
}
?>2. 클라이언트 측 (HTML + JavaScript)
클라이언트 측에서는 AJAX를 사용하여 서버에서 데이터를 수신하고 처리합니다. 아래는 HTML과 JavaScript로 작성된 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Streaming Example</title>
<script>
function startStreaming() {
const eventSource = new EventSource('stream.php');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
document.getElementById('output').innerHTML += 'Counter: ' + data.counter + '<br>';
};
eventSource.onerror = function(event) {
console.error('Error occurred:', event);
eventSource.close(); // 에러 발생 시 연결 종료
};
}
</script>
</head>
<body>
<h1>AJAX Streaming Example</h1>
<button onclick="startStreaming()">Start Streaming</button>
<div id="output"></div>
</body>
</html>서버 측 (PHP):
header('Content-Type: text/event-stream'): 클라이언트가 서버에서 이벤트 스트림을 수신할 수 있도록 MIME 타입을 설정합니다.
while (true): 무한 루프를 사용하여 지속적으로 데이터를 전송합니다.
echo "data: " . json_encode(['counter' => $counter]) . "\n\n":
ob_flush()와 flush(): 출력 버퍼를 비우고 즉시 전송합니다.
sleep(1): 1초 간격으로 데이터를 전송합니다.
클라이언트 측 (HTML + JavaScript):
EventSource 객체를 사용하여 서버에서 전송되는 이벤트를 수신합니다.
onmessage 이벤트 핸들러를 사용하여 서버에서 수신한 데이터를 처리합니다.
수신한 데이터를 HTML 요소에 추가하여 화면에 표시합니다.
onerror 이벤트 핸들러를 사용하여 오류가 발생할 경우 연결을 종료합니다.
