html 自动连接websocket_Html5学习|websocket简单入门

今天说起及时通信的时候，突然被问到时用推的方式，还是定时接受的方式，由于之前页面都是用传统的ajax处理，可能对ajax的定时获取根深蒂固了，所以一时之间没有相同怎么会出现推的方式呢?

当被提及websocket的时候突然头脑中搭上了这根线。

　一、WebSocket是HTML5出的东西(协议)，也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的(长连接，循环连接的不算)

首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说websockt和http有交集，但是并不是全部。

另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。通俗来说，你可以用HTTP协议传输非Html数据，就是这样=。=是不同层次的东西。

　　二、websocket的特点

写在别的特点之前，最重要的：是可以从服务器向客户端进行消息的推送。

(1)建立在 TCP 协议之上，服务器端的实现比较容易。

(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

(3)数据格式比较轻量，性能开销小，通信高效。

(4)可以发送文本，也可以发送二进制数据。

(5)没有同源限制，客户端可以与任意服务器通信。

(6)协议标识符是ws(如果加密，则为wss)，服务器网址就是 URL。

三、websocket简单API

1.构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:8080');

执行上面语句之后，客户端就会与服务器进行连接。

2.状态返回

readyState属性返回实例对象的当前状态，共有四种。

CONNECTING：值为0，表示正在连接。

OPEN：值为1，表示连接成功，可以通信了。

CLOSING：值为2，表示连接正在关闭。

CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

下面是一个示例。

switch (ws.readyState) {

case WebSocket.CONNECTING:

// do something

break;

case WebSocket.OPEN:

// do something

break;

case WebSocket.CLOSING:

// do something

break;

case WebSocket.CLOSED:

// do something

break;

default:

// this never happens

break;

}

3.回调函数

实例对象的onopen属性，用于指定连接成功后的回调函数。

ws.onopen = function () {

ws.send('Hello Server!');

}

如果要指定多个回调函数，可以使用addEventListener方法。

ws.addEventListener('open', function (event) {

ws.send('Hello Server!');

});

4.关闭回调函数

实例对象的onclose属性，用于指定连接关闭后的回调函数。

ws.onclose = function(event) {

var code = event.code;

var reason = event.reason;

var wasClean = event.wasClean;

// handle close event

};

ws.addEventListener("close