翻看之前写的 Highcharts使用总结 和 前后台交互之传参方式，想对 WebSocket 单独写一个使用总结。
WebSocket 是 H5 新出的一种协议，为解决客户端与服务端实时通信而产生的技术。
通过 HTTP/HTTPS 协议进行三次握手后创建一个用于交换数据的 TCP连接，此后服务端与客户端通过此 TCP 连接进行实时通信，任意时刻都可以相互推送消息，也允许跨域通信。（三.2）
比较：Ajax 轮询方式，客户端隔一段时间询问服务器，看是否有数据，是客户端主动请求的。
XHR 受到域的限制。
Long Poll 长轮询原理跟 Ajax 差不多，都是轮询方式，不过采取的是阻塞模型，即客户端发起连接后，如果没消息，就一直不返回Response给客户端，直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
二、简明入门。
1、创建一个新的 WebSocket 对象：
var Socket = new WebSocket(url,[protocal]);
参数解释： （1）url : 要连接的URL ； （2）[protocal] : 可选，指定一个服务器支持的协议。
2、WebSocket 属性：
（1） Socket.readyState —— readyState 代表 ReadOnly 属性的状态。
取值：0 —— 连接尚未建立；
1 —— 连接已经建立；
2 —— 连接正在关闭；
3 —— 连接已经关闭或不可用。
（2）Socket.bufferedAmount —— 读属性的 bufferedAmount 代表文本的字节数，utf-8 的排列使用 send() 方法。
3、WebSocket 事件：
| 事件 | 处理程序 | 说明 |
| open | Socket.onopen | 发生在套接字建立连接 |
| message | Socket.onmessage | 发生时客户端收到来自服务器的数据 |
| error | Socket.onerror | 发生时有通信错误 |
| close | Socket.onclose | 发生在连接关闭 |
4、WebSocket 方法：
（1）Socket.send() —— send(data) 方法用来连接传输数据；
（2）Socket.close() —— close()方法将被用于终止任何现有连接。
三、用法示例。
<a href="javascript:WebSocketTest()">点击运行WebSocket</a>
function WebSocketTest() { if ("WebSocket" in window) { alert("WebSocket is supported by your Browser!"); // 打开WebSocket var ws = new WebSocket("ws://127.0.0.1:2012"); ws.onopen = function() { // Web Socket is connected, send data using send() ws.send("121314"); alert("Message is sending"); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert("Message is received"); }; ws.onclose = function() { // websocket is closed alert("Connection is closed"); }; } else { // The browser doesn't support WebSocket alert("WebSocket NOT supported by your Browser!!!"); } }
四、项目实例。
项目用于物流仓库，管理仓库货架货位、货位灯、出库入库统计以及仓库实时温湿度统计显示。采用 WebSocket 和服务器连接，获取接口数据比较方便。
页面有显示“服务器状态”的红绿色圆形：
<div class="pull-right"> <span>服务器状态：</span> <span id="wsServerStatus">未连接</span> <div id="sx" style="width:12px;height:12px;border-radius:6px;background-color:red;" class="inline"></div> </div>
红色代表“未连接”，绿色代表“连接”。
页面加载时建立连接：
<script>
var ws;
var SocketCreated = false;
window.onload = function Connect() {
if (SocketCreated || (ws.readyState == 0 || ws.readyState == 1)) {
// readyState属性表示ReadOnly属性的状态。等于0或者1表示连接未建立
SocketCreated = false;
ws.close();
document.getElementById("wsServerStatus").innerHTML = "连接未建立";
document.getElementById("sx").style.background = "red";
} else {
document.getElementById("wsServerStatus").innerHTML = "准备连接到服务器 ...";
if ("WebSocket" in window) {
ws = new WebSocket("ws://192.168.1.108:2012");
}else if("MozWebSocket" in window) {
ws = new MozWebSocket("ws://192.168.1.108:2012");
}
SocketCreated = true;
ws.onopen = WSonOpen;
ws.onmessage = WSonMessage;
ws.onclose = WSonClose;
ws.onerror = WSonError;
}
};
function WSonOpen() {
document.getElementById("wsServerStatus").innerHTML = "连接已建立";
document.getElementById("sx").style.background = "green";
};
function WSonMessage(event) {
var msg = JSON.parse(event.data);
switch (msg.key) {
case "/device/data":
case "/device/status":
var n = document.getElementById("content-main").childElementCount;
for (var i = 1; i < n; i++) {
try{
var m = document.getElementById("content-main").children[i];
m.contentWindow.ParseValue(msg.body);
}catch(err){
alert("error:" + err);
}
}
break;
}
};
function WSonClose() {
document.getElementById("wsServerStatus").innerHTML = "连接已关闭";
document.getElementById("sx").style.background = "red";
};
function WSonError() {
document.getElementById("wsServerStatus").innerHTML = "远程连接中断";
document.getElementById("sx").style.background = "red";
};
function WsSend(val) {
ws.send(val);
}
</script>