SlideShare una empresa de Scribd logo
1 de 42
Descargar para leer sin conexión
实时Web的
前世 . 今生 . 未来
 ——WebSocket学习使用经验分享

             张津华(Rolf)
About Me
张津华
Blog: http://rolfzhang.com/


明天才入职的刚毕业小毛孩
腾讯,前端开发攻城狮

爱生活,爱旅游
也爱H5 CodeJam的
    各种创意窘态睡姿~(∩_∩)~
Contents =   [ ‘坎坷历史’,

 /* 目 录*/    ‘Comet技术’,

             ‘WebSocket !!!’,

             ‘经验分享’]
• 实时 Web
    即 实时数据通信 的 Web应用

• 如: 在线游戏、即时通信、
     设备监控、在线证券……
0 => 坎坷历史
       让我们穿越到十年前……
CCTV《对话 韩寒》 2000年
CCTV《对话 韩寒》 2000年
CCTV《对话 韩寒》 2000年
十年前的聊天室




                 定时刷新的
每次提交
                  iframe
都要刷新
 的表单
那个年代的Web



           数据更新
           依赖于
           页面跳转
AJAX 出现了!
《Ajax: A New Approach to Web Applications》
              - by Jesse James Garrett, Feb 18, 2005


                                •   Asynchronous
                                •   Javascript
                                •   And
                                •   XML
但,Ajax不是银弹

  没         更新了吗
                   只能客户端定时请求数
       更新          据,无法及时得知服务
                   端的数据更新


            更新了吗
早更新了
1 => Comet技术
        第一次拥有了真正的武器
• Comet技术?神马?

 也叫“服务器推”“长轮询”“反向AJAX”
 基于HTTP长连接实现服务端向浏览器推送数据



  HTTP1.1增加了持久连接支持
  Connection: keep-alive
Comet的模型

服务器            更新了告诉我



                        浏览器
          更新
  有更新了

               更新了告诉我
Comet的浏览器端实现




一个递归的
Ajax请求
Comet的服务器端实现

           Node.JS实现
Comet的服务器端实现

          php实现
Comet的特点
•   减少了冗余的请求,延时短
•   服务器定时返回数据,本质还是轮询
•   更新频繁时,效率没有明显提高
•   服务端无法及时得知长链接断开
2 => WebSocket !!!
         神兵利器,真正的实时Web
WebSocket 的拯救
• 目的就是要取代轮询和Comet技术
• 一次HTTP握手,即可实现真正的双向通信
• 基于 TCP 协议,减少冗余的http header
  (尤其是cookie内容)
WebSocket的模型
       好嘞         咱们建立连接吧



      有更新喔   更新             浏览器

                  收到

服务器
        哦         发个消息给你
网络负载对比
                       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
WebSocket API




      http://dev.w3.org/html5/websockets/
WebSocket API
• var socket = new WebSocket(url);

• readyState: 当前连接状态 (readOnly)

  可能的值 = { CONNECTING : 0,
           OPEN : 1,
           CLOSING : 2,
           CLOSED : 3 }
WebSocket API
• Event handler: 事件监听方法
    Event handler         Event handler event type
    WebSocket.onopen      open
    WebSocket.onmessage   message
    WebSocket.onerror     error
    WebSocket.onclose     close
WebSocket API
• WebSocket.send(String) //发送消息
                       (注意:参数是字符串)


• WebSocket.close() //关闭连接

• bufferedAmount: 缓冲区的数据量(readOnly)
WebSocket 浏览器例子
服务器端呢?
• Java、PHP、Ruby、Python都有相应的
  实现

• 这里选择的是Node.js
Node.js的选择
• node-websocket-server : 大部分教程都是用这
  个库,但支持的协议out了
• webSocket-Node : 对Windows支持不好
• socket.io : 目前最强大的
• ws : socket.io的依赖库,基本实现了W3C草案
  的中规范 (用起来和浏览器端的一样,简单可依赖)
3 => 经验分享
            • Session的获取
                 • 性能调优
               • MOVE模式
