linuxism

Comet is a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it.^[1][2] Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins. The Comet approach differs from the original model of the web, in which a browser requests a complete web page at a time.^[3]

The use of Comet techniques in web development predates the use of the word Comet as a neologism for the collective techniques. Comet is known by several other names, including Ajax Push,^[4][5] Reverse Ajax,^[6] Two-way-web,^[7]HTTP Streaming,^[7] and HTTP server push^[8] among others.^[9]

[edit]Implementations

Comet applications attempt to eliminate the limitations of the page-by-page web model and traditional polling by offering real-time interaction, using a persistent or long-lasting HTTP connection between the server and the client. Since browsers and proxies are not designed with server events in mind, several techniques to achieve this have been developed, each with different benefits and drawbacks. The biggest hurdle is the HTTP 1.1 specification, which states that a browser should not have more than two simultaneous connections with a web server.^[10] Therefore, holding one connection open for real-time events has a negative impact on browser usability: the browser may be blocked from sending a new request while waiting for the results of a previous request, e.g., a series of images. This can be worked around by creating a distinct hostname for real-time information, which is an alias for the same physical server.

Specific methods of implementing Comet fall into two major categories: streaming and long polling.

[edit]Streaming

An application using streaming Comet opens a single persistent connection from the client browser to the server for all Comet events. These events are incrementally handled and interpreted on the client side every time the server sends a new event, with neither side closing the connection.^[3]

Specific techniques for accomplishing streaming Comet include the following:

[edit]Hidden iframe

A basic technique for dynamic web application is to use a hidden iframe HTML element (an inline frame, which allows a website to embed one HTML document inside another). This invisible iframe is sent as a chunked block, which implicitly declares it as infinitely long (sometimes called "forever frame"). As events occur, the iframe is gradually filled with script tags, containing JavaScript to be executed in the browser. Because browsers render HTML pages incrementally, each script tag is executed as it is received.^[11]

One benefit of the iframe method is that it works in every common browser. Two downsides of this technique are the lack of a reliable error handling method, and the impossibility of tracking the state of the request calling process.^[11]

[edit]XMLHttpRequest

The XMLHttpRequest (XHR) object, the main tool used by Ajax applications for browser–server communication, can also be pressed into service for server–browser Comet messaging, in a few different ways.

In 1995, Netscape Navigator added a feature called “server push”, which allowed servers to send new versions of an image or HTML page to that browser, as part of a multipart HTTP response (see History section, below), using the content type multipart/x-mixed-replace. Since 2004, Gecko-based browsers such as Firefox accept multipart responses to XHR, which can therefore be used as a streaming Comet transport.^[12] On the server side, each message is encoded as a separate portion of the multipart response, and on the client, the callback function provided to the XHR onreadystatechange function will be called as each message arrives. This functionality is only included in Gecko-based browsers, though there is discussion of adding it to WebKit.^[13] Internet Explorer 10 now also support this functionality.^[14]

Instead of creating a multipart response, and depending on the browser to transparently parse each event, it is also possible to generate a custom data format for an XHR response, and parse out each event using browser-side JavaScript, relying only on the browser firing the onreadystatechange callback each time it receives new data.

[edit]Ajax with long polling

None of the above streaming transports work across all modern browsers without negative side-effects. This forces Comet developers to implement several complex streaming transports, switching between them depending on the browser. Consequently many Comet applications use long polling, which is easier to implement on the browser side, and works, at minimum, in every browser that supports XHR. As the name suggests, long polling requires the client to poll the server for an event (or set of events). The browser makes an Ajax-style request to the server, which is kept open until the server has new data to send to the browser, which is sent to the browser in a complete response. The browser initiates a new long polling request in order to obtain subsequent events. Specific technologies for accomplishing long-polling include the following:

[edit]XMLHttpRequest long polling

For the most part, XMLHttpRequest long polling works like any standard use of XHR. The browser makes an asynchronous request of the server, which may wait for data to be available before responding. The response can contain encoded data (typically XML or JSON) or Javascript to be executed by the client. At the end of the processing of the response, the browser creates and sends another XHR, to await the next event. Thus the browser always keeps a request outstanding with the server, to be answered as each event occurs.

[edit]Script tag long polling

