실시간 HTTP 양방향 통신 (Web socket, Polling, Long-polling, and so on)

m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

disqus.js with id="disqus-js" is loaded.

kakao.js with id="kakao-jssdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=0;
m.wait=1024;
wait 1331ms.

▼ Hide

Toggle a mess

Go (FS)

TofC

DocuK Log

Backward

Forward

RRA

Lists

CmtZ

CmtX

Handle CmtZ

Log in

▲

Go: Fuzzy search

out focus

[--The following is copied!--]

Dark Bright

Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 2.12.18
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/171
document.referrer: Empty

This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

실시간 HTTP 양방향 통신 (Web socket, Polling, Long-polling, and so on)

웹 페이지가 한번 로딩 된 이후에 서버에 새로운 데이터가 들어오거나 기존 데이터에 변화가 일어나서 이미 로딩이 끝난 사용자의 웹페이지에도 무언가 변화를 일으키고 싶을때도 있을텐데 이런걸 가능하게 해주는 방법에 대해 알아보자.

"웹 페이지가 다시 로드되지 않고도 실시간으로 변동사항을 반영해 변화하게 하려면 어떻게 해야할까요. 이런 고민들은 의외로 많은 곳에서 만나게 됩니다. 웹에서 실시간 모니터링 도구를 만들어야 한다던가, 스포츠 실황중계처럼 매우 짧은 시간간격으로 변화하는 상황을 사용자에게 보여주어야만 하는 서비스를 만든다던가 할 때, 우리는 이와 같은 고민에 빠지게 됩니다. 함께 접속한 사용자들이 작성한 글을 거의 실시간에 가깝게 다른 사용자들에게 보여주어야만 하는 채팅 서비스에서도 물론 같은 고민에 직면할 것입니다."

[02]

Ref. [02] dev.epiloum.net :: 코멧(Comet) #1 – 웹 페이지를 실시간으로 업데이트하는 방법, 2013-11-09
// 글을 잘 써놓으신듯.

Table of Contents

1.Regular HTTP : request and response

2.주기적인 요청방식 (Peoridic request and response)

3.Keep connected 방식 (Streaming)

Refs.References and Related Articles

T1.Regular HTTP : request and response

▼ Show/Hide

실시간 HTTP 통신을 어떻게 구현할지 알아보기 전에 우선 기본적인 classic HTTP web traffic 이 어떤 방식으로 돌아가는지 알아보자.

HTTP 의 가장 기본적인 통신 방식은 request/response protocol 이라고 할 수 있다. Client 가 server 에 request 를 보내면, server 가 이에 반응해서 response 를 보내는 방식이다.

Client 가 request 를 보내는 방식에는,

• Browser 에서 URL 을 입력하고 enter 를 친다. (\( \rightarrow \) 해당 URL 로 HTTP GET request 를 보내고 server 가 response 하는 html 데이터를 받아 처리한 다음 페이지를 띄움.)
• <a href=""></a> link 를 클릭한다. $\rightarrow$ 위와 마찬가지로 처리됨.
• Browser 가 HTML 을 rendering 하다보니, source (src/href) attribute 를 가지는 다음과 같은 특정 html element 들이 있다.

  <link rel="stylesheet" href="...">
  <script src="..."></script>
  <img src="...">
  <audio src="...">
  	<source src="..." type="audio/ogg">
  </audio>
  <video src="..."></video>
  <iframe src="..."></iframe>
  <embed src="..." type="">
  <object data="" type=""></object>
  

  \( \rightarrow \) 이 경우 browser 내부적으로 해당 source 를 얻기 위해 HTTP request 를 보낸다. src attribute 를 javascript 통해서 바꾸면 바뀐 source URL 로 HTTP request 를 다시 보내서 재처리해주는 경우도 있음. (img, iframe 의 경우 이렇게 해줌. 그래서 이런건 delayed-loading 이 가능. embed 같은 tag 는 안해주는듯도 하고...)

따라서 client 쪽의 이벤트는 server 쪽에 쉽게 전달할 수 있지만, server 쪽의 이벤트는 client 가 요청하기 전에는 전달할 수 없다.

▲ Hide

T2.주기적인 요청방식 (Peoridic request and response)

▼ Show/Hide

▲ Hide

T3.Keep connected 방식 (Streaming)

▼ Show/Hide

▲ Hide

TRefs.References and Related Articles

▼ Show/Hide

1. Ref. [01] mohwaproject.tistory.com :: 웹에서 실시간 데이터 처리하기(WebSocket, Comet), 2012-05-17
   // 예제 코드도 있고, Polling 과 WebSocket 방식의 성능도 비교해 놓음.
2. Ref. [02] dev.epiloum.net :: 코멧(Comet) #1 – 웹 페이지를 실시간으로 업데이트하는 방법, 2013-11-09
   // 글을 잘 써놓으신듯.
3. Ref. [03] rein's world :: NDC 참관기: 실시간 HTTP 양방향 통신, 2012-04-26
4. Ref. [04] blog.outsider.ne.kr :: Play framework에서 Long Polling 구현하기, 2010-09-27
5. Ref. [05] d2.naver.com/helloworld :: RTCS 실시간 웹 서비스를 위한 도전, 2011-12-22
6. Ref. [06] stackoverflow :: What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?, 2012-06-18, asked by user1437328, answered by Tieme
   // 답변이 좋음.

▲ Hide