Session的获取
• 由于WebSocket通信基于TCP协议,因此
  无法直接得到Session信息

• 获取方式要从Session的原理讲起……
Session的获取
• Session的会话信息存储在服务器端,通过
  request header中cookie带的sessionID
  来识别对应的Session

• WebSocket的建立要经过HTTP握手,可通
  过updateGradeRequest取得Session
Session的获取
• 关键步骤:
 – 解读HTTP Request报头信息
 – 解析加密的Cookie信息
 – 获得SessionStore,并从中取出Session
控制发送频率
• 使用bufferedAmount来控制发送频率,
  避免阻塞Socket
事件节流
• 我们经常会遇到一个事件在短时间内被触
  发很多次的情况,
  例如onmousemove、onresize……

• 大部分时候并不需要调用这么多次,可以
  让方法调用一次之后,隔一段时间才能被
  继续调用
事件节流的实现(一)
事件节流的实现(二)
事件节流
 的实现
 (三)
真正的事件节流
实时Web中,MVC已死
  Views       • MVC的逻辑基于传统的
                Request/Response通信方式
              • Model变化无法及时反应到
Controllers
                View,阻碍了双向的通信
              • Controller之间也难以互相传
 Models
                递信息
MOVE模式
               •   Models
               •   Operations
               •   Views
               •   Events

                (此部分直接看代码吧)


  http://cirw.in/blog/time-to-move-on
Thank You

           实时Web的
          前世 . 今生 . 未来

演示代码: https://github.com/rolfzhang/Rolf_Chat_Room

Más contenido relacionado

La actualidad más candente

Node js实践
Node js实践Node js实践
Node js实践jay li
 
WireMock 起飞手册
WireMock 起飞手册WireMock 起飞手册
WireMock 起飞手册Jiyee Sheng
 
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB ServerPHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server志賢 黃
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全Borg Han
 
twMVC#43 YARP
twMVC#43 YARPtwMVC#43 YARP
twMVC#43 YARPtwMVC
 
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 twMVC
 
twMVC#26 | 淺談 ASP.NET Caching 技術與實踐
twMVC#26 | 淺談 ASP.NET Caching 技術與實踐twMVC#26 | 淺談 ASP.NET Caching 技術與實踐
twMVC#26 | 淺談 ASP.NET Caching 技術與實踐twMVC
 
Spring mvc
Spring mvcSpring mvc
Spring mvcpepsixp
 
React js入門教學
React js入門教學React js入門教學
React js入門教學TaiShunHuang
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战fengmk2
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geekJohnson Gau
 
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 
twMVC#38 How we migrate tfs to git(using azure dev ops)
twMVC#38 How we migrate tfs to git(using azure dev ops) twMVC#38 How we migrate tfs to git(using azure dev ops)
twMVC#38 How we migrate tfs to git(using azure dev ops) twMVC
 
twMVC#31沒有 hdd 的網站重構 webform to mvc
twMVC#31沒有 hdd 的網站重構 webform to mvctwMVC#31沒有 hdd 的網站重構 webform to mvc
twMVC#31沒有 hdd 的網站重構 webform to mvctwMVC
 
Rails girls session - Web Application
Rails girls session - Web ApplicationRails girls session - Web Application
Rails girls session - Web Applicationscott119
 
twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC
 
twMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIS
twMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIStwMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIS
twMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIStwMVC
 

La actualidad más candente (20)

Node js实践
Node js实践Node js实践
Node js实践
 
WireMock 起飞手册
WireMock 起飞手册WireMock 起飞手册
WireMock 起飞手册
 
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB ServerPHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
 
前端MVVM框架安全
前端MVVM框架安全前端MVVM框架安全
前端MVVM框架安全
 
twMVC#43 YARP
twMVC#43 YARPtwMVC#43 YARP
twMVC#43 YARP
 
Vue
VueVue
Vue
 
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
 