While any Comet transport can be made to work across subdomains, none of the above transports can be used across different second-level domains (SLDs), due to browser security policies designed to prevent cross-site scriptingattacks.^[15] That is, if the main web page is served from one SLD, and the Comet server is located at another SLD, Comet events cannot be used to modify the HTML and DOM of the main page, using those transports. This problem can be sidestepped by creating a proxy server in front of one or both sources, making them appear to originate from the same domain. However, this is often undesirable for complexity or performance reasons.

Unlike iframes or XMLHttpRequest objects, script tags can be pointed at any URI, and JavaScript code in the response will be executed in the current HTML document. This creates a potential security risk for both servers involved, though the risk to the data provider (in our case, the Comet server) can be avoided using JSONP.

A long-polling Comet transport can be created by dynamically creating script elements, and setting their source to the location of the Comet server, which then sends back JavaScript (or JSONP) with some event as its payload. Each time the script request is completed, the browser opens a new one, just as in the XHR long polling case. This method has the advantage of being cross-browser while still allowing cross-domain implementations.^[15]

[edit]History

[edit]Early Java applets

The ability to embed Java applets into browsers (starting with Netscape 2.0 in March 1996^[16]) made real-time communications possible, using a raw TCP socket^[17] to communicate between the browser and the server. This socket can remain open as long as the browser is at the document hosting the applet. Event notifications can be sent in any format — text or binary — and decoded by the applet.

[edit]First Comet applications

In March 2006, software engineer Alex Russell coined the term Comet in a post on his personal blog.^[18] The new term was a play on Ajax (Ajax and Comet both being household cleaners common in the USA).^[19][20][21]

Even if not yet known by that name, the very first Comet implementations date back to 2000,^[22] with the Pushlets, Lightstreamer, and KnowNow projects. In 2006, some applications exposed those techniques to a wider audience:Meebo’s multi-protocol web-based chat application enables users to connect to AOL, Yahoo, and Microsoft chat platforms through the browser; Google added web-based chat to Gmail; JotSpot, a startup since acquired by Google, built Comet-based real-time collaborative document editing.^[23] New Comet companies and enterprise solutions were created, such as the Java-based ICEfaces JSF framework (although they prefer the term "Ajax Push"^[5]). Others that had previously used Java-applet based transports switched instead to pure-JavaScript implementations.^[24]

[edit]Alternatives

Browser-native technologies are inherent in the term Comet. Attempts to improve non-polling HTTP communication have come from multiple sides:

• The HTML 5 draft specification produced by the Web Hypertext Application Technology Working Group (WHATWG) specifies so called server-sent events,^[25] which defines a new Javascript interface EventSource and a new MIME type text/event-stream. Experimental implementation of this feature was introduced in Opera 9.^[26]
• The HTML 5 WebSocket API working draft specifies a method for creating a persistent connection with a server and receiving messages via an onmessage callback.^[27]
• The Bayeux protocol by the Dojo Foundation. It leaves browser-specific transports in place, and defines a higher-level protocol for communication between browser and server, with the aim of allowing re-use of client-side JavaScript code with multiple Comet servers, and allowing the same Comet server to communicate with multiple client-side JavaScript implementations. Bayeux is based on a publish/subscribe model, so servers supporting Bayeux have publish/subscribe built-in.^[28]
• The BOSH protocol by the XMPP standards foundation. It emulates a bidirectional stream between browser and server by using two synchronous HTTP connections.
• The JSONRequest object, proposed by Douglas Crockford, would be an alternative to the XHR object.^[29]
• Use of plugins, such as Java applets or the proprietary Adobe Flash (using RTMP protocol for data streaming to Flash applications). These have the advantage of working identically across all browsers with the appropriate plugin installed and need not rely on HTTP connections, but the disadvantage of requiring the plugin to be installed
• Google announced^[30] a new Channel API for Google App Engine,^[31] implementing a Comet-like API with the help of a client Javascript library on the browser. It could be later replaced by HTML5 WebSocket, however.

[edit]See also

• Push technology
• Pull technology

[edit]References

Comet (혜성)는 Web 어플리케이션 을 구축 할 때 사용되는 기술로,이 기술을 사용하면 서버 에서 발생한 이벤트 를 클라이언트 의 요청없이 클라이언트 에 보낼 수있다.

