HTML5的WebSocket协议深入分析

1、背景

  很多网站为了实现推送技术，所用的技术都是Ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5新增的一些新协议WebSocket,可以提供在单个TCP连接上提供全双工，双向通信，能够节省服务器资源和带宽，并且能够实时进行通信。

 

2、WebSocket介绍

  传统的http也是一种协议，WebSocket是一种协议，使用http服务器无法实现WebSocket，

 

2.1.浏览器支持情况

 

ASP站长网基本主流浏览器都支持

 

 

 

2.2.优点

 

相对于http有如下好处：

 

1.客户端与服务器只建立一个TCP连接，可以使用更少的连接。

2.WebSocket服务器端可以主动推送数据到客户端，更灵活高效。

3.更轻量级的协议头，减少数据传送量。

对比轮训机制

 

 

 

3、WebSocket用法

  我们了解WebSocket是什么，有哪些优点后，怎么使用呢？

 

3.1.WebSocket创建

 

WebSocket使用了自定义协议，url模式与http略有不同，未加密的连接是ws://，加密的连接是wss://，WebSocket实例使用new WebSocket()方法来创建，

 

var ws = new WebSocket(url, [protocol] );

第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

 

3.2.WebSocket属性

 

当创建ws对象后，readyState为ws实例状态，共4种状态

 

0 表示连接尚未建立。

 

1 表示连接已建立，可以进行通信。

 

2 表示连接正在进行关闭。

 

3 表示连接已经关闭或者连接不能打开。

 

Tips：在发送报文之前要判断状态，断开也应该有重连机制。