twMVC#26 | 淺談 ASP.NET Caching 技術與實踐
twMVC#26 | 淺談 ASP.NET Caching 技術與實踐twMVC#26 | 淺談 ASP.NET Caching 技術與實踐
twMVC#26 | 淺談 ASP.NET Caching 技術與實踐
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
 
React js入門教學
React js入門教學React js入門教學
React js入門教學
 
Node Web开发实战
Node Web开发实战Node Web开发实战
Node Web开发实战
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
 
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
twMVC#38 How we migrate tfs to git(using azure dev ops)
twMVC#38 How we migrate tfs to git(using azure dev ops) twMVC#38 How we migrate tfs to git(using azure dev ops)
twMVC#38 How we migrate tfs to git(using azure dev ops)
 
Html_20150329
Html_20150329Html_20150329
Html_20150329
 
twMVC#31沒有 hdd 的網站重構 webform to mvc
twMVC#31沒有 hdd 的網站重構 webform to mvctwMVC#31沒有 hdd 的網站重構 webform to mvc
twMVC#31沒有 hdd 的網站重構 webform to mvc
 
Rails girls session - Web Application
Rails girls session - Web ApplicationRails girls session - Web Application
Rails girls session - Web Application
 
twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解twMVC#43 Visual Studio 2022 新功能拆解
twMVC#43 Visual Studio 2022 新功能拆解
 
twMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIS
twMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIStwMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIS
twMVC#32應用 ASP.NET WebAPI2 Odata 建置高互動性 APIS
 

Destacado

Service jampresentation
Service jampresentationService jampresentation
Service jampresentationtomosaigon
 
Screen caps of ePartner
Screen caps of ePartnerScreen caps of ePartner
Screen caps of ePartnerjanster5
 
1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计RolfZhang
 
Business Case for Drupal in Vietnam
Business Case for Drupal in VietnamBusiness Case for Drupal in Vietnam
Business Case for Drupal in Vietnamtomosaigon
 
Proposta de Punt Tic Can Muntanyola (Granollers)
Proposta de Punt Tic Can Muntanyola (Granollers)Proposta de Punt Tic Can Muntanyola (Granollers)
Proposta de Punt Tic Can Muntanyola (Granollers)Núria Lloret Batlle
 
tabla futbol
tabla futboltabla futbol
tabla futbolwsfnet
 
Servicios adicionales
Servicios adicionalesServicios adicionales
Servicios adicionalesBxNiiHzOn
 
Colruyt financial facts
Colruyt financial factsColruyt financial facts
Colruyt financial factsEllen Maes
 
Resum Informe Auditoria Informació de Granollers Mercat
Resum Informe Auditoria Informació de Granollers MercatResum Informe Auditoria Informació de Granollers Mercat
Resum Informe Auditoria Informació de Granollers MercatNúria Lloret Batlle
 
Противоскользящие покрытия Safety Grip
Противоскользящие покрытия Safety GripПротивоскользящие покрытия Safety Grip
Противоскользящие покрытия Safety GripБратья Тютчевы
 
Tabladeposiciones12
Tabladeposiciones12Tabladeposiciones12
Tabladeposiciones12wsfnet
 
communication in Majlis Bandaraya Melaka Bersejarah
communication in Majlis Bandaraya Melaka Bersejarahcommunication in Majlis Bandaraya Melaka Bersejarah
communication in Majlis Bandaraya Melaka BersejarahJuliana Tajudin
 

Destacado (20)

Service jampresentation
Service jampresentationService jampresentation
Service jampresentation
 
Screen caps of ePartner
Screen caps of ePartnerScreen caps of ePartner
Screen caps of ePartner
 
Carnaval 2013
Carnaval 2013Carnaval 2013
Carnaval 2013
 
1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计1到100000000 - 分布式大型网站的架构设计
1到100000000 - 分布式大型网站的架构设计
 
Business Case for Drupal in Vietnam
Business Case for Drupal in VietnamBusiness Case for Drupal in Vietnam
Business Case for Drupal in Vietnam
 
函数
函数函数
函数
 
