为什么我们需要HTML5 WebSocket

HTML5 WebSocket简介

    HTML5作为下一代的 Web 标准,它拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket等等。这其中有“Web 的 TCP ”之称的WebSocket格外吸引开发人员的注意。WebSocket的出现使得浏览器提供对Socket的支持成为可能,从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道。Web开发人员可以非常方便地使用WebSocket构建实时web应用,开发人员的手中从此又多了一柄神兵利器。

实时Web应用的窘境

    Web应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事,但是对于那些实时要求比较高的应用来说,比如说在线游戏、股票查询,在线证券、设备监控、新闻在线播报、RSS订阅推送等等,当客户端浏览器准备呈现这些信息的时候,这些信息在服务器端可能已经过时了。所以保持客户端和服务器端的信息同步是实时 Web 应用的关键要素,对 Web 开发人员来说也是一个难题。在WebSocket规范出来之前,开发人员想实现这些实时的Web应用,不得不采用一些折衷的方案,其中最常用的就是轮询(Polling)和Comet技术。而Comet 技术实际上是轮询技术的改进,又可细分为两种实现方式,一种是长轮询机制,一种称为流技术。下面我们简单介绍一下这几种技术:

轮询:

    这是最早的一种实现实时Web应用的方案。客户端以一定的时间间隔向服务端发出请求,以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是,当客户端以固定频率向服务器发起请求的时候,服务器端的数据可能并没有更新,这样会带来很多无谓的网络传输,所以这是一种非常低效的实时方案。

长轮询:

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

流:

    流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题,需要针对不同的浏览器设计不同的方案来改进用户体验,同时这种机制在并发比较大的情况下,对服务器端的资源是一个极大的考验。 综合这几种方案,您会发现这些目前我们所使用的所谓的实时技术并不是真正的实时技术,它们只是在用Ajax方式来模拟实时的效果,在每次客户端和服务器端交互的时候都是一次HTTP的请求和应答的过程,而每一次的HTTP请求和应答都带有完整的HTTP头信息,这就增加了每次传输的数据量,而且这些方案中客户端和服务器端的编程实现都比较复杂,在实际的应用中,为了模拟比较真实的实时效果,开发人员往往需要构造两个HTTP连接来模拟客户端和服务器之间的双向通讯,一个连接用来处理客户端到服务器端的数据传输,一个连接用来处理服务器端到客户端的数据传输,这不可避免地增加了编程实现的复杂度,也增加了服务器端的负载,制约了应用系统的扩展性。

WebSocket 的拯救

    HTML5 WebSocket设计出来的目的就是要取代轮询和Comet技术,使客户端浏览器具备像C/S架构下桌面系统的实时通讯能力。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求,连接建立以后,客户端和服务器端就可以通过TCP连接直接交换数据。因为WebSocket连接本质上就是一个TCP连接,所以在数据传输的稳定性和数据传输量的大小方面,和轮询以及Comet技术比较,具有很大的性能优势。Websocket.org网站对传统的轮询方式和WebSocket调用方式作了一个详细的测试和比较,将一个简单的Web应用分别用轮询方式和WebSocket方式来实现,在这里引用一下他们的测试结果图:

轮询和 WebSocket 实现方式的网络负载对比图

通过这张图可以清楚的看出,在流量和负载增大的情况下,WebSocket方案相比传统的Ajax轮询方案有极大的性能优势。这也是为什么我们认为WebSocket是未来实时Web应用的首选方案的原因。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏灯塔大数据

技术| Python的从零开始系列连载(三十一)

为了解答大家学习Python时遇到各种常见问题,小灯塔特地整理了一系列从零开始的入门到熟练的系列连载,每周五准时推出,欢迎大家学积极学习转载~

15140
来自专栏小小挖掘机

强化学习AC、A2C、A3C算法原理与实现!

跟着李宏毅老师的视频,复习了下AC算法,新学习了下A2C算法和A3C算法,本文就跟大家一起分享下这三个算法的原理及tensorflow的简单实现。

1.1K30
来自专栏嘉为科技的专栏

系统慢得一批?看数据库运维老司机如何做优化

原文链接:https://www.cnblogs.com/double-K/p/9210982.html

10630
来自专栏Hadoop实操

Hadoop SQL客户端工具之Dbeaver安装及使用

最近热心网友推荐了很多Hadoop平台的SQL客户端工具,Fayson在前面的文章《0459-如何使用SQuirreL通过JDBC连接CDH的Hive(方式一)...

46250
来自专栏目标检测和深度学习

斯坦福CS230官方指南:CNN、RNN及使用技巧速查(打印收藏)

作为全球计算机四大名校之一,斯坦福大学的CS230《深度学习》课程一直受到全球计算机学子和从业人员的热烈欢迎。

15730
来自专栏玄魂工作室

看代码学安全(12)误用htmlentities函数引发的漏洞

原文链接:https://zhuanlan.zhihu.com/p/47353814

11920
来自专栏Java架构沉思录

Spring事务你可能不知道的事儿

关于事务,简单来说,就是为了保证数据完整性而存在的一种工具,其主要有四大特性:原子性,一致性,隔离性和持久性。对于Spring事务,其最终还是在数据库层面实现的...

14870
来自专栏ACM算法日常

Re: 从零开始的程序设计竞赛(一)

转载声明:本文来源于知乎专栏《Dai 的程序设计竞赛瞎扯自动机 》,已获得原作者Dai@NeverLand的允许,禁止二次转载。

9220
来自专栏编程坑太多

「小程序JAVA实战」小程序视图之细说数据绑定(13)

10630
来自专栏zhisheng

《从0到1学习Flink》—— 如何自定义 Data Sink ?

前篇文章 《从0到1学习Flink》—— Data Sink 介绍 介绍了 Flink Data Sink,也介绍了 Flink 自带的 Sink,那么如何自定...

20230

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励