jjeong

http://dev.w3.org/html5/eventsource/

[Constructor(DOMString url, optional EventSourceInit eventSourceInitDict)]
interface EventSource : EventTarget {
  readonly attribute DOMString url;
  readonly attribute boolean withCredentials;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSED = 2;
  readonly attribute unsigned short readyState;

  // networking
  [TreatNonCallableAsNull] attribute Function? onopen;
  [TreatNonCallableAsNull] attribute Function? onmessage;
  [TreatNonCallableAsNull] attribute Function? onerror;
  void close();
};

dictionary EventSourceInit {
  boolean withCredentials = false;
};

Streams must be decoded as UTF-8

If the line is empty (a blank line)

Dispatch the event, as defined below.

If the line starts with a U+003A COLON character (:)

Ignore the line.

If the line contains a U+003A COLON character (:)

Collect the characters on the line before the first U+003A COLON character (:), and let field be that string.

Collect the characters on the line after the first U+003A COLON character (:), and let value be that string. If value starts with a U+0020 SPACE character, remove it from value.

Process the field using the steps described below, using field as the field name and value as the field value.

Otherwise, the string is not empty but does not contain a U+003A COLON character (:)

Process the field using the steps described below, using the whole line as the field name, and the empty string as the field value.

Once the end of the file is reached, any pending data must be discarded. (If the file ends in the middle of an event, before the final empty line, the incomplete event is not dispatched.)

The steps to process the field given a field name and a field value depend on the field name, as given in the following list. Field names must be compared literally, with no case folding performed.

If the field name is "event"

Set the event name buffer to field value.

If the field name is "data"

Append the field value to the data buffer, then append a single U+000A LINE FEED (LF) character to the data buffer.

If the field name is "id"

Set the last event ID buffer to the field value.

If the field name is "retry"

If the field value consists of only characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then interpret the field value as an integer in base ten, and set the event stream's reconnection time to that integer. Otherwise, ignore the field.

Otherwise

The field is ignored.

[event stream 구조]
- wakeup 이라는 이벤트가 발생하도록 메시지를 전달 합니다.

이 넘은 불행하게도 아직 고려중인 듯 합니다. 

http://jjeong.tistory.com/476

<?php

header('Content-type: text/event-stream');

header('Content-Transfer-Encoding: UTF-8');

header('Connection: keep-alive');

$file = $_GET['f'];

echo file_get_contents($file);

file_put_contents($file, '', LOCK_EX);

flush();

?>

<?php

$sender = $_GET['sender'];

$receiver = $_GET['receiver'];

$message = $_GET['message'];

$sendMessage = "\n\n" . 'id: ' . time() . "\n\n" . 'data: {sender:"' . $sender . '", receiver:"' . $receiver . '", message:"' . $message . '}' . "\n\n";

file_put_contents($receiver . '.txt', $sendMessage, FILE_APPEND|LOCK_EX);

?>

http://dev.w3.org/html5/eventsource/
http://html5doctor.com/server-sent-events/
http://www.html5rocks.com/en/tutorials/eventsource/basics/#toc-server-code

[chat.html]
- 대화 상대를 선택하게 되면 열리는 채팅창입니다.

[status.html]
- EventSource 에서 이벤트를 받을 서버 URL 입니다.

[messages.html]
- XHR 을 이용해서 메시지를 전송할 서버 URL 입니다.
- 이넘이 입력한 메시지를 받아서 기록하게 됩니다. 

var messageVO = {

sender:'jjeong',

receiver:'henry',

message:''

}

var eventSource = new EventSource('http://localhost/status.html?f=jjeong.txt');

<?php

header('Content-type: text/event-stream');

header('Content-Transfer-Encoding: UTF-8');

header('Connection: keep-alive');

$file = $_GET['f'];
 

echo file_get_contents($file);

flush();

?>

<?php

$sender = $_GET['sender'];

$receiver = $_GET['receiver'];

$message = $_GET['message'];

$sendMessage = "\n\n" . 'id: ' . time() . "\n\n" . 'data: {sender:"' . $sender . '", receiver:"' . $receiver . '", message:"' . $message . '}' . "\n\n";

file_put_contents($receiver . '.txt', $sendMessage, LOCK_EX);

?>

the Notification interface

interface Notification : EventTarget {

  void               show();
  void               cancel();
           attribute Function   onclick;
           attribute Function   onshow;
           attribute Function   onerror;
           attribute Function   onclose;
  void               setReplaceId(in DOMString replaceId);
           attribute DOMString  dir;
};

Constructing a notification

  Notification Notification(in DOMString iconUrl, in DOMString title, in DOMString body);

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Notification</title>

<script type="text/javascript">

