SSE란 ?

1-1 SSE란 ?(Server Sent Events)

서버에서 클라이언트로 단방향으로 실시간 데이터를 보내는 웹 기술

1-2 SSE 동작 방식

1. 클라이언트가 서버에게 SSE로 통신하자는 요청을 보냄

🫥 EventSource 객체를 통해 서버에 HTTP 요청

🫥 이벤트가 발생하면 발생하면, 클라이언트 쪽으로 알려달라는 요청을 보내는거임

1. 서버는 이 요청을 수신하고, 수락하는 응답을 보냄
2. 클라이언트는 서버에게 수락 응답을 받고, 서버가 보내주는 데이터에 반응할 준비를 해야함
3. 연결이 완료되면, 서버는 정해진 이벤트가 있을때마다 클라이언트에게 메시지 보냄

🫥 단방향 통신이라서, 클라이언트는 이에 응답할 수 없음

1. 필요한 작업이 끝나면, 클라이언트나 서버에서 상대방에게 종료를 통보하는 메세지를 보내면 연결이 끝남 (그럼 연결을끝냈다는 상대방 응답이 필요 없는건가 ? ) → source.close()
2. 연결이 비정상적으로 끊기면?

💡
SSE 동작 방식은 http를 통해서 이뤄짐

 

1-3 코드 흐름 예시

1. 클라이언트가 웹 사이트일 경우, 브라우저가 제공하는 JavaScript Web API인 EventSource 객체가 SSE에 사용하고, 지정된 URI로 서버에게 요청을 보냄

1. 클라이언트가 보내는 요청에는 SSE통신을 통해 이벤트 스트림이라는 형식의 메시지를 수신하겠다는 의미의 헤더가 실리고, 서버는 해당 형식(이벤트 스트림)으로 작성된 메시지임을 명시하는 헤더가 포함된 응답을 보냄

1. 서버는 지정된 이벤트가 발생할때마다 실시간으로 클라이언트에게 지정된 메시지를 보냄

1-4. 서버에서 응답으로 보내는 메시지 형식

✔️ 서버에서 보내는 메시지는 텍스트 기반이다.

⚙️ 개인적으로 코드 구현할때 고려하면 어떨까 정리한 부분

event : customEvent
data : tetst

• event 유형에 데이터를 넣고, 어떻게 반응할지를 eventSource 객체 등에 등록된 리스너에 명시 가능

—> 그렇다면 응답마다 어떤 유형에 대한 응답인지 식별을 위해 event를 넣어야될듯 , 예를들어 댓글 등록 알람, 새로운 채팅 생성 알람 이런것들을 위해서면 필수 라는 생각이 듬

🔥 생각한 사용 예시

event: new-comment
data: { "postId": 1, "author": "userA", "content": "comment Test " }

event: new-message
data: { "chatRoomId": 1, "sender": "userB", "message": "chat Test" }​

 

1-5. WebSocket과 차이 ?

• 구현이 간편함
• SSE는 http 기반이라서, 방화벽에도 안전함 (80, 443 port 그대로 사용)