Waterproofing・air tightening tape km-30-bk
Waterproofing・air tightening tape  km-30-bkWaterproofing・air tightening tape  km-30-bk
Waterproofing・air tightening tape km-30-bk
 
Constructional application k 10 al
Constructional application k 10 alConstructional application k 10 al
Constructional application k 10 al
 
применение лент Diatex
применение лент Diatexприменение лент Diatex
применение лент Diatex
 
Proposta de Punt Tic Can Muntanyola (Granollers)
Proposta de Punt Tic Can Muntanyola (Granollers)Proposta de Punt Tic Can Muntanyola (Granollers)
Proposta de Punt Tic Can Muntanyola (Granollers)
 
Iice
IiceIice
Iice
 
tabla futbol
tabla futboltabla futbol
tabla futbol
 
Valdemorillo
ValdemorilloValdemorillo
Valdemorillo
 
Servicios adicionales
Servicios adicionalesServicios adicionales
Servicios adicionales
 
Colruyt financial facts
Colruyt financial factsColruyt financial facts
Colruyt financial facts
 
Resum Informe Auditoria Informació de Granollers Mercat
Resum Informe Auditoria Informació de Granollers MercatResum Informe Auditoria Informació de Granollers Mercat
Resum Informe Auditoria Informació de Granollers Mercat
 
Противоскользящие покрытия Safety Grip
Противоскользящие покрытия Safety GripПротивоскользящие покрытия Safety Grip
Противоскользящие покрытия Safety Grip
 
Tabladeposiciones12
Tabladeposiciones12Tabladeposiciones12
Tabladeposiciones12
 
communication in Majlis Bandaraya Melaka Bersejarah
communication in Majlis Bandaraya Melaka Bersejarahcommunication in Majlis Bandaraya Melaka Bersejarah
communication in Majlis Bandaraya Melaka Bersejarah
 
áLbum de fotografías
áLbum de fotografíasáLbum de fotografías
áLbum de fotografías
 

Similar a 实时Web的前世今生未来

Real-Time Web实时信息流推送
Real-Time Web实时信息流推送Real-Time Web实时信息流推送
Real-Time Web实时信息流推送yongboy
 
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践Li JianYe
 
Non-MVC Web Framework
Non-MVC Web FrameworkNon-MVC Web Framework
Non-MVC Web FrameworkFred Chien
 
Yog Framework
Yog FrameworkYog Framework
Yog Frameworkfansekey
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰Scourgen Hong
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAEq3boy
 
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)锐 张
 
twMVC#31網站上線了然後呢
twMVC#31網站上線了然後呢twMVC#31網站上線了然後呢
twMVC#31網站上線了然後呢twMVC
 
Traffic server overview
Traffic server overviewTraffic server overview
Traffic server overviewqianshi
 
Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)yiditushe
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web apphungjie19
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践Jackson Tian
 
網路技術心得分享
網路技術心得分享網路技術心得分享
網路技術心得分享Mux Baxer
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规yangdj
 
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用美团点评技术团队
 
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹My own sweet home!
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 

Similar a 实时Web的前世今生未来 (20)

Real-Time Web实时信息流推送
Real-Time Web实时信息流推送Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
 
Html5
Html5Html5
Html5
 
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
 
Non-MVC Web Framework
Non-MVC Web FrameworkNon-MVC Web Framework
Non-MVC Web Framework
 
Yog Framework
Yog FrameworkYog Framework
Yog Framework
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAE
 
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
 
Meteor
MeteorMeteor
Meteor
 
twMVC#31網站上線了然後呢
twMVC#31網站上線了然後呢twMVC#31網站上線了然後呢
twMVC#31網站上線了然後呢
 
Traffic server overview
Traffic server overviewTraffic server overview
Traffic server overview
 
Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)Ajax框架:Dwr》实战(包括整合)
Ajax框架:Dwr》实战(包括整合)
 
Berserk js
Berserk jsBerserk js
Berserk js
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
 
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
 
網路技術心得分享
網路技術心得分享網路技術心得分享
網路技術心得分享
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
 
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
 
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 

实时Web的前世今生未来