实时奥别产的前世今生未来
?Download as PPTX, PDF?
2 likes?1,140 views
实时Web应用是未来互联网发展的一个趋势，HTML5拥有许多引人注目的新特性，其中WebSocket技术使“畅通的实时互联网”成为可能。本次分享主要会通过一些简单例子来介绍WebSocket的原理，以及它给实时Web开发带来的革命性的创新。 Html5分享 @Html5梦工厂-深圳 2012.7.14
![Contents = [ ‘坎坷历史’,
/* 目 录*/ ‘Comet技术’,
‘WebSocket !!!’,
‘经验分享’]](https://image.slidesharecdn.com/web-120725211207-phpapp01/85/Web-3-320.jpg)
实时奥别产的前世今生未来
- 1. 实时Web的 前世 . 今生 . 未来 ——WebSocket学习使用经验分享 张津华（Rolf）
- 2. About Me 张津华 Blog: http://rolfzhang.com/ 明天才入职的刚毕业小毛孩 腾讯，前端开发攻城狮 爱生活，爱旅游 也爱H5 CodeJam的 各种创意窘态睡姿~(∩_∩)~
- 3. Contents = [ ‘坎坷历史’, /* 目 录*/ ‘Comet技术’, ‘WebSocket !!!’, ‘经验分享’]
- 4. ? 实时 Web 即 实时数据通信 的 Web应用 ? 如： 在线游戏、即时通信、 设备监控、在线证券……
- 5. 0 => 坎坷历史 让我们穿越到十年前……
- 9. 十年前的聊天室 定时刷新的 每次提交 iframe 都要刷新 的表单
- 10. 那个年代的奥别产 数据更新 依赖于 页面跳转
- 11. AJAX 出现了! 《Ajax: A New Approach to Web Applications》 - by Jesse James Garrett, Feb 18, 2005 ? Asynchronous ? Javascript ? And ? XML
- 12. 但，Ajax不是银弹 没 更新了吗 只能客户端定时请求数 更新 据，无法及时得知服务 端的数据更新 更新了吗 早更新了
- 13. 1 => Comet技术 第一次拥有了真正的武器
- 14. ? Comet技术？神马？ 也叫“服务器推”“长轮询”“反向AJAX” 基于HTTP长连接实现服务端向浏览器推送数据 HTTP1.1增加了持久连接支持 Connection: keep-alive
- 15. Comet的模型 服务器 更新了告诉我 浏览器 更新 有更新了 更新了告诉我
- 17. 颁辞尘别迟的服务器端实现 狈辞诲别.闯厂实现
- 18. 颁辞尘别迟的服务器端实现 辫丑辫实现
- 19. Comet的特点 ? 减少了冗余的请求，延时短 ? 服务器定时返回数据，本质还是轮询 ? 更新频繁时，效率没有明显提高 ? 服务端无法及时得知长链接断开
- 20. 2 => WebSocket !!! 神兵利器，真正的实时Web
- 21. WebSocket 的拯救 ? 目的就是要取代轮询和Comet技术 ? 一次HTTP握手，即可实现真正的双向通信 ? 基于 TCP 协议，减少冗余的http header (尤其是cookie内容)
- 22. 奥别产厂辞肠办别迟的模型 好嘞 咱们建立连接吧 有更新喔 更新 浏览器 收到 服务器 哦 发个消息给你
- 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
- 24. WebSocket API http://dev.w3.org/html5/websockets/
- 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
- 27. WebSocket API ? WebSocket.send(String) //发送消息 (注意：参数是字符串) ? WebSocket.close() //关闭连接 ? bufferedAmount: 缓冲区的数据量(readOnly)
- 28. WebSocket 浏览器例子
- 29. 服务器端呢？ ? Java、PHP、Ruby、Python都有相应的 实现 ? 这里选择的是Node.js
- 30. Node.js的选择 ? node-websocket-server : 大部分教程都是用这 个库，但支持的协议out了 ? webSocket-Node : 对Windows支持不好 ? socket.io : 目前最强大的 ? ws : socket.io的依赖库，基本实现了W3C草案 的中规范 (用起来和浏览器端的一样，简单可依赖)
- 31. 3 => 经验分享 ? Session的获取 ? 性能调优 ? 惭翱痴贰模式
- 32. Session的获取 ? 由于WebSocket通信基于TCP协议，因此 无法直接得到Session信息 ? 获取方式要从Session的原理讲起……
- 33. Session的获取 ? Session的会话信息存储在服务器端，通过 request header中cookie带的sessionID 来识别对应的Session ? WebSocket的建立要经过HTTP握手，可通 过updateGradeRequest取得Session
- 34. Session的获取 ? 关键步骤： – 解读HTTP Request报头信息 – 解析加密的Cookie信息 – 获得SessionStore，并从中取出Session
- 35. 控制发送频率 ? 使用bufferedAmount来控制发送频率， 避免阻塞厂辞肠办别迟
- 36. 事件节流 ? 我们经常会遇到一个事件在短时间内被触 发很多次的情况， 例如onmousemove、onresize…… ? 大部分时候并不需要调用这么多次，可以 让方法调用一次之后，隔一段时间才能被 继续调用
- 37. 事件节流的实现（一）
- 38. 事件节流的实现（二）
- 40. 实时Web中，MVC已死 Views ? MVC的逻辑基于传统的 Request/Response通信方式 ? Model变化无法及时反应到 Controllers View，阻碍了双向的通信 ? Controller之间也难以互相传 Models 递信息
- 41. 惭翱痴贰模式 ? Models ? Operations ? Views ? Events (此部分直接看代码吧) http://cirw.in/blog/time-to-move-on
- 42. Thank You 实时Web的 前世 . 今生 . 未来 演示代码: https://github.com/rolfzhang/Rolf_Chat_Room