漫扯:从polling到Websocket

Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response。这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息。。。

轮询

  老大发火了,小弟们自然不能无动于衷,为了能及时获得老大的消息,小弟们只好每隔一段时间跑去老大那里问问,有没有新的指示发出。这便是最早实现实时获得服务器数据的技术轮询(Polling)。

  客户端通过ajax不停去向服务器获得数据,检查是否有新的数据更新。这种使用轮询实现一种伪实时的状态很容易,但效率偏低,一般而言,这种实时获得的数据,本身数据量不是非常大,而通过这种反复地发起request的方式,往往造成的可能是http的header信息比数据本身还多,而且大多数时候获得的数据都是重复无用的。(据说最早还有通过不断刷新客户端页面,来实现web实时通信的情况~ 我想应该木有哪个客户会受得了这种体验。)

Comet

  “不值啊!咱哥几个每天跑来跑去。拿到的都是一堆没用的数据。”

  于是大家坐在一起想,有什么好办法能不用老是跑腿又可以获得新的信息及时行动呢?小的们灵机一动,下次我们跑去老大那里等着,等他老人家下了命令再回来。这就是基于 AJAX 的长轮询(long-polling)方式实现的一种comet方式。因为ajax的调用是异步的,我们可以在页面加载完毕之后,发起一个request请求,服务器端会阻塞request直到有数据传递或超时(timeout)才返回。客户端处理完服务器返回的信息后,再次发出请求,重新建立连接。这样周而复始。

  基于 AJAX 的long-polling

  另外还有一种comet模型,他的名字玄乎比长轮询邪乎的多。。。叫The forever iframe technique。这名儿听起来就高大上很多。其实就是在页面中隐藏一个iframe标签,然后将这个iframe的 SRC 属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。但是这种方法有一个很明显的问题,各个浏览器会一直显示页面加载没有完成,如果用户是个强迫症,他一定会分分钟关掉页面的。TAT......

 forever iframe技术

  不管怎么样comet技术第一次实现了真正的实时通信,而且能支持大量用户,小的们从此总是能准确地获得老大的消息了。但是comet不会是一个没有副作用的解决方案,由于长期占用连接,让web丧失了无状态高并发的特点,大量消耗了服务器带宽和资源。

WebSocket登场

  “跑来跑去真是麻烦诶~http肿么这么麻烦呀。咱们和老大之间整个新协议吧。”  

  这个想法在小弟们中炸开了锅!!! 在大家的千呼万唤中,WebSocket协议登场了。哈哈哈哈哈~让我来拯救各位吧~~~~

  WebSocket协议是HTML5定义的一种新协议,它实现了浏览器与服务器全双工通信(full-duplex)。通过浏览器发出websocket连线请求,然后服务器发出回应,建立一个联系的通道。小的们只用发个信息问老大:“首长好~”,老大回一个信儿:“同志们辛苦了!”这样握手(handshaking)就完成了,websocket连线完成,通过websocket,我们可以完成真正的实时通信了。

  websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信。在websocket中有两个方法:  

    1、send() 向远程服务器发送数据

    2、close() 关闭该websocket链接

  websocket同时还定义了几个监听函数    

    1、onopen 当网络连接建立时触发该事件

    2、onerror 当网络发生错误时触发该事件

    3、onclose 当websocket被关闭时触发该事件

    4、onmessage 当websocket接收到服务器发来的消息的时触发的事件,也是通信中最重要的一个监听事件。

  websocket还定义了一个readyState属性,这个属性可以返回websocket所处的状态:

    1、CONNECTING(0) websocket正尝试与服务器建立连接

    2、OPEN(1) websocket与服务器已经建立连接

    3、CLOSING(2) websocket正在关闭与服务器的连接

    4、CLOSED(3) websocket已经关闭了与服务器的连接

  websocket的url开头是ws,如果需要ssl加密可以使用wss,当我们调用websocket的构造方法构建一个websocket对象(new WebSocket(url))的之后,就可以进行即时通信了。

  

  哈哈哈哈哈哈~老大通过websocket发话了:

    晚上请吃饭!

  小弟们赶紧行动起来~

