背景
在传统方式下，很多网站为了实现即时通讯，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对伺服器发出HTTP request，然后由伺服器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向伺服器发出请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。
而比较新的技术去做轮询的效果是Comet，使用了AJAX。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源。
面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。WebSocket 是HTML5一种新的协议。它是实现了浏览器与伺服器的双向通讯。
简单的讲，通过WebSocket，可以在浏览器和服务器间建立一个TCP长连接，服务器可以实现主动推送数据至客户端。目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了（win8测试版中的IE10也是支持的）。
客户端
在支持WebSocket的浏览器中，可以直接在Javascript中通过WebSocket对象来实现通信。WebSocket对象主要通过onopen，onmessage，onclose即onerror四个事件实现对socket消息的异步响应。一个简单的示例如下：
var socket = new WebSocket("ws://localhost:8080/");
socket.onopen = function () {
alert("Socket has been opened!");
}
socket.onmessage = function (msg) {
alert(msg); //Awesome!
}
关于其详细信息可以查看W3网站上的WebSocket API
这里附一个网上找的简单的聊天页面的实现：
2 <head>
3 <title>WebSocket</title>
4 <style>
5 html, body {
6 font: normal 0.9em arial,helvetica;
7 }
8
9 #log {
10 width: 440px;
11 height: 200px;
12 border: 1px solid #7F9DB9;
13 overflow: auto;
14 }
15
16 #msg {
17 width: 330px;
18 }
19 </style>
20 <script>
21 var socket;
22
23 function init() {
24 var host = "ws://localhost:8080/";
25 try {
26 socket = new WebSocket(host);
27 socket.onopen = function (msg) {; };
28 socket.onmessage = function (msg) { log(msg.data); };
29 socket.onclose = function (msg) { log("connection closed."); };
30 }
31 catch (ex) { log(ex); }
32 $("msg").focus();
33 }
34
35 function send() {
36 var txt, msg;
37 txt = $("msg");
38 msg = txt.value;
39 if (!msg) { alert("Message can not be empty"); return; }
40 txt.value = "";
41 txt.focus();
42 try { socket.send(msg); } catch (ex) { log(ex); }
43 }
44
45 window.onbeforeunload = function () {
46 try {
47 socket.send('quit');
48 socket.close();
49 socket = null;
50 }
51 catch (ex) {
52 log(ex);
53 }
54 };
55
56
57 function $(id) { return document.getElementById(id); }
58 function log(msg) { $("log").innerHTML += "<br>" + msg; }
59 function onkey(event) { if (event.keyCode == 13) { send(); } }
60 </script>
61 </head>
62 <body onload="init()">
63 <h3>WebSocket</h3>
64 <br>
65 <br>
66 <div id="log"></div>
67 <input id="msg" type="textbox" onkeypress="onkey(event)" />
68 <button onclick="send()">Send</button>
69 </body>
70 </html>