서론
채팅프로그램이나 실시간 알림 시스템에 사용될 수 있는 기능에 대해 알아보고자 합니다. 즉, 이번에 다룰 방식들의 목적은 실시간으로 서버와 소통하여 최대한 빠르게 데이터를 보내고, 받기 위한 작업이라고 할 수 있습니다. polling, Long polling, Streaming, Websocket 각 기술들에 대한 특징, 단점, 간단한 코드 ( client와 server ) 대하여 알아보겠습니다.
각 방식들에 대한 공통점
- 각 방식은 HTTP 프로토콜을 기반으로 동작하며, 요청과 응답 헤더를 통해 데이터 교환을 합니다.
- 이때 헤더에는 해당 방식의 특성을 나타내는 값들이 포함됩니다.
Polling
특징
- 폴링 방식은 클라이언트가 일정 간격마다 서버에 HTTP 요청을 보내는 방식입니다.
- 클라이언트는 예를 들어 매 5초마다 서버에 데이터를 요청할 수 있습니다.
- 서버는 요청을 받으면 현재 상태를 확인하고, 새로운 데이터가 있는지 판별합니다.
- 이후에는 새로운 데이터가 없더라도 빈 응답을 생성하여 클라이언트에게 보냅니다.
- 일반적인 HTTP GET 요청 헤더가 사용됩니다.
단점
- 불필요한 요청이 증가할 수 있어 서버와 클라이언트의 부하가 늘어날 수 있습니다.
- 데이터가 변경되지 않았더라도 주기적인 요청이 발생하기 때문에 효율적이지 않을 수 있습니다.
관련 자바스크립트 코드를 보면, 아래의 코드처럼 5초마다 데이터를 요청하면 polling 방식이라고 할 수 있습니다.
client
// 폴링 클라이언트 측 JavaScript 코드
function pollServer() {
setInterval(() => {
fetch("/polling")
.then(response => response.text())
.then(data => {
console.log("서버로부터 데이터 수신:", data);
});
}, 5000); // 5초마다 폴링
}
pollServer();
물론, 서버에서의 코드도 Controller, 혹은 Routing 에서 처리하여 진행해야합니다.
server
@RestController
public class PollingController {
@GetMapping("/polling")
public String polling() {
String data = fetchDataFromDatabase(); // 데이터베이스로부터 데이터 가져오기
return data;
}
}
Long Polling
- 롱 폴링은 폴링의 변형으로, 클라이언트의 요청이 서버에서 답이 올때까지 무한히 대기되는 방식입니다.
- 클라이언트가 서버에 요청을 보내면, 서버는 새로운 데이터가 도착하거나 일정 시간이 경과할 때까지 응답을 보류합니다.
- 이후 데이터가 도착하면 응답을 반환하고, 클라이언트는 다시 새로운 요청을 보냅니다.
- 이 과정을 반복하여 실시간성을 유지합니다.
- 일반적인 HTTP GET 요청 헤더가 사용됩니다.
단점
- 폴링에 비해 서버와 클라이언트 간의 통신 빈도가 줄어들어 서버 부하를 감소시킬 수 있습니다.
- 데이터의 업데이트가 빈번해진다면 일반 폴링 방식과 큰 차이가 없습니다.
client
// 롱 폴링 클라이언트 측 JavaScript 코드
function longPollServer() {
fetch("long-polling")
.then(response => response.text())
.then(data => {
console.log("서버로부터 데이터 수신:", data);
longPollServer(); // 데이터를 받은 후 다시 요청
});
}
longPollServer();Server
@RestController
public class LongPollingController {
@GetMapping("/long-polling")
public String longPolling() throws InterruptedException {
String data = waitForDataFromSource(); // 새로운 데이터가 도착할 때까지 대기
return data;
}
}Streaming
- 스트리밍 방식은 데이터를 작은 조각으로 나누어 클라이언트로 전송합니다.
- 이를 위해 서버는 HTTP 연결을 열어두고, 조각 단위로 데이터를 전송합니다.
- 클라이언트는 받은 데이터를 바로 처리하며, 서버는 지속적으로 데이터를 보내기 위해 연결을 유지합니다.
- 스트리밍 방식에서는 Transfer-Encoding: chunked 헤더가 데이터를 작은 조각으로 나누어 전송하는 데 사용됩니다.
- 스트리밍은 HTTP 연결을 열어둔 상태에서 작은 조각으로 데이터를 보냅니다.
- 데이터의 크기에 따라 조각으로 나누어 전송하기 때문에 실시간성을 유지할 수 있습니다.
- 연결이 지속되어 있기 때문에 클라이언트와 서버 간의 지속적인 통신이 가능합니다
client
// 스트리밍 클라이언트 측 JavaScript 코드
const source = new EventSource("/streaming");
source.onmessage = event => {
const data = event.data;
console.log("스트리밍 데이터 수신:", data);
};server
@RestController
public class StreamingController {
@GetMapping(value = "/streaming", produces = "text/event-stream")
public ResponseEntity<Flux<String>> streaming() {
Flux<String> dataStream = generateStreamingData(); // 스트리밍 데이터 생성
return ResponseEntity.ok()
.header("Cache-Control", "no-cache")
.body(dataStream);
}
}- produces = "text/event-stream"은 서버가 Server-Sent Events (SSE) 형식의 응답을 제공한다는 것을 나타냅니다.
- Flux<String> dataStream = generateStreamingData(); 부분에서는 generateStreamingData() 메소드를 호출하여 스트리밍 데이터를 생성하게 됩니다.
- 이 코드에서는 Flux로 진행하지만, SseEmitter 를 활용해도 됩니다. (SseEmitter 활용시 Thread 관리필요한것으로 보임)
- 클라이언트가 'streaming'에 접속하면, 서버가 스트리밍 데이터를 조금씩 전송하면서 응답을 유지하게 됩니다.
- SSE 형식으로 데이터를 보내면서 Cache-Control 헤더를 no-cache로 설정하여 캐싱을 방지하고 실시간성을 유지합니다.
WebSocket
- WebSocket은 실시간 양방향 통신을 위한 프로토콜로, 클라이언트와 서버 간에 TCP 연결을 유지합니다.
- 초기 연결 시에는 HTTP 프로토콜을 사용하여 웹 소켓 연결을 설정합니다. ( WebSocket 연결 설정에는 Upgrade 헤더와 Connection: Upgrade 값이 사용됩니다. )
- 이후에는 연결이 열려 있는 상태에서 WebSocket 프레임을 통해 데이터를 주고받습니다.
client
// 클라이언트 측 JavaScript 코드
const socket = new WebSocket("ws:/socket");
socket.addEventListener("open", event => {
console.log("WebSocket 연결이 열렸습니다.");
// 서버로 메시지 전송
socket.send("Hello, Server!");
});
socket.addEventListener("message", event => {
const message = event.data;
console.log("서버로부터 메시지 수신:", message);
});server
// WebSocketConfig.java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new MyWebSocketHandler(), "/socket").setAllowedOrigins("*");
}
}
// WebSocketHandler.java
public class WebSocketHandler extends TextWebSocketHandler {
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("WebSocket 연결이 열렸습니다.");
// 클라이언트에게 메시지 전송
session.sendMessage(new TextMessage("Hello, Client!"));
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
String receivedMessage = message.getPayload();
System.out.println("클라이언트로부터 메시지 수신: " + receivedMessage);
// 서버에서 클라이언트로 메시지 전송
session.sendMessage(new TextMessage("서버에서 클라이언트로 메시지 전송"));
}
}
마무리
각 기술들에 대해 알아보면서 이후에 알림기능이나 채팅 기능을 구현하는데 있어서 각각의 기술의 적절한 사용방법에 대해 알게 되었습니다.
예를 들면, Streaming 방식의 경우 Server에서 내려주는 데이터를 기반으로 하기에 Server에서 실시간 알림을 내려줄때 사용하면 가볍게 사용할 수 있을 것 같습니다.
WebSocket 같은경우 채팅에 사용될 수 있으며, 많은 브라우저에서 사용할 수 있도록 도와주는 SockJs와 메세지 브로커로 사용되는 STOMP 를 사용하면 될 것 같습니다. 메세지 브로커의 서버로는 RabbitMQ 혹은 kafka를 활용하여 진행할 수 있습니다.