js长连接:webSocket和socket.io

长轮询 VS 长连接

客户端和服务端通信一般采用的是http请求,http请求的缺点是只能由客户端发起,服务端响应,并且响应一旦完成请求就会被关闭。当客户端需要即时性获取服务端消息的时候,可以采用以下几种方式:

  1. 轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
    优点:后端程序编写比较容易。
     缺点:请求中有大半是无用,浪费带宽和服务器资源。(而每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息,这就增加了每次传输的数据量)
     实例:适于小型应用。
  2. 长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接(或到了设定的超时时间关闭连接),客户端处理完响应信息后再向服务器发送新的请求。
    优点:在无消息的情况下不会频繁的请求,节省了网络流量,解决了服务端一直疲于接受请求的窘境
     缺点:服务器hold连接会消耗资源,需要同时维护多个线程,服务器所能承载的TCP连接数是有上限的,这种轮询很容易把连接数顶满。
     实例:WebQQ、Hi网页版、Facebook IM。
  3. 长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。
     优点:消息即时到达,不发无用请求。
     缺点:服务器维护一个长连接会增加开销。iframe正在逐步被废弃。
     实例:Gmail聊天
  4. Flash Socket:在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信,JavaScript在收到服务器端传送的信息后控制页面的显示。
     优点:实现真正的即时通信,而不是伪即时。
     缺点:客户端必须安装Flash插件;非HTTP协议,无法自动穿越防火墙。
     实例:网络互动游戏。
  5. WebSocket
    WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息”Upgrade: WebSocket”表 明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

webSocket

WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例如 Chrome,Safrie,Firefox,Opera,IE等等。

代码示例

客户端

服务端

关于webSocket的详细使用方法可以参考阮一峰老师的webSocket教程

websocket与TCP,HTTP的关系

为了建立一个WebSocket连接,浏览器首先要向服务器发起一个HTTP请求,这个请求和通常的HTTP请求不同,包含了一些附加头信息,其中附加头信息Upgrade: WebSocket表明这是一个申请协议升级的HTTP请求。服务端解析这些头信息,然后产生应答信息返回给客户端,客户端和服务端的WebSocket连接就建立起来了。双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续直到客户端或者服务端的某一方主动关闭连接。

WebSocket与http协议一样都是基于TCP的,所以他们都是可靠的协议,Web开发者调用的WebSocket的send函数在browser 的实现中最终都是通过TCP的系统接口进行传输的。WebSocket和Http协议一样都属于应用层的协议,那么他们之间有没有什么关系呢?答案是肯定的,WebSocket在建立握手连接时,数据是通过http协议传输的。但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。

socket.io

node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验,于是socket.io诞生。Socket.io将Websocket和轮询 (Polling)机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这些实时机制的相应代码。也就是说,Websocket仅仅是 Socket.io实现实时通信的一个子集。
socket.io官网
socket.io 实现了polling的以下通信机制

  • Adobe Flash Socket
    大部分PC浏览器都支持的Socket模式,不过是通过第三方嵌入到浏览器,不在W3C规范内,可能将逐步被淘汰。况且,大部分手机浏览器并不支持此种模式。
  • AJAX Long Polling
    定时向服务端发送请求,缺点是给服务端带来压力并出现信息更新不及时的现象。
  • AJAX multipart streaming
    在XMLHttpRequest对象上使用某些浏览器支持的multi-part标志,AJAX请求被发送给服务端并保持打开状态(挂起状态),每次需要向客户端发送信息,就寻找一个挂起的HTTP请求响应给客户端,并且所有的响应都会通过统一连接来写入。
  • Forever Iframem
    永存的Iframe设计了一个置于页面中隐藏的iframe标签,该标签的src属性指向返回服务端时间的Servlet路径。每次在事件到达时,Servlet写入并刷新一个新的Script标签,该标签内部带有JS代码,iframe的内容被附加上script标签,标签中的内容就会得到执行。这种方式的缺点是接收数据都是由浏览器通过HTML标签来处理的,因此无法知道连接何时在哪一端被断开,而且iframe标签在浏览器中将被逐步取消。
  • JSONP Polling
    JSONP轮询基本与HTTP轮询一样,不同之处则是JSONP可发出跨域请求。

参考文献:
轮询、长轮询、长连接、socket连接、WebSocket
webSocket与socket.io介绍

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复