即时通讯相关技术总结

解决问题

即时通讯要解决三方面的问题:javascript

  1. 双全工通讯
  2. 低延时
  3. 支持跨域

各类即时通讯技术

轮询

客户端定时向服务器发送Ajax请求,服务器接到请求后立刻返回响应信息并关闭链接。
优势:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。
实例:适于小型应用。php

长轮询

客户端向服务器发送Ajax请求,服务器接到请求后hold住链接,直到有新消息才返回响应信息并关闭链接,客户端处理完响应信息后再向服务器发送新的请求。
优势:在无消息的状况下不会频繁的请求。
缺点:服务器hold链接会消耗资源。
实例:WebQQ、Hi网页版、Facebook IM。html

长链接

在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长链接或是采用xhr请求的请求,服务器端就能源源不断地往客户端输入数据。
优势:消息即时到达,不发无用请求。
缺点:服务器维护一个长链接会增长开销。
实例:Gmail聊天
技术细节:
● XHR 利用onreadystatechange=3去作一些事:当它的readyState为3的时候,获取它的responseText而后进行处理,readyState为3表示数据传送中,整个通讯过程尚未结束,因此它还在不断获取服务端发送过来的数据,直到readyState为4的时候才表示数据发送完毕,一次通讯过程结束。
● 利用Iframe作一些事: 低版本的IE不容许在XHR的readyState为3的时候获取其responseText属性,为了达到在IE上使用这个技术,又出现了基于iframe的数据流通讯方式。在浏览器中动态载入一个iframe,让它的src属性指向请求的服务器的URL,实际上就是向服务器发送了一个http请求,而后在浏览器端建立一个处理数据的函数,在服务端经过iframe与浏览器的长链接定时输出数据给客户端,可是这个返回的数据并非通常的数据,而是一个相似于<script type="text/javascript">parent.process('"+randomNum.toString()+"')</script>脚本执行的方式,浏览器接收到这个数据就会将它解析成js代码并找到页面上指定的函数去执行,其实是服务端间接使用本身的数据间接调用了客户端的代码,达到实时更新客户端的目的。
● 动态生成一个htmlfile对象,这个对象ActiveX形式的com组件,它实际上就是一个在内存中实现的HTML文档,经过将生成的iframe添加到这个内存中的HTMLfile中,并利用iframe的数据流通讯方式达到上面的效果。同时因为HTMLfile对象并非直接添加到页面上的,因此并无形成浏览器显示正在加载的现象。代码以下。java

Flash Socket

在页面中内嵌入一个使用了Socket类的 Flash 程序JavaScript经过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通讯,JavaScript在收到服务器端传送的信息后控制页面的显示。
优势:实现真正的即时通讯,而不是伪即时。
缺点:客户端必须安装Flash插件;非HTTP协议,没法自动穿越防火墙。
实例:网络互动游戏。web

SSE 服务器推送事件

为了解决浏览器只可以单向传输数据到服务端可以实现客户端请求服务端,而后服务端利用与客户端创建的这条通讯链接push数据给客户端,客户端接收数据并处理的目的。从独立的角度看,SSE技术提供的是从服务器单向推送数据给浏览器的功能,可是配合浏览器主动请求,实际上就实现了客户端和服务器的双向通讯。它的原理是在客户端构造一个eventSource对象,该对象具备readySate属性,分别表示以下:后端

webSocket(HTML5)

在HTML5中,为了增强web的功能,提供了websocket技术,它不只是一种web通讯方式,也是一种应用层协议。它提供了浏览器和服务器之间原生的双全工跨域通讯,经过浏览器和服务器之间创建websocket链接(其实是TCP链接),在同一时刻可以实现客户端到服务器和服务器到客户端的数据发送。
首先是客户端new 一个websocket对象,该对象会发送一个http请求到服务端,服务端发现这是个webscoket请求,会赞成协议转换,发送回客户端一个101状态码的response,以上过程称之为一次握手,通过此次握手以后,客户端就和服务端创建了一条TCP链接,在该链接上,服务端和客户端就能够进行双向通讯了。这时的双向通讯在应用层走的就是ws或者wss协议了,和http就没有关系了。所谓的ws协议,就是要求客户端和服务端遵循某种格式发送数据报文(帧),而后对方才可以理解。跨域

科普

什么是长链接、短链接?

在HTTP/1.0中,默认使用的是短链接。也就是说,浏览器和服务器每进行一次HTTP操做,就创建一次链接,但任务结束就中断链接。若是客户端浏览器访问的某个HTML或其余类型的 Web页中包含有其余的Web资源,如JavaScript文件、图像文件、CSS文件等;当浏览器每遇到这样一个Web资源,就会创建一个HTTP会话。
但从 HTTP/1.1起,默认使用长链接,用以保持链接特性。使用长链接的HTTP协议,会在响应头有加入这行代码:
Connection:keep-alive
在使用长链接的状况下,当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的 TCP链接不会关闭,若是客户端再次访问这个服务器上的网页,会继续使用这一条已经创建的链接。Keep-Alive不会永久保持链接,它有一个保持时间,能够在不一样的服务器软件(如Apache)中设定这个时间。实现长链接要客户端和服务端都支持长链接。
HTTP协议的长链接和短链接,实质上是TCP协议的长链接和短链接。浏览器

Socket.IO

Socket.IO是一个彻底由JavaScript实现、基于Node.js、支持WebSocket的协议用于实时通讯、跨平台的开源框架,它包括了客户端的JavaScript和服务器端的Node.js。Socket.IO除了支持WebSocket通信协议外,还支持许多种轮询(Polling)机制以及其它实时通讯方式,并封装成了通用的接口,而且在服务端实现了这些实时机制的相应代码。Socket.IO实现的Polling通讯机制包括Adobe Flash Socket、AJAX长轮询、AJAX multipart streaming、持久Iframe、JSONP轮询等。服务器

本文为网上资料汇总+本身的理解
Socket.IO介绍:支持WebSocket、用于WEB端的即时通信框架
史上最全Web端即时通信技术原理详解
知乎回答websocket

相关文章
相关标签/搜索