Successfully reported this slideshow.

实时Web的前世今生未来

1,369 views

Published on

实时Web应用是未来互联网发展的一个趋势,HTML5拥有许多引人注目的新特性,其中WebSocket技术使“畅通的实时互联网”成为可能。本次分享主要会通过一些简单例子来介绍WebSocket的原理,以及它给实时Web开发带来的革命性的创新。

Html5分享 @Html5梦工厂-深圳 2012.7.14

  • Be the first to comment

实时Web的前世今生未来

  1. 1. 实时Web的前世 . 今生 . 未来 ——WebSocket学习使用经验分享 张津华(Rolf)
  2. 2. About Me张津华Blog: http://rolfzhang.com/明天才入职的刚毕业小毛孩腾讯,前端开发攻城狮爱生活,爱旅游也爱H5 CodeJam的 各种创意窘态睡姿~(∩_∩)~
  3. 3. Contents = [ ‘坎坷历史’, /* 目 录*/ ‘Comet技术’, ‘WebSocket !!!’, ‘经验分享’]
  4. 4. • 实时 Web 即 实时数据通信 的 Web应用• 如: 在线游戏、即时通信、 设备监控、在线证券……
  5. 5. 0 => 坎坷历史 让我们穿越到十年前……
  6. 6. CCTV《对话 韩寒》 2000年
  7. 7. CCTV《对话 韩寒》 2000年
  8. 8. CCTV《对话 韩寒》 2000年
  9. 9. 十年前的聊天室 定时刷新的每次提交 iframe都要刷新 的表单
  10. 10. 那个年代的Web 数据更新 依赖于 页面跳转
  11. 11. AJAX 出现了!《Ajax: A New Approach to Web Applications》 - by Jesse James Garrett, Feb 18, 2005 • Asynchronous • Javascript • And • XML
  12. 12. 但,Ajax不是银弹 没 更新了吗 只能客户端定时请求数 更新 据,无法及时得知服务 端的数据更新 更新了吗早更新了
  13. 13. 1 => Comet技术 第一次拥有了真正的武器
  14. 14. • Comet技术?神马? 也叫“服务器推”“长轮询”“反向AJAX” 基于HTTP长连接实现服务端向浏览器推送数据 HTTP1.1增加了持久连接支持 Connection: keep-alive
  15. 15. Comet的模型服务器 更新了告诉我 浏览器 更新 有更新了 更新了告诉我
  16. 16. Comet的浏览器端实现一个递归的Ajax请求
  17. 17. Comet的服务器端实现 Node.JS实现
  18. 18. Comet的服务器端实现 php实现
  19. 19. Comet的特点• 减少了冗余的请求,延时短• 服务器定时返回数据,本质还是轮询• 更新频繁时,效率没有明显提高• 服务端无法及时得知长链接断开
  20. 20. 2 => WebSocket !!! 神兵利器,真正的实时Web
  21. 21. WebSocket 的拯救• 目的就是要取代轮询和Comet技术• 一次HTTP握手,即可实现真正的双向通信• 基于 TCP 协议,减少冗余的http header (尤其是cookie内容)
  22. 22. WebSocket的模型 好嘞 咱们建立连接吧 有更新喔 更新 浏览器 收到服务器 哦 发个消息给你
  23. 23. 网络负载对比 WebSocket vs Polling 7000000 6000000 5000000Bytes/sec 4000000 3000000 2000000 1000000 0 1000 10000 100000 clients clients clients Polling 64000 640000 6400000 WebSocket 16000 160000 1600000
  24. 24. WebSocket API http://dev.w3.org/html5/websockets/
  25. 25. WebSocket API• var socket = new WebSocket(url);• readyState: 当前连接状态 (readOnly) 可能的值 = { CONNECTING : 0, OPEN : 1, CLOSING : 2, CLOSED : 3 }
  26. 26. WebSocket API• Event handler: 事件监听方法 Event handler Event handler event type WebSocket.onopen open WebSocket.onmessage message WebSocket.onerror error WebSocket.onclose close
  27. 27. WebSocket API• WebSocket.send(String) //发送消息 (注意:参数是字符串)• WebSocket.close() //关闭连接• bufferedAmount: 缓冲区的数据量(readOnly)
  28. 28. WebSocket 浏览器例子
  29. 29. 服务器端呢?• Java、PHP、Ruby、Python都有相应的 实现• 这里选择的是Node.js
  30. 30. Node.js的选择• node-websocket-server : 大部分教程都是用这 个库,但支持的协议out了• webSocket-Node : 对Windows支持不好• socket.io : 目前最强大的• ws : socket.io的依赖库,基本实现了W3C草案 的中规范 (用起来和浏览器端的一样,简单可依赖)
  31. 31. 3 => 经验分享 • Session的获取 • 性能调优 • MOVE模式
  32. 32. Session的获取• 由于WebSocket通信基于TCP协议,因此 无法直接得到Session信息• 获取方式要从Session的原理讲起……
  33. 33. Session的获取• Session的会话信息存储在服务器端,通过 request header中cookie带的sessionID 来识别对应的Session• WebSocket的建立要经过HTTP握手,可通 过updateGradeRequest取得Session
  34. 34. Session的获取• 关键步骤: – 解读HTTP Request报头信息 – 解析加密的Cookie信息 – 获得SessionStore,并从中取出Session
  35. 35. 控制发送频率• 使用bufferedAmount来控制发送频率, 避免阻塞Socket
  36. 36. 事件节流• 我们经常会遇到一个事件在短时间内被触 发很多次的情况, 例如onmousemove、onresize……• 大部分时候并不需要调用这么多次,可以 让方法调用一次之后,隔一段时间才能被 继续调用
  37. 37. 事件节流的实现(一)
  38. 38. 事件节流的实现(二)
  39. 39. 事件节流 的实现 (三)真正的事件节流
  40. 40. 实时Web中,MVC已死 Views • MVC的逻辑基于传统的 Request/Response通信方式 • Model变化无法及时反应到Controllers View,阻碍了双向的通信 • Controller之间也难以互相传 Models 递信息
  41. 41. MOVE模式 • Models • Operations • Views • Events (此部分直接看代码吧) http://cirw.in/blog/time-to-move-on
  42. 42. Thank You 实时Web的 前世 . 今生 . 未来演示代码: https://github.com/rolfzhang/Rolf_Chat_Room

×