[Node+MongoDB]실시간 데이터 푸시1(Server sent events)

웹소켓이 아니라 Server sent events로도 실시간으로 데이터 전송이 가능하다
현재 글 list페이지는 새로 글을 작성한 뒤 새로고침을 해줘야 받아오는데,
서버에서 새 게시물을 계속 보내주는 기능을 구현해보자

원래는 서버에서 응답을 하면 연결이 끊기게 되는데,
끊지 않고 유지한 상태로 응답을 할 수 있다.

1. header를 'Connection' : 'keep-alive'로 설정
2. 응답.write(전송할데이터)

• request header: "유저->서버"로 보내는 부가정보
  (브라우저, OS, 언어, 쿠키 등)
• response header: "서버->유저"로 보내는 부가정보
  (날씨, 전달하는 데이터 타입 등)

header 안에 어떤게 들어있는지 직접 보고싶으면 개발자도구 켜서 "Network탭" 켜보기

✨SSE 구현하는 방법

서버코드에 "/stream/list"로 get 요청을 하면 요청을 끊지 말고 유지해보자

1. .writeHead를 사용해서 아래처럼 코드 작성

  응답.writeHead(200, {
    "Connection": "keep-alive",
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
  })

이렇게 작성해서 넣어주면 끊지 않고 유지해준다.
이후, 응답.wrtie('데이터')로 실행할 때마다 유저에게 데이터를 쏴줄 수 있다.
.write를 사용하려면 최소 2줄에
event: 이벤트명과 data: 전달할내용을 잘 작성해줘야한다. (콜론: 왼쪽에 띄어쓰기 금지)
그리고 한줄 끝나면 \n 를 잘 넣어주기!
그럼 간단한 문자와JSON을 계속 유저에게 전송해줄 수 있다.

2. 서버코드를 작성해줬으면 다음은 ejs파일로 가서 script를 열고,
   SSE 연결을 원할 경우 new EventSource('/URL')

      let eventSource = new EventSource('/stream/list')
      eventSource.addEventListener('서버에작성했던이벤트명', function(){
        
      })

3. 이후 서버로 돌아가서 setInterval을 사용해 1초마다 위에서 작성했던 응답.write코드가 실행되도록 만들어주자
   

4. 테스트해보면 1초마다 data가 잘 출력되고 있다.
   

이런 기능들을 활용하여 DB에 변동사항이 생기는 경우 새로고침을 해주자.
다음 포스팅은 "MongoDB change stream" 사용하는 방법이 되겠다!