Comet은 이러한 통신을 실현하기위한 여러 기법을 정리 한 개념이다. 이러한 기술은 브라우저에 플러그인을 추가하지 않고 ( JavaScript 와 같은) 기본 기능으로 실현되는 것이다. 이론적으로는 Comet은 브라우저가 데이터를 요구하는 형태의 기존 웹 모델과는 다르다. 실제로 Comet 애플리케이션은 Ajax 와 Long polling 을 사용하여 서버에 새 데이터를 검색한다.

왜 필요한가 [ 편집 ]

기존의 방법으로는 웹 페이지는 클라이언트에서 요청이있을 때 만 클라이언트에 전달되고 있었다. 클라이언트가 요청할 때마다 브라우저는 서버에 HTTP 연결을 생성하고 웹 서버는 클라이언트에 데이터를 반환하고 연결이 닫힙니다. 이 방법의 단점은 사용자가 명시 적으로 페이지를 새로 실시하거나 사용자가 새로운 페이지로 이동하는 경우에만 표시되는 페이지가 갱신되지 않는 것이다. 페이지를 전송하는 데 긴 시간을 요하기 때문에, 페이지를 새로 엄청난 지연을 만들어 낸다.

이 문제를 해결하기 위해, 브라우저에 변경된 부분 만 요청 업데이트시키는 기술이다 Ajax 를 사용할 수있다. 이 방법은 데이터 트래픽이 기존의 방법보다 줄어들 기 때문에 지연의 정도도 줄어 전체 사이트의 성능 향상이라고 할 수있다. 다시 말하면, 비동기 통신을 이용함으로써 사용자는 단계적으로 데이터를 수신하면서 작업을 할 수 있기 때문에, 그런 의미에서도 성능이 향상된다.

그러나 Ajax를 사용하더라도 클라이언트가 데이터를 검색하기 전에 이에 대한 요청을 내야한다는 어려운 문제는 여전히 존재한다. 이 문제는, 예를 들면 "있는 사용자가 데이터를 보내왔다"라고하는 서버에서 이벤트가 발생할 때까지 대기해야하는 응용 프로그램을 설계 할 때 큰 장애가된다.

서버에서 이벤트가 발생했는지 여부를 정기적으로 확인한다 (이른바 폴 루프시키는)하도록 응용 프로그램을 설계하는 것은 하나의 해결책이다. 그러나이 방법은 응용 프로그램이 결국 서버 이벤트가 완료 여부의 질문에 많은 시간을 써 버리기 때문 그다지 우아가 아닌. 또한 네트워크의 대역폭을 많이 소비되어 버린다.

실현 방법 [ 편집 ]

일반적으로 Web 서버는 클라이언트의 요청을 받으면 즉시 응답을 돌려 준다.

Comet을 이용한 Web 응용 프로그램 서버는 클라이언트의 요청에 즉시 응답하지 않고 보류 상태로두고 서버에서 특정 이벤트 (대화에서 누군가가 발언 한 등)이 발생했을 때 응답을 반환. 이렇게하면 서버에서 발생한 이벤트를 즉시 클라이언트에 보낼 수있다.

관련 항목 [ 편집 ]

• Ajax
• WebSocket
• 메시지 지향 미들웨어

외부 링크 [ 편집 ]

• Lingr and Comet - 기술 해설 편 에지 마 켄타로
• Comet의 올바른 사용법

출처 - http://en.wikipedia.org/wiki/Comet_(programming)

이벤트란 무엇인가?

이벤트가 움직이는 방법

이벤트의 혁명

<a href="http://www.opera.com/" onclick="alert('Hello')">Say hello</a>

<script type="text/javascript">
  document.getElementById("my-link").onclick = waveToAudience;
    function waveToAudience() {
      alert("Waving like I've never waved before!");
    }
</script>
<a id="my-link" href="http://www.opera.com/">My link</a>

DOM 레벨 2 이벤트

document.getElementById("my-link").addEventListener("click", myFunction, false);

IE의 이벤트 모델 예외

document.getElementById("my-link").attachEvent("onclick", myFunction);

다양한 브라우저에서 이벤트 등록하기

이벤트와 접근성

이벤트 제어

addEvent(window, "load", sayHi);
function sayHi() {
  alert("Hello there, stranger!");
}

addEvent(window, "load", function () {
  alert("Hello there, stranger!");
});

특정한 요소에 이벤트 적용하기

