Server-Sent Event (SSE)란? feat Node.js

🌿 Spring

Server-Sent Event (SSE)란? feat Node.js

연_우리 2022. 9. 20. 01:35

기존 프로젝트에선 백엔드 -> 프론트로 데이터를 보내줄때 웹소켓을 사용하였다.
웹소켓은 양방향인데, 굳이 프론트 -> 백엔드방향으로 연결되어있을 필요가 없어서
이것저것 찾아보니 SSE를 알게되었고, 사용해보았다!

SSE란 ?

SSE는 서버의 데이터를 실시간으로 스트리밍 하는 기술이다.
변경된 데이터를 가져오기 위해 지속적으로 API를 호출하여 동기화하는 작업을 없앨 수 있는 것이다!

- 웹소켓은 WSS 프로토콜을 따로 사용하지만
SSE는 HTTP를 사용하기때문에 별다른 서버 셋팅이 필요하지 않다는 장점이 있다.
- 클라이언트와 서버가 최초 한번 HTTP연결을 맺으면 그 뒤로 서버가 클라이언트에게 지속적으로 데이터를 보낼 수 있다.

EX )
서버에서 가끔씩 데이터를 받아야하는데, N초동안 데이터가 실시간으로 변경된다.
심지어 N초도 매번 값이 바뀐다하자.

API 호출 : 1회 호출에 1회 응답값을 줄수있다. 지속적으로 값의 변화를 알려면 매 초마다 api를 호출해야한다. 클라이언트가 주체가된다.

websocket : 소켓을 셋팅하여 클라이언트와 서버를 연결한다. 클라이언트/서버 둘다 주체가 될 수 있다.

API와 WebSocket 중간에서 가볍게 사용할 수 있는 것이 SSE이다.
SSE는 클라이언트에서 1회 호출하면 서버에서 지정한 시간만큼 데이터를 보내줄 수 있다. 서버가 주체가된다.

SSE를 노티, 푸시, pub/sub으로 사용하는 예제가 종종 보면서
서버에서 이벤트(푸시)를 여러번 보내는 것도 가능한건가?! 하고 혼동되었다.

setInterval 내부에서 분기처리해서 클라이언트는 푸시를 받는 것처럼 보이지만
서버에서는 계속해서 데이터를 체크해야하는 것 같다.
내가 원하는건 그냥 send 했을 때 클라이언트에게 데이터가 전송되는 것이였는데..

찾아볼수록 노티, 푸시는 SSE의 목적과는 좀 다르게 쓰이는 것 같은 느낌을 받았다!

데이터 포맷

id: testN1\n
event: red\n
data: {"message" : "hello SSE!", "text" : "blah-blah"}\n\n

"\n" 개행문자로 각 항목을 구분한다. \n를 두번사용하면 데이터 전송의 끝으로 처리한다.
id를 추가하면 마지막에 발생한 이벤트를 추적할 수 있다. (event.lastEventId)
event를 추가하면 pub/sub의 채널처럼 구분하여 데이터를 받을 수 있다.

test.html

<html>
<body>
    <script>

        //데이터를 가져올 URL을 작성한다.
        const eventSource = new EventSource("http://localhost:3000/test", {withCredentials:false});
        

        //브라우저가 SSE지원하는지 체크
        if(typeof(EventSource) !== "undefined") {
            console.log("sse지원");
        } else {
            console.log("sse미지원");
        }
        
        
        // 서버와 커넥션이 맺어질 때 동작한다
        eventSource.addEventListener('open', function(e) {
            console.log(`connection is open`);
        });
        
        
        // 서버에서 데이터를 보낼 때 event없이 보내면 동작한다
        eventSource.addEventListener('message', function(e) {
            console.log(event.data);
        });


        // 서버에서 데이터를 보낼 때 event를 red로 설정해서 보낼 때 동작한다
        eventSource.addEventListener('red', event => {
            const data = JSON.parse(event.data);
            console.log(`red : ${data.message}`);
        });


        // 서버에서 데이터를 보낼 때 event를 blue로 설정해서 보낼 때 동작한다
        eventSource.addEventListener('blue', event => {
            const data = JSON.parse(event.data);
            console.log(`blue : ${data.message}`);
        });


        // 에러 발생 시 동작한다.
        eventSource.addEventListener('error', function(e) {    
            if (e.eventPhase == EventSource.CLOSED){
            	eventSource.close()
            }
            if (e.target.readyState == EventSource.CLOSED) {
                console.log("Disconnected");
            }
            else if (e.target.readyState == EventSource.CONNECTING) {
                console.log("Connecting...");
            }
        }, false);

    </script>
</body>
</html>

Node Express Server

테스트 1

router.get('/test', (req, res) => {
    res
      .setHeader("Access-Control-Allow-Origin", "*")
      .setHeader("Content-Type", "text/event-stream")
      .setHeader("Connection", "keep-alive")
      .setHeader("Cache-Control", "no-cache")
      .status(200)
      .write(
        	'event: red\n'+
        	'data: {"message" : "hello '+value+'"}\n\n'
      );
});

SSE는 위의 코드는 동작할까?

test.html을 열면 사진처럼 나오고 더이상 아무런 동작도 하지 않는다.
첫번째 커넥션 연결 이후 서버에서 내려주는 값은 하나밖에 없는데 종료는 되지않으니.. 움직이지 않는게 당연하다

(나는 위 코드에서 /test를 다시 호출하면 데이터가 내려올 줄 알았다.. 히히)

테스트 2

let value = 'SSE';
router.get('/change', (req, res) => {
    let {param} = req.query;
    value = param;
    res.end();
});

router.get('/test', (req, res) => {

    res
      .setHeader("Access-Control-Allow-Origin", "*")
      .setHeader("Content-Type", "text/event-stream")
      .setHeader("Connection", "keep-alive")
      .setHeader("Cache-Control", "no-cache")

    setInterval(() => {
        res
            .status(200)
            .write(
                'event: red\n'+
                'data: {"message" : "hello '+value+'"}\n\n'
            );
    }, 2000);

});

테스트 2의 코드는 서버가 2초마다 데이터를 계속 보내주니까 test.html을 실행하자마자 계속해서 서버의 데이터값을 받아온다.

여기서 /change?param=green을 호출하여 value를 바꾼다면

데이터가 잘 바뀌어서 프론트로 온다!

서버에서 데이터가 변경점을 캐치해서 setInterval 내부에서 res.write해주면

클라이언트는 서버에 질의하지않고도 변경된 값을 실시간으로 받을 수 있게된다.

event로 데이터를 필터링해서 받을 수도 있다 !

저작자표시 비영리 변경금지

'🌿 Spring' 카테고리의 다른 글

[SpringBoot] Apache Poi를 이용한 엑셀다운로드는 SXSSF를 쓰자..! (0)	2022.12.03
Spring Jpa SelfJoin 순환참조 방지하며 다른 엔티티와 맵핑하기 (2)	2022.11.09
[SpringBoot] Apache Poi를 이용한 엑셀 다운로드 구현 (0)	2022.08.20
[Spring Boot] FeignClient와 ExceptionHandler \| FeignClient의 응답값 그대로 반환하기 (1)	2022.07.29
Spring DI(의존주입), @Autowired (의존 자동주입) (0)	2022.04.02