Your SlideShare is downloading. ×
Sse
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Sse

77
views

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
77
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Jason
  • 2. Server-Sent Events Automatically reconnects Resumes reuses connections to thesame URL Avoids blocking other HTTP traffic
  • 3. Browser Support Server-Sent Events are supported in allmajor browsers. except InternetExplorer.
  • 4. ConceptServerEventSourceClient2.Pushdata(text/stream)1.定期重試GETRequest3.資料送達時,觸發onmessage事件DB
  • 5. Receive Server-Sent Event NotificationsClientvar 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" (exceptfor the last, which should end with two).
  • 7. Receive Server-Sent Event NotificationsServer :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 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. Question1 source.onmessage = function (e) {var messageArray = TODO$(".update-area").text(messageArray[0]);};
  • 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. Server Push Data Controlling the reonnection-timeout Example3retry:10000data:hello world
  • 13. Server Push Data Spectifying an event name Example4event: userlogondata: logon successevent: updatedata: update success
  • 14. Server Push Datasource.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: TODOClient:source.addEventListener(message, function(e){var data = TODOconsole.log(data.id, data.msg);}, false);
  • 16. Reference http://www.w3schools.com/html/html5_serversentevents.asp w3schools http://www.html5rocks.com/en/tutorials/eventsource/basics/ HTML5 ROCKS
  • 17. EventXXXX.Js$("form").keydown(function(e){if (window.event.KeyCode == 13) {$("form").submit();}});