博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web端即时通讯
阅读量:6990 次
发布时间:2019-06-27

本文共 1697 字,大约阅读时间需要 5 分钟。

hot3.png

comet技术

浏览器作为 Web 应用的前台,自身的处理功能比较有限。浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广。在 Web 应用中,浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果,通过在浏览器端发送异步请求,提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统,对任何用户来说,可以认为服务器是另外一个用户。现有 AJAX 技术的发展并不能解决在一个多用户的 Web 应用中,将更新的信息实时传送给客户端,从而用户可能在“过时”的信息下进行操作。而 AJAX 的应用又使后台数据更新更加频繁成为可能。

随着互联网的发展,web 应用层出不穷,也不乏各种网站监控、即时报价、即时通讯系统,为了让用户得到更好的体验,服务器需要频繁的向客户端推送信息。开发者一般会采用基于 AJAX 的长轮询方式或者基于 iframe 及 htmlfile 的流方式处理。当然有些程序需要在客户端安装各种插件( Java applet 或者 Flash )来支持性能比较良好的“推”信息。

http协议中的长、短连接

短连接的操作步骤是:建立连接——数据传输——关闭连接...建立连接——数据传输——关闭连接

长连接的操作步骤是:建立连接——数据传输...(保持连接)...数据传输——关闭连接

长连接与短连接的不同主要在于client和server采取的关闭策略不同。短连接在建立连接以后只进行一次数据传输就关闭连接,    而长连接在建立连接以后会进行多次数据数据传输直至关闭连接(长连接中关闭连接通过Connection:closed头部字段)。

轮询

轮询是一种“拉”取信息的工作模式。设置一个定时器,定时询问服务器是否有信息,每次建立连接传输数据之后,链接会关闭。

长轮询

只要服务器断开连接,客户端马上连接,不让他有一刻的休息时间,这就是长轮询。

数据流

数据流方式,在建立的连接断开之前,也就是 readystate 状态为 3 的时候接受数据,但是麻烦的事情也在这里,因为数据正在传输,你拿到的 xhr.response 可能就是半截数据,所以呢,最好定义一个数据传输的协议,比如前2个字节表示字符串的长度,然后你只获取这个长度的内容,接着改变游标的位置。

在ajax还没有进入web专题之前,我们已经拥有了一个法宝,那就是iframe,利用iframe照样可以异步获取数据,对于低版本IE可以使用iframe开接受数据流。

websocket

websocket是前端一个神器,ajax用了这么久了,相关技术也是很成熟,不过要实现个数据的拉取确实十分不易,从上面的代码中也看到了,各种兼容性问题,各种细节处理问题,自从有了websocket,哈哈,一口气上五楼.

EventSource

情非得已就别考虑这第六种方式了,虽说兼容性最好,要是不懂as,出了点bug你也不会调试。

具体实现方法:在 HTML 页面中内嵌入一个使用了 XMLSocket 类的 Flash 程序。JavaScript 通过调用此 Flash 程序提供的套接口接口与服务器端的套接口进行通信。JavaScript 在收到服务器端以 XML 格式传送的信息后可以很容易地控制 HTML 页面的内容显示。

小结

对于轮询:这种方式应该是最没技术含量的,操作起来最方便,不过是及时性不强,把定时器的间隔时间设置的短一些可以稍微得到缓和。

对于长连接:算是比较不错的一个web通讯方式,不过每次断开连接,比较耗服务器资源,客户端到无所谓。

对于数据流:他和长轮询不同之处是接受数据的时间不一样,数据流是readystate为3的时候接受,低版本IE不太兼容,处理起来略麻烦,而且还要自己设计数据传输协议。不过他对资源的消耗比上面几种都可观。

对于websocket与EventSource:只有高级浏览器支持

转载于:https://my.oschina.net/bosscheng/blog/344185

你可能感兴趣的文章
排序算法上——冒泡排序、插入排序和选择排序
查看>>
JAVA 8 函数式接口--Supplier
查看>>
Android HTTP
查看>>
Dockerfile多阶段构建原理和使用场景
查看>>
476-数字的补数
查看>>
七牛云赵之健:多维度融合赋能视频 AI 的实践
查看>>
Android 9 Pie震撼来袭 同步登陆WeTest
查看>>
vue+element Form键盘回车事件页面刷新解决
查看>>
CSS3中的box-sizing
查看>>
gracehttp: 优雅重启 Go 程序(热启动 - Zero Downtime)
查看>>
vue-cli中配置全局sass变量
查看>>
云计算新风向:多云战略优化企业云支出
查看>>
gweb总结之router
查看>>
【跃迁之路】【478天】刻意练习系列237(2018.05.29)
查看>>
Windows改Linux(一),新建Ubuntu虚拟机小白向导
查看>>
HTML5调用手机前置摄像头或后置摄像头拍照,canvas显示,经过Android测试
查看>>
如何做好 Android 端音视频测试?
查看>>
element 源码学习(番外篇) —— SASS五分钟快速入门
查看>>
五个非常实用的机器学习资源
查看>>
关于一个插图的翻译
查看>>