1. Jason

2. Server-Sent Events
 Automatically reconnects
 Resumes reuses connections to the
same URL
 Avoids blocking other HTTP traffic

3. Browser Support
 Server-Sent Events are supported in all
major browsers. except Internet
Explorer.

4. Concept
Server
EventSource
Client
2.Push
data(text/stream)
1.定期重試GET
Request
3.資料送達時，觸發
onmessage事件
DB

5. Receive Server-Sent Event Notifications
Client
var source = new EventSource("GetDateTime");
source.onmessage = function (e)
{
$(".update-area").text(e.data);
};

6. Server Push Data
 Content-Type：text/event-stream
 Text Encoding is UTF-8
 Always start with “data：“
 Each line should end in a single "n" (except
for the last, which should end with two).

7. Receive Server-Sent Event Notifications
Server ：
public ActionResult GetDateTime()
{
string notification = "data:messagenn",
return Content(notification, "text/event-stream");
}

8. Server Push Data
 Example1
：這是註解行
data：Event1 的資料
：這是註解行
data：Event2 的資料
data：是由兩行構成

9. Server Push Data
 Example1
StringBuilder notification = new StringBuilder();
notification.Append(": 這是註解行n");
notification.Append("data : Event1 的資料nn");
notification.Append(": 這是註解行n");
notification.Append("data : Event2 的資料n");
notification.Append("data: 是由兩行構成nn");

10. Question1
 source.onmessage = function (e) {
var messageArray = TODO
$(".update-area").text(messageArray[0]);
};

11. Server Push Data
 Associating an ID with an event
 Example2
id：evnet1
data：event1 資料
id：event2
data：event2 資料
The message event contains a e.lastEventId property.

12. Server Push Data
 Controlling the reonnection-timeout
 Example3
retry：10000
data：hello world

13. Server Push Data
 Spectifying an event name
 Example4
event: userlogon
data: logon success
event: update
data: update success

14. Server Push Data
source.addEventListener('userlogon',
function(e) {
console.log(e.data);
}, false);
source.addEventListener('update',
function(e) {
console.log(e.data);
}, false);

15. Question2
 How do you send Json data?
Server：
data: TODO
Client：
source.addEventListener('message', function(e){
var data = TODO
console.log(data.id, data.msg);
}, false);

16. Reference
 http://www.w3schools.com/html/html5_s
erversentevents.asp w3schools
 http://www.html5rocks.com/en/tutorials/e
ventsource/basics/ HTML5 ROCKS

17. Event
XXXX.Js
$("form").keydown(function(e){
if (window.event.KeyCode == 13) {
$("form").submit();
}
});