실시간으로 DB 데이터를 계속 가져오는법(SSE)

프로젝트를 진행하다 보면 실시간으로 DB 데이터를 가져와야하는 경우가 있다. ( 예를 들어 채팅같은 경우)

 

이런 경우 계속 DB에 GET 요청을 해도 되지만 이런 경우 서버에 과부화가 걸리게 된다.

따라서 우리는 서버와 유저간의 실시간 소통채널을 열어 데이터을 주고 받기를 해보려고한다. (server sent events)

 

 

GET 요청할 부분 (프론트)

해당 코드는 어떤 UI가 클릭되었을 때와 같이 이벤트가 발생했을 때 작동되는 코드 내부에 넣어주면 된다.

var eventSource;

// get 요청하는 부분 (ajax get 하는 것과 비슷하다고 생각하면 된다)
eventSource = new EventSource('경로');
  eventSource.addEventListener('서버에 쓴 데이터 명', function (e){
    console.log(e.data); // 서버가 보낸 데이터
});

 

 

 

 

GET 요청하는 부분 (서버)

app.get('경로', function(request, response){

    response.writeHead(200, { //헤더를 변경해주는 부분
      "Connection": "keep-alive",
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
    });

    // * event: 보낼 데이터 명\n
    // * data: 보낼 데이터\n\n
    response.write('event: test\n');
    response.write('data: 안녕하세요\n\n'); 

});

 

추후에는 DB에서 가져올 데이터를 response.write(`data: ${result}\n\n`); 이런식으로 작성하면 e.data에서 원하는 데이터를 받아올 수 있다. 

 

---

만약 DB에서 가져온 데이터가 깨진다면 아래와 같이 작성하면된다.

JSON으로 변환 후 JSON 해제하기

 

GET 요청할 부분 (프론트)

해당 코드는 어떤 UI가 클릭되었을 때와 같이 이벤트가 발생했을 때 작동되는 코드 내부에 넣어주면 된다.

var eventSource;

// get 요청하는 부분 (ajax get 하는 것과 비슷하다고 생각하면 된다)
eventSource = new EventSource('경로');
  eventSource.addEventListener('서버에 쓴 데이터 명', function (e){
    console.log(JSON.parse(e.data)); // 서버가 보낸 데이터
});

 

 

 

GET 요청하는 부분 (서버)

app.get('경로', function(request, response){

    response.writeHead(200, { //헤더를 변경해주는 부분
      "Connection": "keep-alive",
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
    });

    // * event: 보낼 데이터 명\n
    // * data: 보낼 데이터\n\n
    response.write('event: test\n');
    response.write(`data: ${JSON.stringify(result)}\n\n`);

});

 

 

소통 채널 나가기

소통채널을 나가는 이유는 이벤트 소스라는 변수에 저장할 때마다 소통창이 계속 생성되기 떄문이다.

if (eventSource != undefined){ //이벤트 소스라는 변수에 무언가 저장되어 있다면 닫아라
    eventSource.close();
}

 

 

헤더란?

서버와 유저가 get, post 요청으로 데이터를 주고 받을 때 서로 몰래 부가 정보를 넘기는 데 이 부가 정보를 담아서 보내는 곳이

바로 '헤더'이다.

 

유저가 서버에 보내는 Header는 Request Header
서버가 유저에 보내는 Header는 Response Header