19년도 여름방학 모각코 2일차 회고 0628

SSE란?

---

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

 

웹 소켓

---

웹소켓은 양방향 통신 기술이다. 서버에서 클라이언트로 데이터를 보낼 수 있고 클라이언트에서 서버로 데이터를 보낼 수 있다
가장 큰 특징은 http는 통신을 유지하지 않는다. 그래서 한번 통신을 통해서 데이터를 보낸다음에 통신을 끈어버린다.
그래서 http 프로토콜 대신 ws 프로토콜을 사용한다. 그래서 통신을 유지한다.
라이브러리로는 javasciprt에 https://socket.io/ 가 있다.

 

# 공통점과 차이점

SSE와 웹 소켓의 공통점은 둘다 실시간으로 서버에서 클라이언트로 데이터를 보낼 수 있다는 것이다.
하지만 웹 소켓은 SSE랑 다르게 클라이언트에서도 서버로 데이터를 보낼 수 있다. 웹 소케은 양방향 통신이기 때문이다.
SSE는 http 프로토콜을 이용한 통신이고, 웹 소켓은 ws 웹소켓 프로토콜을 이용한 통신을 한다.
SSE는 서버에서 클라이언트로만 보내는 단방향이므로 웹 소켓보다 가볍다.
인터넷 익스플로러는 19년 6월 현재 버전 기준으로 웹 소켓만 지원하니 웹 소켓 에플리케이션 구현하기 앞서 고민하여야한다.
그래서 IE에서 SSE를 사용하려면 polyfill을 사용하여야한다.

 

SSE 사용방법

---

1. SSE 사용방법은 간단하다 먼저 javascript에서 EventSource 객체를 생성하고 파라미터로 통신을 할 라우트 경로를 넣어준다.

var evtSource = new EventSource("URL");

2. 생성한 객체의 onmessage 이벤트를 정의 해준다.

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");
  var eventList = document.getElementById('list');

  newElement.innerHTML = "message: " + e.data;
  eventList.appendChild(newElement);
}

해당 코드는 데이터를 서버에서 받으면 새로운 li태그에 받아온 내용으로 DOM객체를 만들어서 이벤트 리스트에 자식 노드로 추가해주는 코드이다.

2-1. 또다른 onmessage 이벤트 정의 방법

evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");

  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  eventList.appendChild(newElement);
}, false);

3. 에러 핸들링

evtSource.onerror = function(e) {
  console.log("EventSource failed.");
};

접속이 끈어졌다 거나 하는 에러가 발생했을 시 onerror를 정의 해줌으로써 핸들링할 수 있다.

4. 스트림(연결) 끊기

evtSource.close();

close()함수를 이용하면 연결을 끊을 수 있다.