SSE 통신

SSE(Server Sent Events)

Polling

• 클 → 서 일정한 주기로 지속적 요청

• 리소스 낭비

Web Socket

• 실시간 양방향, TCP

• 채팅이나 게임 같이 사용자가 서버의 데이터에 즉각 반응해야 하는 경우라면 WebSocket을 사용하는 것이 더 효율적이겠지만 많은 경우 클라이언트 측에서의 반응은 필요가 없습니다. 주식차트, 뉴스피드, 푸시 노티피케이션 등이 대표적인 예입니다.

SSE

• 서 → 클: 단방향, http 프로토콜 기반으로 Real-Time Push Notification 전송

• 클라이언트의 요청에 의해 한 번 연결이 맺어지면 서버가 원하는 시점에 클라이언트에게 원하는 메시지를 전송할 수 있다. 이러한 특징 덕분에 최소의 오버헤드로 모니터링 시스템의 그래프 갱신, 채팅 및 메신저 등의 비지니스에 광범위하게 적용할 수 있다.

• 실시간 알림에서 클라이언트로부터 요청은 필요 없을 것으로 예상, 웹소켓보다 가벼움

• 별도 프로토콜 사용 X

• 자동 재연결

• 최대 동시 접속 수는 HTTP/1.1의 경우 브라우저 당 6개이며, HTTP/2는 100개까지 가능

• IE 지원 X
• HTML과 JavaScript만으로 구현할 수 있으므로 현재 지원되지 않는 브라우저(IE 포함)도 polyfill을 이용해 크로스 브라우징이 가능

• UTF-8 인코딩된 문자열 지원, JSON 마샬링

Event Stream

// 고유 id 같이 보내기. 
// id 설정 시 브라우저가 마지막 이벤트를 추적하여 서버 연결이 끊어지면 
// 특수한 HTTP 헤더(Last-Event-ID)가 새 요청으로 설정됨. 
// 브라우저가 어떤 이벤트를 실행하기에 적합한 지 스스로 결정할 수 있게 됨.

id: 12345\n
data: first line\n
data: second line\n\n

• 예시

// JSON 형식 예시

data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n

// event 이름 설정

id: 12345\n
event: sse\n
data: {"msg": "hello world", "id": 12345}\n\n

SSE - Spring

• Spring 4.2부터 SSE 통신 지원하는 SseEmitter클래스 지원

• Spring 5부터는 WebFlux로도 가능

클라이언트

• 처음 연결 필요
• 서버로부터 스트림을 받아 EventSource 객체를 통해 서버가 푸시하는 데이터를 받아 처리하면 됨

var es = new EventSource(stream_url);

es.onmessage = function (event) {
    // 이벤트 설정이안된 기본 데이터 처리
};
es.addEventListener('myevent', function(e) {
    // 'myevent' 이벤트의 데이터 처리
}, false);

• onmessage
• 기본 메시지가 왔을 때 호출
• onopen
• 접속이 맺어졌을 때 호출
• onerror
• 오류 발생 시 호출

• EventSource의 addEventListener()를 사용하면 위 3개의 이벤트뿐만 아니라 따로 지정된 이벤트의 데이터도 받아 처리할 수 있습니다.

• 서버에서 연결을 만료해도 클라이언트의 브라우저 레벨에서 자동으로 EventStream의 새로운 생성을 요청하기 때문에 큰 흐름에서 EventStream은 유지된다

서버

• EventSource를 통해 날아오는 요청을 처리

• MIME 타입 (text/event-stream)

• Last-Event-ID?
• sse 연결이 끊어졌는데 알림이 발생할 때 → 클라이언트에 도달X
• 클라이언트가 마지막으로 수신한 데이터의 id값을 의미
• 유실된 데이터 다시 보낼 수 있기 위함
• 항상 담겨있는 것은 아님

Last-Event-Id = 3_1631593143664

{3_1631593143664, data1} //여기까지 제대로 전송된 상태 확인 가능
{3_1831593143664, data3}
{3_1731593143664, data2}

• 데이터 id값: ${userId}_${System.currentTimeMillis()} 형식

MODI에서 알림은?

파티 공유 계정 변경 알림

• 공유계정 변경 (아이디와 비밀번호 모두 변경 가능?, 몇 번까지 얼마나 자주 변경 가능한지?)
• 공유계정 정보가 변경되었습니다.

• 파티장 파티원 모두?

파티 생성/참여 관련 알림

• 파티가 1일 후 시작됩니다 startDate -1
• mustFilled false
• mustFilled true && 인원이 모두 찼을 때
• 파티가 1일 후 시작됩니다.

• 파티의 인원이 다 채워지지 않아 파티가 삭제됩니다
• mustFilled true && 인원이 모두 차지 않았을 때

