websocket 实时推特流

20
WebSocket 实实实实实 [email protected]

Upload: shaokun

Post on 10-May-2015

2.104 views

Category:

Documents


5 download

DESCRIPTION

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

TRANSCRIPT

Page 1: WebSocket 实时推特流

WebSocket实时推特流

[email protected]

Page 2: WebSocket 实时推特流

需要了解的概念• HTML 5 WebSocket

• EventMachine (EM)

• HTTP Stream

Page 3: WebSocket 实时推特流

BrowserHTML 5 WebSocket

EM::WebSocket

EM::Channel

EM::HttpRequest Twitter Stream

BrowserHTML 5 WebSocket

BrowserHTML 5 WebSocket

EM::WebSocket EM::WebSocket

Publish

Subscribe

TCP Channel

Page 4: WebSocket 实时推特流

HTML 5 WebSocket

Page 5: WebSocket 实时推特流

• 通过 Web 的 Socket

• 全双工的通讯通道• 双向通讯• 更小的延迟,实时的

Page 6: WebSocket 实时推特流

<script type="text/javascript">

// 创建 WebSocket 对象很容易 ws = new WebSocket("ws://localhost:8080/");

</script>

Page 7: WebSocket 实时推特流
Page 8: WebSocket 实时推特流

ws.onopen = function() {...};

ws.onclose = function() {...};

ws.onerror = function(event) {...};

ws.onmessage = function(event) {...};

Page 9: WebSocket 实时推特流

ws.send(msg);

ws.close();

Page 10: WebSocket 实时推特流

支持的 Browsers

• Chrome

• Safari 4.x

• Firefox 3.7

• IE ???github.com/gimite/web-socket-js

Page 11: WebSocket 实时推特流

EventMachine

simple, fast, event-driven I/O library for Ruby

Page 12: WebSocket 实时推特流

EM::WebSocket

Page 13: WebSocket 实时推特流

EM::WebSocket.start(:host => "localhost", :port => 8080) do |ws|

ws.onopen do … end

ws.onclose do … endend

Page 14: WebSocket 实时推特流

Publish/Subscribe

EM::Channel

Page 15: WebSocket 实时推特流

channel = EM::Channel.new

channel << "a new message"

sid = channel.subscribe do |msg|

puts msg # should output ‘a new message’

end

Page 16: WebSocket 实时推特流

HTTP Stream

Page 17: WebSocket 实时推特流

Twitter Stream API

• http://stream.twitter.com/1/statuses/sample.json

• http://stream.twitter.com/1/statuses/filter.json?track=???

Page 18: WebSocket 实时推特流

url = 'http://stream.twitter.com/1/statuses/sample.json'buffer = ""

http.stream do |chunk| buffer += chunk while line = buffer.slice!(/.+\r?\n/) tweet = JSON.parse(line) next unless tweet['text'] msg = "#{tweet['user']['screen_name']}: #{tweet['text']}" channel << msg endend

Page 19: WebSocket 实时推特流

BrowserHTML 5 WebSocket

EM::WebSocket

EM::Channel

EM::HttpRequest Twitter Stream

BrowserHTML 5 WebSocket

BrowserHTML 5 WebSocket

EM::WebSocket EM::WebSocket

Publish

Subscribe

TCP Channel

Page 20: WebSocket 实时推特流

问答??? QA

[email protected]