WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信。
Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建，用于双向推送消息。
2、HTML5 WebSockets API
WebSocket对象
WebSocket在DOM中是window对象的子对象，它具有：
- WebSocket(url)构造函数。
- readyState。只读属性，其值可以是CONNECTING（0），OPEN（1），CLOSED（3）。
- boolean send(in DOMString data)
- void close()两个方法，分别用于发送消息和关闭WebSocket连接
onopen, onmessage, 和onclosee三个事件属性，分别对open, message和close三个WebSocket事件。
1、浏览器支持情况检测
检测浏览器支持情况
function loadDemo() {
if (window.WebSocket) {
//supported
} else {
// not supported
}
}
2、WebSocket对象的创建和服务器连接
要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
url = "ws://localhost:8080/echo";
w = new WebSocket(url);
建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。
w = new WebSocket(url, ["proto1", "proto2"]);
假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。
onopen = function(e) {
//确定服务器选择的协议
log(e.target.protocol);
}
3、添加事件监听器
WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件：open、close和message对应有三个事件监听器onopen,onmessage,onclose来处理连接的生命周期的每个阶段,当然还可以是onerror来监听错误，如以下示例所示。
w.onopen = function() {
log("open");
w.send("send message");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
w.onerror = function(e) {
log("error");
}
4、发送消息
当socket处于打开状态（即onopen之后，onclose之前），可以用send方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。
w.send();
你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
document.getElementById("sendButton").onclick = function() {
if (w.bufferedAmount < bufferThreshold) {
w.send(document.getElementById("inputMessage").value);
}
}
WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例
var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
w.send(a.buffer);
常量-readyState属性
这些常量是readyState属性的取值，可以用来描述WebSocket连接的状态。
| Constant | Value | Description |
|---|---|---|
| CONNECTING | 0 | 连接还没开启。 |
| OPEN | 1 | 连接已开启并准备好进行通信。 |
| CLOSING | 2 | 连接正在关闭的过程中。 |
| CLOSED | 3 | 连接已经关闭，或者连接无法建立。 |
3.实例
<!DOCTYPE html>
<html>
<head>
<title>webSocket实例</title>
</head>
<body>
<h2>webSocket实例</h2>
<input type="text" id="text">
<button type="" id="connect" onclick="connect()">建立连接</button>
<button type="" id="send" onclick="send()">发送数据</button>
<button type="" id="disconnect" onclick="disconnect()">断开连接</button>
<div id="message"></div>
<script type="text/javascript">
var socket;
var readyState = ["正在连接","已经连接","正在断开","已经断开"];
var message = document.getElementById('message');
function connect(){
try{
var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){
// socket.onerror = function(){
message.innerHTML += "<p>发生错误！"+"</p>";
// }
}
}
function send(){
var text = document.getElementById('text').value;
try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
}
