1. Web Sockets / 서버에서의 이벤트 수신

Web Sockets

웹 소켓은 사용자의 브라우저와 서버 사이의 통신세션을 설정 할 수 있게 하는 고급기술.

개발자는 웹 소켓 API를 통해 서버로 메세지를 보내고, 폴링없이 서버의 응답을 받는것이 가능하다.

*폴링(polling) : 동기화와 충돌 회피를 목적으로 하나의 장치가 다른 장치의 상태를 주기적으로 검사하는 행위.

 

서버에서의 이벤트 수신(클라이언트 측)

- EventSource : 서버가 보낸 이벤트 API를 내포.

const evtSource = new EventSource("ssedemo.php");

 

- message : 이벤트 소스를 인스터화 한 후 서버에서 메시지를 전달받음.

evtSource.onmessage = function(event) {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");

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

- 'ping' 이벤트리스너를 이용하여 수신도 가능하다.

evtSource.addEventListener("ping", function(event) {
  const newElement = document.createElement("li");
  const time = JSON.parse(event.data).time;
  newElement.innerHTML = "ping at " + time;
  eventList.appendChild(newElement);
});

- onerror : 네트워크 시간 초과 또는 엑세스 관련 문제로 오류가 발생할때 객체에 onerror콜백을 구현하여 오류처리를 할 수 있다.

evtSource.onerror = function(err) {
  console.error("EventSource failed:", err);
};

- close : 기본적으로 클라이언트와 서버간의 연결이 닫히면 연결이 다시 시작되는데 close메소드로 연결을 종료 할 수 있다.

evtSource.close();

 

서버에서 이벤트 발신(서버 측)

이벤트를 보내는 서버는 MIME type의 스크립트를 사용하여 응답해야한다.