[컴][웹] 간단하게 주기적으로 message 를 수신하는 web page

EventSource / cors / jsonp / different host / subscribe model /


tornado

EventSource object | Javascript

EventSource object 로 server 에 연결(subscribe) 을 해서 주기적으로 event 를 받을 수 있다. 자세한 동작은 일단 생략한다. ref. 2 에서 어느정도 설명을 해준다.

different domain

domain 이 다른 곳에 event 를 날려주는 server 가 있어도 무리없이 사용할 수 있다. 보통 html(javascript) 에서 다른 domain 인 경우는 보안을 이유로 ajax 요청이 되지 않는다. 그래서 jsonp 등(일반적으로 Cross-Origin Resource Sharing 이라고 이야기하는 방법)을 이용한다.

하지만 이 EventSource 는 그런 것의 제약을 받지 않는다. [ref. 1]

아래처럼 다른 domain 인 경우에는 다른 domain 을 uri 로 적어주면 된다.

var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );

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);

이렇게 다른 domain 에 대한 제약이 없어서 좋은 점은 기존의 web server 와 관계없이 새로운 event 처리를 하는 server 를 사용할 수 있다는 점이다. 그러면 주기적인 push event 등을 처리하는 server 를 따로 둘 수 있다.

Server side event vs WebSocket

event driven page 를 만들 땐 SSE 를 사용해도 되고, WebSocket 을 사용해도 된다. 개인적으로는 필요한 부분은 단방향이라서, 양방향 통신이 되는 WebSocket 이 굳이 필요하지 않았다.

아래는 SSE 와 WebSocket 을 간략하게 정리했다.

SSE

1. 2009년 4월 23 일 WHATWG 에서 승인했다. [ref. 7] 
2. 하지만 SSE 가 좀 더 간편하다. 
3. 그리고 http protocol 위에서 구현되었다. 
4. 단방향 통신
5. client 의 connection 이 종료되었는지 여부를 알 수는 없다.(http 라서 당연한 것일지도.)

WebSocket

1. 반면에 WebSocket 은 Tcp/ip 로 다른 port 를 사용한다. 그래서 이 port 가 firewall 에 의해 막혀 있을 수도 있고, 
2. 이 녀석을 이용하려면, protocol 을 또 정의해야 한다. (ref. 5 에서 좀 더 다양한 의견을 확인할 수 있다.)
3. 양방향 통신

from: https://usp.technology/specification/mtp/websocket/websocket-session-handshake.png

See Also

1. WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database

Reference

1. Using server-sent events - Web APIs | MDN
2. Stream Updates with Server-Sent Events - HTML5 Rocks
3. Asynchronous connections - RethinkDB
4. Build a real time data push engine using Python and Rethinkdb | IMPYTHONIST
5. SSE vs Websockets - Streamdata.io
6. Lessons Learned Architecting Realtime Applications | Lincoln Loop
7. Python and Real-time Web | Eat at Joe's
8. Tornado server-sent events · GitHub : tornado 로 SSE 구현 예제.
9. Building RESTful APIs with Tornado | Dr Dobb's