为什么我们需要HTML5 WebSocket

本文涉及的产品
数据传输服务 DTS,数据迁移 small 3个月
推荐场景:
MySQL数据库上云
数据传输服务 DTS,数据同步 1个月
简介: <p style="margin-top:15px; margin-bottom:15px; padding:8px; font-size:14px; color:white; font-family:宋体,Calibri; background-color:rgb(128,128,128)"><span style="line-height:28.8px">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 实现方式的网络负载对比图

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

欢迎大家关注我的博客,关注我的微博,如有疑问,请加qq群:454796847、135430763 共同进步!

相关实践学习
RocketMQ一站式入门使用
从源码编译、部署broker、部署namesrv,使用java客户端首发消息等一站式入门RocketMQ。
Sqoop 企业级大数据迁移方案实战
Sqoop是一个用于在Hadoop和关系数据库服务器之间传输数据的工具。它用于从关系数据库(如MySQL,Oracle)导入数据到Hadoop HDFS,并从Hadoop文件系统导出到关系数据库。 本课程主要讲解了Sqoop的设计思想及原理、部署安装及配置、详细具体的使用方法技巧与实操案例、企业级任务管理等。结合日常工作实践,培养解决实际问题的能力。本课程由黑马程序员提供。
目录
相关文章
|
8月前
|
移动开发 缓存 网络协议
html5:webSocket 基础使用
html5:webSocket 基础使用
76 0
|
移动开发 前端开发 网络协议
前端祖传三件套HTML的HTML5之WebSocket
当今互联网技术飞速发展,尤其是前端领域的变化更是日新月异。在这样一个快速更新的环境下,我们不得不重新审视前端祖传三件套之一的HTML技术,并学习其中的最新进展。本文将着重介绍HTML5中的WebSocket技术。
83 0
|
前端开发 HTML5 移动开发
【物联网智能网关-13】Html5:Canvas+WebSocket实现远程实时通信(上)
基于Html5的Canvas和WebSocket技术详细介绍远程实时通信的实现
1320 0
|
Web App开发 移动开发 程序员
好程序员带你认识HTML5中的WebSocket
  好程序员带你认识HTML5中的WebSocket,在HTML5 规范中,我最喜欢的Web技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。
4117 0
|
Web App开发 移动开发 网络协议
|
Web App开发 移动开发 网络协议
|
安全 HTML5 移动开发
|
Web App开发 前端开发 Go
html5+go+websocket简单实例代码
这次的就直接发放代码截图吧,应该是用go语言做后台一个简易的聊天,这里没用到什么特别的知识,最朴实的来实现效果,主要目的是分享下h5怎么用websocket,go搭建websocket服务的主要部分。   go代码部分: 1 // WebChat project main.
1192 0