前端随心记---------Ajax,Comet,Websocket

从WebScoket中我们了解到Ajax的轮询问题,WebScoket协议中服务器和客户端只要进行一次握手,就能创建一条通道实现数据的相互传送。而Ajax轮询,在特定的时间间隔内向服务器发送请求,以达到对数据的推送,这样导致浪费了很多无谓的网络带宽,因此产生疑问:为了达到高效且资源利用最大化的角度,WebScoket为什么没有淘汰定时轮询这种机制呢?

什么是Websocket

  Websocket是HTML5中提出的新的协议,注意,这里是协议,可以实现客户端与服务器端的通信,实现服务器的推送功能。

  websocket出现之前,开发者使用轮询 (Polling) 和 Comet 技术。

  轮询 :客户端以一定的时间间隔向服务端发出请求,以频繁请求的方式来保持客户端和服务器端的同步。

  缺点:当客户端以固定频率向 服务器发起请求的时候,服务器端的数据可能并没有更新,这样会带来很多无谓的网络传输,所以这是一种非常低效的实时方案。

  Comet--- 一种 hack 技术, :基于 HTTP 长连接的“服务器推”技术

    以即时通信为代表的web应用程序对数据的Low Latency要求,传统的基于轮询的方式已经无法满足,而且也会带来不好的用户体验。于是一种基于http长连接的“服务器推”技术便被hack出来。这种技术被命名为 Comet ,这个术语由Dojo Toolkit 的项目主管Alex Russell在博文 Comet: Low Latency Data for the Browser 首次提出,并沿用下来。其实,服务器推很早就存在了,在经典的client/server模型中有广泛使用,只是浏览器太懒了,并没有对这种技术提供很好的支持。

  Comet的实现主要有两种方式:

  1. 基于Ajax的长轮询(long-polling)方式

   浏览器发出XMLHttpRequest 请求,服务器端接收到请求后,会阻塞请求直到有数据或者超时才返回,浏览器JS在处理请求返回信息(超时或有效数据)后再次发出请求,重新建立连接。在此期间服务器端可能已经有新的数据到达,服务器会选择把数据保存,直到重新建立连接,浏览器会把所有数据一次性取回。

   长 轮询是对定时轮询的改进和提高,目地是为了降低无效的网络传输。当服务器端没有数据更新的时候,连接会保持一段时间周期直到数据或状态改变或者时间过期, 通过这种机制来减少无效的客户端和服务器间的交互。当然,如果服务端的数据变更非常频繁的话,这种机制和定时轮询比较起来没有本质上的性能的提高。

  2.基于 Iframe 及 htmlfile 的流(http streaming)方式

  Iframe是html标记,这个标记的src属性会保持对指定服务器的长连接请求,服务器端则可以不停地返回数据,相对于第一种方式,这种方式跟传统的服务器推则更接近。

  流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务 器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。

  缺点:这种机制在用户体验上有一点问题,需要针对不同的浏览器设计不同的方案来改进 用户体验,同时这种机制在并发比较大的情况下,对服务器端的资源是一个极大的考验。

原文地址:https://www.cnblogs.com/hudunyu/p/11405085.html

时间: 2024-07-31 05:08:31

前端随心记---------Ajax,Comet,Websocket的相关文章

前端随心记---------Ajax原理及实现跨域方法

Ajax原理: Ajax的原理简单来说就是通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JavaScript来操作dom从而更新页面.这其中最关键的一步就是从服务器获得请求数据. XmlHttpRequest是Ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术.简单的说,也就是JavaScript可以 及时向服务器提出请求和处理响应,而不阻塞用户,达到无刷新的效果. ajax实际上是异步的javascript和xml. 原生js实现aja

前端随心记---------Axios/fetch/ajax的区别

一.jQuery  ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱. JQuery ajax 是对原生

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

前端随心记---------前海面试汇总

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.

前端随心记(一)

前端 基础易错题(一) 案例一::介绍js原型链继承原理,以及prototype和--proto--的区别! 1.任何一个构造函数都有一个属性prototype叫做构造函数的原型,是一个对象,并且该对象默认情况下指向Object实例,constructor指向当前构造函数,--proto--指向Object.protopyte. 2.使用构造函数实例化的对象存在一个--proto--属性,指向当前构造函数的prototype. 3.当我们调用实例对象的属性和方法时,先在自身上面进行查找[自己身上

前端随心记---------vuejs基础学习3.0

watch ch 和cpmpute的区别: 1.watch 表示监听某个模型变量的状态变化.watch监视的东西多一些,computed所依赖的东西都写在一个函数里. 2.特殊场景:如果业务出现了异步操作(回调函数)则这个时候computed是存在返回值,不能在使用,但是watch里面的没有返回值的概念,可以进行异步代码的调用. 小案例代码: <script type="text/javascript"> var vm = new Vue({ el: '#box', dat

前端随心记---------React简介(1)

React 简介: React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React诞生的原因 主要是当时市面上的这些框架都无法满足 facebook 公司的业务需求 (1. 数据量很大,数据不好管理

前端随心记---------vue3.0终于来了,作者已公布源码

Vue3.0 何去何从? 就在国庆的第五天,10月5日凌晨,web前端开发框架Vuejs的作者:尤雨溪在微博宣布Vue3.0版本终于要面正式推出了!  其实,在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0 的更新计划.方向进行了详细阐述. 1.更快 Virtual DOM 完全重写,mounting & patching 提速 100% : 更多编译时(compile-time

前端随心记---------深拷贝与浅拷贝

深拷贝与浅拷贝 在前端js里面的数据类型分为两大类: 1.基本数据类型(数据传递:值拷贝) var a = 12; var b = a; // 赋值操作,是把 a 地址里面对应的值赋值给了 变量b 所对应的地址空间. b = 24; a; // 不会受到影响 数据传递:值拷贝 2.复合数据类型(引用数据类型) var obj = {id: 1, username: 'andy', todos: ['吃饭', '睡觉']}; // 复合数据类型 var xiaoming = obj; // 复合数