什么是 WebSocket？
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket 对比AJAX轮询的优势
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。
轮询是指浏览器每隔特定时间（如 1 秒）向服务器发送 HTTP 请求，服务器再将最新数据返回给浏览器。
这种传统轮询模式缺点很明显，需要浏览器不断地向服务器发送请求。
发送的HTTP请求可能包含较长的头部，其中有效数据却很少，这样就浪费了很多的宽带资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发起建立 WebSocket 连接的请求，连接建立后，客户端与服务器就能经 TCP 连接直接交换数据了。
当你建立 Web Socket 连接后，可以通过 send() 方法向服务器发送数据，并通过 onmessage 事件接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象：
var Socket = new WebSocket(url,[protocol]);这段代码告诉我们，第一个参数 url指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：
| 属性 | 描述 |
|---|---|
Socket.readyState |
只读属性 readyState 表示连接状态，可以是以下值：
|
Socket.bufferedAmount |
只读属性 bufferedAmount 表示已被 send() 放入队列中等待传输，但还没有发出的 UTF-8 文本字节数。
|
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
open |
Socket.onopen |
连接建立时触发。 |
message |
Socket.onmessage |
客户端接收服务端数据时触发。 |
error |
Socket.onerror |
通信发生错误时触发。 |
close |
Socket.onclose |
连接关闭时触发。 |
WebSocket 方法
| 方法 | 描述 |
|---|---|
Socket.send() |
使用连接发送数据。 |
Socket.close() |
关闭连接。 |
WebSocket 实例
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
客户端的 HTML 和 JavaScript
目前大部分浏览器支持 WebSocket() 接口，你可以在以下浏览器中尝试实例： Chrome, Mozilla, Opera 和 Safari。
websocket.html 文件内容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket 已连接上，使用 send() 方法发送数据
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function()
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
</html>