一、WebSocket与HTTP长轮询
WebSocket 属于HTML5 规范的一部分，提供的一种在单个 TCP 连接上进行全双工通讯的协议。允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。（Tomcat 8以上版本支持）
HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。
HTTP长轮询：客户端向服务器发送(http)Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
WebSocket与HTTP长轮询的通信机制如下：
二、客户端如何使用WebSocket
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
1. 创建 WebSocket 对象API
//第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
API：var webSocket = new WebSocket(url, [protocol] );
2. WebSocket 属性以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：
属性 描述Socket.readyState
只读属性 readyState 表示连接状态，可以是以下值：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
3. WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：
事件 事件处理程序 描述open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
4. WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：
方法 描述Socket.send()
使用连接发送数据
Socket.close()
关闭连接
5. WebSocket 实例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <script type="text/javascript" src=""></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Testing WebSocket</title> </head> <script type="text/javascript"> var webSocket; $(document).ready(function() { //var IP = window.location.host; var url = "ws://your IP/demo/ws/websocket"; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { //建立客户端websocket webSocket = new WebSocket(url); } else { console.log("您的浏览器不支持WebSocket"); } //封装内部监听事件 function init(){ //连接发生错误的回调方法 webSocket.onerror = function(event) { console.log("webSocket连接发生错误."); }; //连接成功建立的回调方法 webSocket.onopen = function(event) { console.log("webSocket连接成功."); //心跳检测重置 heartCheck.start(); }; //接收到消息的回调方法 webSocket.onmessage = function(event) { //拿到任何消息都说明当前连接是正常的 if(event.data=="&"){ console.log("收到心跳回复"+event.data); }else{ console.log("接收到消息="+event.data); onMessage(event); } heartCheck.start(); }; //连接关闭的回调方法 // 断线重连 webSocket.onclose = function() { console.log("webSocket连接断开"); } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function() { webSocket.close(); console.log("窗口关闭，webSocket断开连接."); } } function onMessage(event) { setMessageInnerHTML(event.data); } function postToServer() { webSocket.send(document.getElementById("msg").value); console.log("向服务器发送消息="+document.getElementById("msg").value); document.getElementById("msg").value = ""; } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } function onClose(){ webSocket.close(); } }); //心跳检测 var heartCheck = { timeout: 10000, timeoutObj: null, serverTimeoutObj: null, start: function(){ console.log("start heartCheck"); var self = this; this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); this.timeoutObj = setTimeout(function(){ //这里发送一个心跳，后端收到后，返回一个心跳消息， console.log('发送心跳&'); webSocket.send("&"); self.serverTimeoutObj = setTimeout(function() { console.log(webSocket); console.log("服务器心跳回复超时"); webSocket.close(); }, self.timeout); }, this.timeout) } } </script> <body> <textarea readonly></textarea> <br /> <input type="text" /> <button type="submit">Send!</button> <button type="submit">End</button> <script type="text/javascript" src=""></script> </body> </html>