WebSocket 实时推特流 [email_address]
需要了解的概念 <ul><li>HTML 5 WebSocket </li></ul><ul><li>EventMachine (EM) </li></ul><ul><li>HTTP Stream </li></ul>
Browser HTML 5 WebSocket EM::WebSocket EM::Channel EM::HttpRequest Twitter Stream Browser HTML 5 WebSocket Browser HTML 5 ...
HTML 5 WebSocket
<ul><li>通过  Web  的  Socket </li></ul><ul><li>全双工的通讯通道 </li></ul><ul><li>双向通讯 </li></ul><ul><li>更小的延迟,实时的 </li></ul>
<ul><li>< script   type = &quot;text/javascript&quot; > </li></ul><ul><li>//  创建  WebSocket  对象很容易 </li></ul><ul><li>ws  =...
 
ws . onopen =   function () {...}; ws . onclose =   function () {...}; ws . onerror =   function (event) {...}; ws . onmes...
ws . send (msg); ws . close ();
支持的  Browsers <ul><li>Chrome </li></ul><ul><li>Safari 4.x </li></ul><ul><li>Firefox 3.7 </li></ul><ul><li>IE ??? github.co...
EventMachine simple, fast, event-driven I/O library for Ruby
EM::WebSocket
<ul><li>EM :: WebSocket .start( :host  =>  &quot;localhost&quot; ,  :port  => 8080)  do  | ws | </li></ul><ul><li>ws.onope...
Publish/Subscribe EM::Channel
<ul><li>channel =  EM :: Channel . new </li></ul><ul><li>channel  <<   &quot;a new message&quot; </li></ul><ul><li>sid   =...
HTTP Stream
Twitter Stream API <ul><li>http://stream.twitter.com/1/statuses/sample.json </li></ul><ul><li>http://stream.twitter.com/1/...
<ul><li>url  =   'http://stream.twitter.com/1/statuses/sample.json' </li></ul><ul><li>buffer  =   &quot;&quot; </li></ul><...
Browser HTML 5 WebSocket EM::WebSocket EM::Channel EM::HttpRequest Twitter Stream Browser HTML 5 WebSocket Browser HTML 5 ...
问答 ??? QA [email_address]
Upcoming SlideShare
Loading in...5
×

WebSocket 实时推特流

2,115

Published on

Example Code:
http://github.com/shaokun/twlive

1 Comment
1 Like
Statistics
Notes
  • the example code is here:
    http://github.com/shaokun/twlive
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,115
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

WebSocket 实时推特流

  1. 1. WebSocket 实时推特流 [email_address]
  2. 2. 需要了解的概念 <ul><li>HTML 5 WebSocket </li></ul><ul><li>EventMachine (EM) </li></ul><ul><li>HTTP Stream </li></ul>
  3. 3. Browser HTML 5 WebSocket EM::WebSocket EM::Channel EM::HttpRequest Twitter Stream Browser HTML 5 WebSocket Browser HTML 5 WebSocket EM::WebSocket EM::WebSocket Publish Subscribe TCP Channel
  4. 4. HTML 5 WebSocket
  5. 5. <ul><li>通过 Web 的 Socket </li></ul><ul><li>全双工的通讯通道 </li></ul><ul><li>双向通讯 </li></ul><ul><li>更小的延迟,实时的 </li></ul>
  6. 6. <ul><li>< script type = &quot;text/javascript&quot; > </li></ul><ul><li>// 创建 WebSocket 对象很容易 </li></ul><ul><li>ws = new WebSocket ( &quot;ws://localhost:8080/&quot; ); </li></ul><ul><li></ script > </li></ul>
  7. 8. ws . onopen = function () {...}; ws . onclose = function () {...}; ws . onerror = function (event) {...}; ws . onmessage = function (event) {...};
  8. 9. ws . send (msg); ws . close ();
  9. 10. 支持的 Browsers <ul><li>Chrome </li></ul><ul><li>Safari 4.x </li></ul><ul><li>Firefox 3.7 </li></ul><ul><li>IE ??? github.com/gimite/web-socket-js </li></ul>
  10. 11. EventMachine simple, fast, event-driven I/O library for Ruby
  11. 12. EM::WebSocket
  12. 13. <ul><li>EM :: WebSocket .start( :host => &quot;localhost&quot; , :port => 8080) do | ws | </li></ul><ul><li>ws.onopen do </li></ul><ul><li>… </li></ul><ul><li>end </li></ul><ul><li>ws.onclose do </li></ul><ul><li>… </li></ul><ul><li>end </li></ul><ul><li>end </li></ul>
  13. 14. Publish/Subscribe EM::Channel
  14. 15. <ul><li>channel = EM :: Channel . new </li></ul><ul><li>channel << &quot;a new message&quot; </li></ul><ul><li>sid = channel.subscribe do | msg | </li></ul><ul><li>puts msg # should output ‘a new message’ </li></ul><ul><li>end </li></ul>
  15. 16. HTTP Stream
  16. 17. Twitter Stream API <ul><li>http://stream.twitter.com/1/statuses/sample.json </li></ul><ul><li>http://stream.twitter.com/1/statuses/filter.json?track=??? </li></ul>
  17. 18. <ul><li>url = 'http://stream.twitter.com/1/statuses/sample.json' </li></ul><ul><li>buffer = &quot;&quot; </li></ul><ul><li>http.stream do | chunk | </li></ul><ul><li>buffer += chunk </li></ul><ul><li>while line = buffer.slice!(/.+ ? /) </li></ul><ul><li>tweet = JSON .parse(line) </li></ul><ul><li>next unless tweet[ 'text' ] </li></ul><ul><li>msg = &quot;#{tweet['user']['screen_name']}: #{tweet['text']}&quot; </li></ul><ul><li>channel << msg </li></ul><ul><li>end </li></ul><ul><li>end </li></ul>
  18. 19. Browser HTML 5 WebSocket EM::WebSocket EM::Channel EM::HttpRequest Twitter Stream Browser HTML 5 WebSocket Browser HTML 5 WebSocket EM::WebSocket EM::WebSocket Publish Subscribe TCP Channel
  19. 20. 问答 ??? QA [email_address]
  1. A particular slide catching your eye?

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

×