• 파티가 1일 후 만료됩니다
• endDate -1

• 파티원 참여시 파티장에게 파티원 참여 알림

• 파티가 만료되었습니다.

• 알림 읽음 기능 Patch

• 유저의 모든 알림 확인 기능

• 1 유저 N 멤버: 어떤 형식으로?

참고

Spring Boot, SSE(Server-Sent Events)로 단방향 스트리밍 통신 구현하기

Server-Sent Events(이하 SSE)는 HTTP 스트리밍을 통해 서버에서 클라이언트로 단방향의 Push Notification을 전송할 수 있는 HTML5 표준 기술이다. 이번 글에서는 Spring Boot에서 SSE를 이용한 단방향 스트리밍 통신 방법을 실제 운영 프로덕션 레벨 관점에서 설명하고자 한다. 전통적인 웹 애플리케이션이라면 클라이언트의 요청 단건에 대해 서버가 응답하는 방식이지만 SSE를 이용하면 별도의 복잡한 기술이 필요없이 HTTP 프로토콜을 기반으로 서버에서 클라이언트로 Real-Time Push Notification을 전송할 수 있다.

https://jsonobject.tistory.com/558

SSE를 이용한 실시간 웹앱

HTML5가 등장하기 전까지는 HTML에 서버 푸시를 위한 표준화된 기술이 없었기 때문에 웹에서 실시간 정보를 받아와야 할 때 외부 플러그인을 이용하거나 서버 푸시를 흉내 낸 Ajax 폴링(polling) 기법 등을 사용했습니다. 하지만 플러그인 종속적인 웹은 해당 플러그인을 설치해야 한다는 불편함이 있으며 폴링처럼 주기적인 요청을 통한 구현은 쓸모없는 요청의 발생으로 인한 대역폭의 낭비가 불가피하였습니다.

https://spoqa.github.io/2014/01/20/sse.html

[Spring + SSE] Server-Sent Events를 이용한 실시간 알림

코드리뷰 매칭 플랫폼 개발 중 알림 기능이 필요했다. 리뷰어 입장에서는 새로운 리뷰 요청이 생겼을 때 모든 리뷰가 끝나고 리뷰이의 피드백이 도착했을 때 리뷰이 입장에서는 공통적으로 위의 경우 알림을 보내줘야한다고 생각했다. 로그인한 상태가 아니라면 로그인 했을 때 받은 알림을 모두 보여주면 되지만, 로그인한 상태라면 실시간으로 알림을 받길 원했다.

https://velog.io/@max9106/Spring-SSE-Server-Sent-Events%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%95%8C%EB%A6%BC

SSE Protocol 활용해서 Spring => React 단방향 통신하자.

백엔드 서버가 두개가 있고, 프론트엔드 서버가 1개가 있다. 문제는 이거, A라는 벡 서버가 B라는 q벡서버에 소켓으로 데이터를 쏴주면 B라는 벡서버는 C라는 프론트서버에게 그 데이터를 다시 쏴주어야 한다. C는 그 데이터를 화면에 뿌려줘야 된다. 리액트에서는 Rest Controller를 달 수도 없는 노릇이고, 어떻게 백서버에서 프론트로 데이터를 일방적으로 쏠 수 있을까.

https://velog.io/@stella6767/SSE-Protocol-%ED%99%9C%EC%9A%A9%ED%95%B4%EC%84%9C-Spring-React-%EB%8B%A8%EB%B0%A9%ED%96%A5-%ED%86%B5%EC%8B%A0%ED%95%98%EC%9E%90

ReactJS에서 서버 전송 이벤트 구현

SSE (Server Sent Events)에 대해 들어 본 적이 있습니까? Tokopedia에서 파일 처리가 필요한 프로젝트 작업을 맡았을 때 처음 시도했습니다. SSE에 대해 자세히 알아보기 위해 Google의 첫 번째 페이지 몇 개를 살펴본 결과, 이것이 Tokopedia 사용자의 요구를 충족하는 가장 적합한 방법이라는 것을 알게되었습니다.

https://ichi.pro/ko/reactjseseo-seobeo-jeonsong-ibenteu-guhyeon-214844495664232

서버 사이드 이벤트 (Server Side Events, SSE)

일반적이고 전통적인 웹페이지의 경우, 새로운 데이터를 받기 위해서는 서버에 데이터 요청을 해야만 한다. 이른바 폴링이라는 기술로, 웹페이지가 서버에 요청을 해야만, 서버가 그 요청에 따른 데이터를 적절하게 리턴해주는 방식이라고 볼 수 있다. 하지만 Server Side Events, 이하 (SSE)를 활용하면, 웹페이지가 별도로 요청하지 않아도 서버가 데이터를 보내는 것이 가능하다.

https://yceffort.kr/2020/11/server-side-events