/*

[Notification Interface]

the Notification interface

interface Notification : EventTarget {

  void               show();

  void               cancel();

           attribute Function   onclick;

           attribute Function   onshow;

           attribute Function   onerror;

           attribute Function   onclose;

  void               setReplaceId(in DOMString replaceId);

           attribute DOMString  dir;

};

[Constructor]

Constructing a notification

  Notification Notification(in DOMString iconUrl, in DOMString title, in DOMString body);

*/

var noti;

/*

json

opt

resource

이미지 나 Content 가능

title

text 등록 가능 하며, HTML 코드 사용 안됨

content

text 등록 가능 하며, HTML 코드 사용 안됨

ondisplay

ondisplay function 등록

onclose

ondisplay function 등록
        .. 추가적인 이벤트 등록을 하고 싶다면 등록해서 사용하면 됩니다.

ex) {opt:'default', resource:'http://.....', title:'제목', content:'내용'}

*/

function createInstanceOfNotification(json) {

if ( window.webkitNotifications.checkPermission() == 0 ) {

switch ( json.opt ) {

case 'default' :

noti = window.webkitNotifications.createNotification(json.resource, json.title, json.content);

break;

case 'html' :

noti = window.webkitNotifications.createHTMLNotification(json.resource);

break;

}

noti.ondisplay = json.ondisplay;

noti.onclose = json.onclose;

noti.show();

} else {

window.webkitNotifications.requestPermission();

}

}

function eventNotificationOnDisplay () {

console.log('ondisplay catch');

for ( var i in arguments ) {

console.log ( i + ' : ' + arguments[i]);

}

}

function eventNotificationOnClose () {

console.log('onclose catch');

}

</script>

</head>

<body style='margin:0px; padding:0px;' topmargin='0px'  leftmargin='0px' marginheight='0px' marginwidth='0px'>

<button onclick='createInstanceOfNotification({opt:"default",resource:"banner1.png",title:"제목을 보여주세요.",content:"내용을 보여주세요.",ondisplay:eventNotificationOnDisplay,onclose:eventNotificationOnClose});'>window.webkitNotifications.createNotification - JSON</button><br>

<button onclick='createInstanceOfNotification({opt:"html",resource:"http://m.naver.com",ondisplay:eventNotificationOnDisplay,onclose:eventNotificationOnClose});'>window.webkitNotifications.createHTMLNotification - JSON</button><br>

</body>

</html>

JSONP 의 기초개념은 
JSON String + CallBack 함수의 결합만 이해 하면 될 것 같습니다.
Request API 하나에 callback 함수를 지정해서 이걸 <script> 태그에 삽입하여 body 에서 callback 함수를 실행 하도록 하면 끝....

function jsonReceiver(json) {

    var size = json.length;

    for ( var i=0; i<size; i++ ) {

        console.log(json[i].source + ', ' + json[i].text + ', ' + json[i].user.screen_name);

        createInstanceOfNotification({opt:"default",resource:"",title:"",content:json[i].text});

    }

}

function createScript() {

    var scripts = document.createElement('script');

    scripts.src = 'http://twitter.com/statuses/user_timeline/sophistlv.json?count=4&callback=jsonReceiver';

    document.body.appendChild(scripts);

}
============================================================================================== 

<button onclick='createScript();'>Create Scripts JSONP</button>

http://192.168.1.1/siteA.html

0. siteB 를 allow 할 allowOrigin 정의를 합니다.
var allowOrigin = "http://192.168.2.1";

1. siteB 에서 전송한 postMessage 이벤트를 catch 하기 위해서 event 등록을 합니다.
window.addEventListener("message", postMessageController, true); 또는
window.attachEvent("onmesage", postMessageController);

2. siteB 의 postMessage 이벤트를 catch 해서 실행 시킬 postMessageController 함수 작성을 합니다.
function postMessageController(e) {
    if ( e.origin === allowOrigin ) {
        // 실행 시킬 코드를 작성 하세요.
        alert(e.data); // e.data 는 siteB 에서 전달 받은 message 입니다.
    }
}

<html>

<head>

<title>siteA.html</title>

</head>

<body style="background:#000000;">

<iframe name="siteB" id="siteB" src="http://192.168.2.1/siteB.html" border="0" frameborder="0" width="320" height="48" scrolling="no"></iframe>

</body>

</html>

<html>

<head>

<script>

function successCallback(position) {

alert(position.coords.latitude + " : " + position.coords.longitude);

}

function errorCallback(error) {

alert(error.message);

}

function load(){ 

if ( navigator.geolocation ) {

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

} else {

alert("geolocation not supported");

}

}

</script>

</head>

<body onload="load()">

</body>

</html>