addEvent(window, "load", function () {
  var links = document.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
      addEvent(links[i], "click", function () {
        alert("NOPE! I won't take you there!");
        // This line`s support added through the addEvent function. See below.
      evt.preventDefault();
    });
  }
});

이벤트 객체 참조

addEvent(document.getElementById("check-it-out"), "click", eventCheck);
function eventCheck (evt) {
  var eventReference = (typeof evt !== "undefined")? evt : event;
  var eventTarget = (typeof eventReference.target !== "undefined")? eventReference.target : eventReference.srcElement;
}

이벤트에 종속적인 속성 체크

addEvent(document.getElementById("user-name"), "keyup", whatKey);
function whatKey (evt) {
  var eventReference = (typeof evt !== "undefined")? evt : event;
  var keyCode = eventReference.keyCode;
  if (keyCode === 13) {
    // The Enter key was pressed
    // Code to validate the form and then submit it
  }
  else if (keyCode === 9) {
    // The Tab key was pressed
    // Code to, perhaps, clear the field
  }
}

이벤트 기본값과 버블링

이벤트의 기본적 동작방식 차단

addEvent(document.getElementById("stop-default"), "click", stopDefaultBehavior);
function stopDefaultBehavior (evt) {
  var eventReference = (typeof evt !== "undefined")? evt : event;
  if (eventReference.preventDefault) {
    eventReference.preventDefault();
  }
  else {
    eventReference.returnValue = false;
  }
}

이벤트 버블링의 중지

<div>
  <ul>
    <li>
      <a href="http://www.opera.com/">Opera</a>
    </li>
    <li>
      <a href="http://www.opera.com/products/dragonfly/">Opera Dragonfly</a>
    </li>
  </ul>
</div>

addEvent(document.getElementById("stop-default"), "click", cancelEventBubbling);
function cancelEventBubbling (evt) {
  var eventReference = (typeof evt !== "undefined")? evt : event;
  if (eventReference.stopPropagation) {
    eventReference.stopPropagation();
  }
  else {
    eventReference.cancelBubble = true;
  }
}

이벤트 핸들링의 완전한 예제

addEvent(window, "load", function () {
  var contactForm = document.getElementById("contact-form");
  if (contactForm) {
    addEvent(contactForm, "submit", function (evt) {
      var firstName = document.getElementById("first-name");
      var lastName = document.getElementById("last-name");
      if (firstName && lastName) {
        if (firstName.value.length === 0 || lastName.value.length === 0) {
          alert("You have to fill in all fields, please.");
          evt.preventDefault();
        }
      }
    });
  }
});

요약

연습문제

저자에 대해

출처 - http://www.clearboth.org/49_handling-events-with-javascript/

윈도우7 사용자가 리눅스를 같이 사용하는 길은 대략 2가지가 있겠다. 

1. 윈도우/리눅스 듀얼 부팅
  - 먼저 윈도우를 설치하고, 제어판으로 가서 디스크 관리자에서 볼륨 축소 기능을 이용해서 리눅스를 쓰기 위한 공간을 확보
  - 최강의 듀얼 부팅 프로그램인 EasyBCD를 받아 설치
     EasyBCD 홈페이지
  - 리눅스 CD 또는 DVD로 부팅하여 빈 파티션에 리눅스를 설치
  - 윈도우로 부팅한 후 EasyBCD를 실행해서 리눅스 듀얼 부팅을 설정(클릭 몇번만 하면 되므로 매우 쉽다)
  - 재부팅하면 윈도우 부트 메뉴에서 윈도우/리눅스 선택이 가능
    
2. 가상 머신 사용
  - 윈도우 설치
  - 걸출한 공짜 가상 머신 프로그램인 VirtualBox 설치
    VirtualBox 홈페이지
  - 가상 머신을 생성하고 리눅스 설치(리눅스를 굳이 CD로 굽지 않고 iso 파일로 설치할 수 있어서 편리하다)
  - 가상머신에서 VirtualBox Additions 설치(이걸 해 줘야 호스트와의 파일 공유, 화면 해상도 변경 등이 가능하다)
  * 리눅스에서 VirtualBox Additions 설치가 배포판에 따라 약간 껄끄러울 수가 있는데, 이 부분은 나중에 별도의 게시물로 써 놔야 겠다.

EasyBCD 2.1.2.zip

출처 - http://bahndal.egloos.com/88140