总结

  相比comet技术,websocket不仅节约了header的问题(websocket的head信息只有短短的2个字节)。更加重要的是是通信的稳定性,comet在遇到网络问题之后,想要在不刷新页面的情况下恢复通信,非常困难,而websocket中提供了onclose函数来处理断开网络后的情况,这为我们与服务器的通信提供了可靠的保障。在github上有一个js库(https://github.com/joewalnes/reconnecting-websocket)就是通过这种方式来处理websocket断网重连。

  websocket看起来广泛实现只是时间问题了,当然这么好用的websocket也不是没有它的问题,websocket目前来看最大的问题是浏览器的支持(幸好大部分的服务器软件在比较新的版本中都已经支持了websocket),ie直到10才开始支持这种协议,而且每个浏览器最近在升级浏览器的时候,都会对websocket做出细微的调整。而且,想象你打开一个页面,当这个页面打开websocket连接并且执行一个内部IP地址的端口扫描,如果端口扫描发现了内部网络上发现了一个开启的80端口,一个隧道就可能通过你的浏览器建立。这样做很可能最终绕过防火墙,并且允许访问内部内容。所以安全问题,也是websocket现在面临的一大隐患。

漫扯:从polling到Websocket

时间: 2024-10-05 20:10:53

漫扯:从polling到Websocket的相关文章

漫扯:从polling到Websocket(ZZ)

http://www.cnblogs.com/whthomas/p/3801147.html Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自然不能无动于衷,为了能及时获得老大的消息,小弟们只好每隔一段时间跑去老大那里问问,有没有新的指示发出.这便是最早实现实时获得服务器数据的技术轮询(Polling). 客户端通过ajax不停去向服务器获得数据

漫谈 polling 和 Websocket

Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response.这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息... 轮询 老大发火了,小弟们自然不能无动于衷,为了能及时获得老大的消息,小弟们只好每隔一段时间跑去老大那里问问,有没有新的指示发出.这便是最早实现实时获得服务器数据的技术轮询(Polling). 客户端通过ajax不停去向服务器获得数据,检查是否有新的数据更新.这种使用轮询实现一种伪实时的状态很容易,但效率偏低,一般而言,这种实

为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通

为Phonegap Android平台增加websocket支持,使默认成为socket.io首选通道选择 广而告之 使用socket.io作为跨浏览器平台的实时推送首选,经测试在各个主流浏览器上测试都确实具有良好的下实时表现.这里为推广socketio-netty服务器端实现哈,做次广告,同时预热一下: socketio-netty : 又一款socket.io服务器端实现,兼容0.9-1.0版本~ 示范目的 我们要构建一个在市面上常见浏览器上都可以正常运行的集体聊天应用,保证在IE6+,Fi

engine.io分析2--socket.io的基石

转载请注明: TheViper http://www.cnblogs.com/TheViper 源码分析 var engine = require('./node_modules/engine.io/lib/engine.io.js'); var server = engine.listen(8000,{ transports:['polling'] }); server.on('connection', function(socket){ socket.send('utf 8 string')

socket.io 1.x迁移指南

转载请注明: TheViper http://www.cnblogs.com/TheViper socket.io 1.x是从今年5月底开始发布更新的,从版本号看的出,这是次大更新.具体参见https://github.com/Automattic/socket.io/wiki/Migrating-to-1.0.我就说几点最重要的. 日志输出 0.x版本的日志输出都是直接在终端或命令行输出,使用者只能控制是否输出日志.在1.x里面,使用者还可以指定输出什么,比如,DEBUG=socket.io:

实时同步方式

实时同步方式有以下几种: 轮询(Ajax polling/Ajax long polling) WebSocket Socket.io Wilddog(野狗) WebSocket协议 HTML5新增的一种协议方式 主要特点:是建立客户端与服务端的长连接,从而实现实时数据传输 其他实现实时化的方式 Ajax polling:客户端使用Ajax每隔一定时间向服务端发起一次数据请求.实时性取决于请求的频次,而性能也决定于请求的频次 Ajax long polling:跟Ajax polling的方式类

vue使用远程在线更新代码

main.js import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'import store from './store'import axios from 'axios'import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'// import

云原生实践之 RSocket 从入门到落地:Servlet vs RSocket

技术实践的作用在于:除了用于构建业务,也是为了验证某项技术或框架是否值得大规模推广. 本期开始,我们推出<RSocket 从入门到落地>系列文章,通过实例和对比来介绍RSocket.主要围绕RSocket如何实现Polyglot RPC.Service Registry. Service Discovery. IoT联结等维度,为读者们揭开RSocket的面纱,希望对大家在Java API规范的技术选型过程中有所借鉴. 第一篇文章我们将通过Servlet和RSocket的对比,快速了解RSoc

认识HTML5的WebSocket

认识HTML5的WebSocket 在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器.让我们看一看HTML5的WebSocket API:它可用于客户端.服务器端.而且有一个优秀的第三方API,名为Socket.IO. 一.什么是WebSocket API? WebSocket API是下一代客户端-