SSE 사용하기

안녕하세요 🐸

SSE(Server-Sent-Event)

서버의 데이터를 실시간으로 클라이언트에게 보내는 이벤트 입니다.
실시간 통신이라는 점은 웹소켓과 유사합니다.
하지만 SSE는 서버에서 클라이언트로 보내는 단방향 통신만 가능합니다.
실시간 통신은 필요하지만 양방향일 필요는 없는 경우 적절하게 쓸 수 있습니다.

구현하기

구현 방법은 웹소켓의 구현 방법과 유사합니다.
단, 구버전 익스플로러 사용자는 클라이언트 측에서 별도의 스크립트를 삽입해줘야 합니다.

클라이언트

대부분의 클라이언트는 EventSource 를 지원합니다.

<script>
	// sse 미들웨어를 사용하면 기본 경로는 /sse
	const es = new EventSource('/sse');
	es.onmessage = function(e){
		const data = e.data;
		console.log('data',data);
	}
</script>

구버전 익스플로러에서는 EventSource가 지원되지 않기 때문에 아래 스크립트를 추가로 삽입합니다.

<script src="https://unpkg.com/event-source-polyfill/src/eventsource.min.js"></script>

서버

SSE 미들웨어 설치

npm i sse

SSE 연결

/*
	file:app.js 
*/
const SSE = require('sse');
/*생략*/
const server = app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기중');
});

// 생성자의 두 번째 파라미터로 옵션을 전달 할 수 있다
const sse = new SSE(server);
sse.on('connection',(client)=>{
	setInterval(()=>{
		client.send(Date.now().toString());
	},1000);
})

SSE 미들웨어도 socket.io 처럼 path 옵션을 통해 SSE 연결할 URL을 설정합니다.
기본값은 /sse 입니다.

만약 URL을 변경하고 싶다면 아래와 같이 해야합니다.

const sse = new SSE(server,{
	path:'/sseTest'
})

클라이언트는 이와 맞춰 EventSource 를 변경합니다.

<script>
	const es = new EventSource('/sseTest');
</script>

연결 확인

/sse 로 연결이 되었음을 확인할 수 있습니다.
서버에서 보내지는 데이터는 EventStream 탭에서 확인 가능합니다.