大中型网站技术架构浅析

分享到:

本文所讲述的『实时通信』主要围绕浏览s器端和服务器端之间的实时通信。大中型网站技术架构浅析 系列之一。

实时通信主要分3大类:

1. Pull技术,轮询(Polling)

轮询(Polling)

客户端定时轮询请求,服务器端立刻返回。

  • 优点:短链接,服务器处理方便,支持跨域。
  • 缺点:有一定延迟
微博未读微博数和未读消息(评论,@)就是用polling实现的。
应用场景:对实时性要求不高的应用,如新微博提示,评论提示,回复提示等。

2. Push,反向Ajax(Reverse Ajax)或者叫Comet.

实现方式主要有2种,长轮询(Long Polling)和 流推送(Comet Streaming)

2.1 长轮询(LONG POLLING)

Long Polling

长轮询有2种实现方式:

2.1.1 XHR Long Polling

客户端发起一个XHR ajax request,服务器不马上返回,而是hold住这个connection,直到有数据要push给客户端时(或time out)才发送response;客户端收到response之后马上再发起一个新的request,周而复始。

  • 优点:减少轮询,低延迟, 各大浏览器均支持
  • 缺点:不可跨域,服务器需要hold 住大量connection.

2.1.2 Script Tag Long Polling

原理跟XHR Long Polling类似,只是结合long polling和jsonp,用来支持跨域(cross-domain)请求。

  • 优点:减少轮询,低延迟,支持跨域,各大浏览器均支持
  • 缺点:服务器需要hold 住大量connection.
微博私信提示就是用Script Tag Long Polling实现。
Long Polling的应用场景:对实时性要求较高和浏览器覆盖面广的应用,如私信等一些简单即时聊天应用。

2.2 流推送(COMET STREAMING)

Comet Streaming

Comet Streaming又有2实现方法.

2.2.1 Multi-part XMLHttpRequestg

浏览器必须支持的 multi-part 标志,通过XMLHttpRequest发出request,服务器hold住这个connection,然后可以通过HTTP1.1的chunked encoding机制不断push数据给浏览器直到timeout数据给浏览器直到timeout 或者manual close connection.

  • 优点:客户端一次连接,服务器数据可多次推送。
  • 缺点:并非所有的浏览器都支持 multi-part 标志。

2.2.2 Hidden IFrame(Forever IFrames)

JS生成一个iframe, 发出request,服务器是hold住这个connection,然后可以通过HTTP1.1的chunked encoding机制不断push数据给浏览器直到timeout 或者manual close connection .

  • 优点:客户端一次连接,服务器数据可多次推送。几乎所有支持 iframe 的浏览器上都可用。
  • 缺点:不可跨域,错误处理可控性不强。
流推送的应用场景:实时监控系统,即时聊天

3. WebSocket

WebSocket

3.1 WEBSOCKET

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送

  • 优点: 长连接,双向、低延迟和易于处理错误。
  • 缺点:HTML5的新规范,只有部分浏览器支持。服务器端(java)还没有WebSocket 相关规范,服务器厂家各自为政。

3.2 FLASHSOCKET

WebSocket的替代品, 客户端JavaScript与Flash交互调用:JS调用Flash Socket接口发送数据,Flash Socket与服务器端Socket服务器通信

  • 优点: 支持所有带flash的浏览器

  • 缺点: 需要安装flash插件,要求打开防火墙的 843 端口,以便 Flash 组件能够执行 HTTP 请求来检索包含域授权的策略文件。

WebSocket的应用场景:实时性要求高,双向通信,如页游,实时协作(eg:Google docs)

4. 技术选型建议

对于实时性要求高和并发量大的应用,建议方案:


桌面端 
WebSocket(高级浏览器)+ FlashSocket(IE6+)

移动端
WebSocket + 长轮询(对不支持Websocket的浏览器)

前端
socket.io

服务器端
socketio-netty

对于实时性要求高和并发量一般的应用,建议方案:


桌面端 
流推送Hidden IFrame(支持主流浏览器)

移动端
长轮询

服务器端
支持servlet 3.0 的容器(jetty8+,tomcat7+)

稍后补一篇学习 socket.io知识文章

 转:http://kenny7.com/2013/05/technical-guide-for-website-realtime-communication.html

昵    称:
验证码:

相关文档:

  • 【html 及 HTML5所有标签汇总】★★★
    /****************************************************************************/【HTML5所有标签汇总】★★★/*******************************************************...
  • Android Webview与Html5交互
    转:http://fangjie.info/?p=417#more-417 一、WebView.setWebViewClient(newMyWebViewClient()); 1.publicbooleanshouldOverrideUrlLoading(WebViewview,String...
  • HTML5离线缓存
    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5应用程序缓存又称离线缓存,即使断线了,刷新后也还是缓存了原来的页面,不会40...
  • HTML5 服务器推送事件(Server-sent Events)实战开发
    对于一般的Web应用开发,大多数开发人员并不陌生。在Web应用中,浏览器和服务器之间使用的是请求/响应的交互模式。浏览器发出请求...
  • 经典总结!语义化HTML和前端架构
    这是一篇我喜欢的思想,经验,理念,以及过去几年中我所试验的理念的集合。它覆盖了HTML语义,前端架构的组件和方法,类命名模式...
  • <!DOCTYPE html>的重要性
    在HTML5时代,DOCTYPE声明已经不再像以前HTML4那样繁琐了,只需要简简单单的<!DOCTYPEhtml>,这句话指示 web浏览器关于页面使用哪个HTML版...
  • 解决html5 audio iphone,ipd,safari不能自动播放问题
    htmlaudio在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safrionios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得...
  • 关于html5 DOCTYPYE的真正含义
    关于DOCTYPYE的真正含义《HTML5的设计》。 相信很多人都已经知道了<!DOCTYPEhtml>这是HTML5中对于文档类型的规范,DOCTYPE并不是写给浏览...
  • html5开发之viewport使用
    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,...
  • 基于html5实现的愤怒的小鸟网页游戏
    之前给大家分享一款基于html5canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏。这款游戏适用浏...
  • 大熊君学习html5系列之------History API(SPA单页应用的必备------重构完结版)
    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*)嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点...
  • HTML5+JS 《五子飞》游戏实现(五)移动棋子
    上一章我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子。现在里沃特跟大家分享分享,怎么移动棋...
  • [html5/css3] html5 canvas 线性渐变和径向渐变
    <!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title>html5canvas--线性渐变</title> <scripttype="text...
  • 使用 HTML5 webSocket API实现即时通讯的功能
    project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用HTML5webSocketAPI实现即时通讯的功能。 本project...
  • html5 canvas simple drawing
    varc=canvas.getContext("2d");//getcanvas2dcontext canvasincludingaproposed3Dcontext; c.fillStyle("#ffffff");//rawingcanvasbackgroundcolor c.fillRectan...
  • html5 postMessage解决跨域、跨窗口消息传递 BY:色拉油啊油
    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据...
  • HTML5自定义data属性
    可能大家在使用jquerymobile时,经常会看到data-role、data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html]<divdata-role="header"...
  • html5 canvas图片翻转
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <script> window.onload=function() {...
  • html5 拖拽
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> #div1{ width:320px; height:...
  • HTML5 defer和async的区别
    在HTML页面中插入Javascript的主要方法,就是使用<script>元素。这个元素由Netscape创造并在NetscapeNavigator2中首先实现。后来,这个元素就...