Weitere ähnliche Inhalte
Ähnlich wie 实时Web的前世今生未来 (20)
实时Web的前世今生未来
- 3. Contents = [ ‘坎坷历史’,
/* 目 录*/ ‘Comet技术’,
‘WebSocket !!!’,
‘经验分享’]
- 4. • 实时 Web
即 实时数据通信 的 Web应用
• 如: 在线游戏、即时通信、
设备监控、在线证券……
- 9. 十年前的聊天室
定时刷新的
每次提交
iframe
都要刷新
的表单
- 11. AJAX 出现了!
《Ajax: A New Approach to Web Applications》
- by Jesse James Garrett, Feb 18, 2005
• Asynchronous
• Javascript
• And
• XML
- 12. 但,Ajax不是银弹
没 更新了吗
只能客户端定时请求数
更新 据,无法及时得知服务
端的数据更新
更新了吗
早更新了
- 19. Comet的特点
• 减少了冗余的请求,延时短
• 服务器定时返回数据,本质还是轮询
• 更新频繁时,效率没有明显提高
• 服务端无法及时得知长链接断开
- 23. 网络负载对比
WebSocket vs Polling
7000000
6000000
5000000
Bytes/sec
4000000
3000000
2000000
1000000
0
1000 10000 100000
clients clients clients
Polling 64000 640000 6400000
WebSocket 16000 160000 1600000
- 25. WebSocket API
• var socket = new WebSocket(url);
• readyState: 当前连接状态 (readOnly)
可能的值 = { CONNECTING : 0,
OPEN : 1,
CLOSING : 2,
CLOSED : 3 }
- 26. WebSocket API
• Event handler: 事件监听方法
Event handler Event handler event type
WebSocket.onopen open
WebSocket.onmessage message
WebSocket.onerror error
WebSocket.onclose close
- 40. 实时Web中,MVC已死
Views • MVC的逻辑基于传统的
Request/Response通信方式
• Model变化无法及时反应到
Controllers
View,阻碍了双向的通信
• Controller之间也难以互相传
Models
递信息
- 41. MOVE模式
• Models
• Operations
• Views
• Events
(此部分直接看代码吧)
http://cirw.in/blog/time-to-move-on
- 42. Thank You
实时Web的
前世 . 今生 . 未来
演示代码: https://github.com/rolfzhang/Rolf_Chat_Room