当创建基于Web的实时系统时,通常我们会使用到以下技术:

轮询
长连接
长轮询
Flash Socket
WEB Socket

下面我们对这些技术作个简单介绍。

传统轮询(Traditional Polling)

当前Web应用中较常见的一种持续通信方式,通常采取setInterval或者setTimeout实现。例如如果我们想要定时获取并刷新页面上的数据,可以结合Ajax写出如下实现:

setInterval(function() {$.get("/path/to/server", function(data, status) {console.log(data);});
},10000);

客户端定时向服务器发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。

http 长连接:

目前 http 协议普遍使用的是 1.1 版本, 之前有个 1.0 版本, 两者之间的一个区别是 1.1 支持 http 长连接, 或者叫持久连接.1.0 不支持 http 长连接, 每次一个 http 请求响应后都关闭 tcp 连接,下个 http 请求会重新建立 tcp 连接。

所谓 http 长连接就是多个 http 请求共用一个 tcp 连接,这样可以减少多次临近 http 请求导致 tcp 建立关闭所产生的时间消耗。

通常在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。比如早期的Gmail聊天

优点:消息即时到达,不发无用请求。
缺点:服务器维护一个长连接会增加开销。

http 长轮询:

http 长轮询是服务器收到请求后如果有数据, 立刻响应请求; 如果没有数据就会 hold 一段时间, 这段时间内如果有数据立刻响应请求; 如果时间到了还没有数据, 则响应 http 请求;浏览器受到 http 响应后立在发送一个同样 http 请求查询是否有数据;

客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。

优点:在无消息的情况下不会频繁的请求。
缺点:服务器hold连接会消耗资源。浏览器端对统一服务器同时 http 连接有最大限制, 最好同一用户只存在一个长轮询;
服务器端没有数据 hold 住连接时会造成浪费, 容易产生服务器瓶颈;
实例:WebQQ、Hi网页版、Facebook IM。

Flash Socket:

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

WebSocket

WebSocket是HTML 5规范的组成部分之一。WebSocket相较于上述几种连接方式,实现原理较为复杂,用一句话概括就是:客户端向WebSocket服务器通知一个带有所有接收者ID(recipients IDs)的事件(event),服务器接收后立即通知所有活跃的(active)客户端,只有ID在接收者ID序列中的客户端才会处理这个事件。由于WebSocket本身是基于TCP协议的,所以在服务器端我们可以采用构建TCP Socket服务器的方式来构建WebSocket服务器。

优点:实现真正的即时通信,而不是伪即时。
缺点:不是所有浏览器都支持(虽然大部分都已经支持)。

转载于:https://www.cnblogs.com/zhumingwu/p/7490341.html

创建基于Web的实时系统相关推荐

  1. jExcel 创建基于 Web 的电子表格应用

    jExcel 是一个轻量级的vanilla javascript插件,用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格,可以创建可以交互的表格,兼容Excel,可以从 ...

  2. 基于web的视频_如何创建基于Web的视频播放器

    在上一篇文章中,我们介绍了有关如何创建Audio Web Player以及如何自定义其播放器外观的教程. 这次我们将用视频来做. 是的,我们将创建一个Web Video Player. 视频播放器将使 ...

  3. impress.js_与Impress.js和Impressr同步基于Web的演示幻灯片[Quicktip]

    我已经在几所大学和学校中进行了有关Web开发和WordPress的讨论,在演讲中我遇到的一个常见问题是,靠近人群的观众几乎看不到我的幻灯片. 我对此进行了思考:如何使演示幻灯片更清晰,而演讲者和与会人 ...

  4. Tridiv:基于 Web 的 CSS 编辑器,创建炫丽 3D 图形

    Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...

  5. django创建应用程序_使用Django创建基于机器学习的Web应用程序

    django创建应用程序 This article is for readers who want to deploy their Machine Learning model as a Web Ap ...

  6. 【ASP.NET教程-WP教程15】ASP.NET Web Pages - C# 和 VB 实例简单而强大的开发框架,可用于构建动态的、基于Web的应用程序。它提供了一种轻量级的方式来创建和管理网页

    ASP.NET Web Pages - C# 和 VB 实例 ASP.NET Web Pages 是一种简单而强大的开发框架,可用于构建动态的.基于Web的应用程序.它提供了一种轻量级的方式来创建和管 ...

  7. Kataspace:用HTML5和WebGL创建基于浏览器的虚拟世界

    源自斯坦福的创业公司Katalabs发布了一个用于创建基于浏览器的虚拟世界的开源框架. 名叫KataSpace的软件,利用了新兴的HTML5技术,以及WebGL和WebSockets,允许用户无需安装 ...

  8. 基于web的可定制数据填报平台

    需求说明: 基于web的可定制数据填报平台的功能分析 一.表单设计 表项表  :用户创建的一个表,表项名通过用户创建表单时传递过来,User id表明是那个用户的表单 Id 表项名 User id(学 ...

  9. ASP .NET Core Web MVC系列教程:使用ASP .NET Core创建MVC Web应用程序

    本系列教程翻译自微软官方教程,官方教程地址:Get started with ASP.NET Core MVC | Microsoft Docs 本系列教程介绍了构建MVC Web应用程序的基础知识. ...

最新文章

  1. 资源|2019 年 11 月最新《TensorFlow 2.0 深度学习算法实战》中文版教材免费开源(附随书代码+pdf)...
  2. %02 java_02-java
  3. codesys中打开linux端的串口_CODESYS版本3.5 SP14 Patch 3发布
  4. mac 下 使用 java运行 class 文件 总是提示 “错误: 找不到或无法加载主类”的解决方法...
  5. 【实践】58同城本地服务推荐系统演进
  6. 活动合作 | AI NEXTCon 硅谷AI技术峰会(北京分会)大咖来袭
  7. PHP Cookbook读书笔记 – 第13章Web自动化
  8. PHP 如何使用Mobile Detect来判断访问网站的设备 安卓,平板,电脑
  9. 项目管理计划怎么写?这9大步骤要知道
  10. HTK搭建大词汇量连续语音识别系统(三)
  11. 关于为什么不能减小rb来消除截止失真
  12. Jira BigPicture结合KanBan跟踪项目执行实践分享
  13. 简单使用Search()函数
  14. 005--Keil使用--出现integer conversion resulted in truncation
  15. C语言关系运算符计算题,【单选题】下列运算符中是C语言关系运算符的是().
  16. 『R语言Python』建模前的准备:连续型与离散型变量探索,离散型变量转为虚拟变量
  17. 送东阳马生序 与君共勉
  18. Elasticsearch7.8
  19. 微服务注册中心怎么选?
  20. c++课程设计日历记事本

热门文章

  1. 视图之二--视图中数据的更新
  2. java代码,输入n多个数,求其平均值,虽有重复,但是第二次,我就乱写了
  3. xxx is already defined as object xxx+intellij新建一个scala的maven项目+找不到或无法载入主要类别hello问题解决
  4. intellij设置java中的代码中的import不折叠
  5. saleor的生产环境部署-失败记录
  6. ubuntu19.10 安装搜狗输入法
  7. xsd文件转图片_如何将图片转化为PDF格式?分享一个超简单的方法给你
  8. 清华大学梁宸计算机系,2015年广东高考高等学校自主招生录取考生名单公示(2)...
  9. android 配置java_home_android – React Native:未设置JAVA_HOME,并且在PATH中找不到“java”命令...
  10. mysql中的extract()函数