Jason
Server-Sent Events Automatically reconnects Resumes reuses connections to thesame URL Avoids blocking other HTTP traffic
Browser Support Server-Sent Events are supported in allmajor browsers. except InternetExplorer.
ConceptServerEventSourceClient2.Pushdata(text/stream)1.定期重試GETRequest3.資料送達時,觸發onmessage事件DB
Receive Server-Sent Event NotificationsClientvar source = new EventSource("GetDateTime");source.onmessage = function (e){$...
Server Push Data Content-Type:text/event-stream Text Encoding is UTF-8 Always start with “data:“ Each line should end ...
Receive Server-Sent Event NotificationsServer :public ActionResult GetDateTime(){string notification = "data:messagenn",re...
Server Push Data Example1:這是註解行data:Event1 的資料:這是註解行data:Event2 的資料data:是由兩行構成
Server Push Data Example1StringBuilder notification = new StringBuilder();notification.Append(": 這是註解行n");notification.Ap...
Question1 source.onmessage = function (e) {var messageArray = TODO$(".update-area").text(messageArray[0]);};
Server Push Data Associating an ID with an event Example2id:evnet1data:event1 資料id:event2data:event2 資料The message event...
Server Push Data Controlling the reonnection-timeout Example3retry:10000data:hello world
Server Push Data Spectifying an event name Example4event: userlogondata: logon successevent: updatedata: update success
Server Push Datasource.addEventListener(userlogon,function(e) {console.log(e.data);}, false);source.addEventListener(updat...
Question2 How do you send Json data?Server:data: TODOClient:source.addEventListener(message, function(e){var data = TODOc...
Reference http://www.w3schools.com/html/html5_serversentevents.asp w3schools http://www.html5rocks.com/en/tutorials/even...
EventXXXX.Js$("form").keydown(function(e){if (window.event.KeyCode == 13) {$("form").submit();}});
Upcoming SlideShare
Loading in...5
×

Sse

92

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
92
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sse

  1. 1. Jason
  2. 2. Server-Sent Events Automatically reconnects Resumes reuses connections to thesame URL Avoids blocking other HTTP traffic
  3. 3. Browser Support Server-Sent Events are supported in allmajor browsers. except InternetExplorer.
  4. 4. ConceptServerEventSourceClient2.Pushdata(text/stream)1.定期重試GETRequest3.資料送達時,觸發onmessage事件DB
  5. 5. Receive Server-Sent Event NotificationsClientvar source = new EventSource("GetDateTime");source.onmessage = function (e){$(".update-area").text(e.data);};
  6. 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" (exceptfor the last, which should end with two).
  7. 7. Receive Server-Sent Event NotificationsServer :public ActionResult GetDateTime(){string notification = "data:messagenn",return Content(notification, "text/event-stream");}
  8. 8. Server Push Data Example1:這是註解行data:Event1 的資料:這是註解行data:Event2 的資料data:是由兩行構成
  9. 9. Server Push Data Example1StringBuilder notification = new StringBuilder();notification.Append(": 這是註解行n");notification.Append("data : Event1 的資料nn");notification.Append(": 這是註解行n");notification.Append("data : Event2 的資料n");notification.Append("data: 是由兩行構成nn");
  10. 10. Question1 source.onmessage = function (e) {var messageArray = TODO$(".update-area").text(messageArray[0]);};
  11. 11. Server Push Data Associating an ID with an event Example2id:evnet1data:event1 資料id:event2data:event2 資料The message event contains a e.lastEventId property.
  12. 12. Server Push Data Controlling the reonnection-timeout Example3retry:10000data:hello world
  13. 13. Server Push Data Spectifying an event name Example4event: userlogondata: logon successevent: updatedata: update success
  14. 14. Server Push Datasource.addEventListener(userlogon,function(e) {console.log(e.data);}, false);source.addEventListener(update,function(e) {console.log(e.data);}, false);
  15. 15. Question2 How do you send Json data?Server:data: TODOClient:source.addEventListener(message, function(e){var data = TODOconsole.log(data.id, data.msg);}, false);
  16. 16. Reference http://www.w3schools.com/html/html5_serversentevents.asp w3schools http://www.html5rocks.com/en/tutorials/eventsource/basics/ HTML5 ROCKS
  17. 17. EventXXXX.Js$("form").keydown(function(e){if (window.event.KeyCode == 13) {$("form").submit();}});
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×