WebSockets通信
Web Sockets是H5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。
使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动转为了主动。
API的基本用法
要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL字符串。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。
if(window.WebSocket){ //进行检测，确保浏览器支持WebSocket
var webSocket=new WebSocket("ws://localhost:8005/socket");
}
打开socket后只需要等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。
WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。
webSocket.onopen=function(event)
{
//开始通信时的处理
webSocket.send("Hello WebSocket!");
}
webSocket.onmessage=function(event)
{
var data=event.data;
}
webSocket.onclose=function(event)
{
//结束通信时的处理
}
当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之间前），可以采用send方法来向服务器发送数据。只能发送文本数据，但是可以使用JSON对象把任何JS对象转换成文本数据后进行发送。
document.getElementById("sendBtn").onclick=function(){
webSocket.send("data");
}
消息发送完成后，可以通过close方法来关闭socket，切断通信连接。
webSocket.close();
另外，还可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值：
- CONNECTING（数字值为0），表示正在连接。
- OPEN（数字值为1），表示已建立连接。
- CLOSING（数字值为2），表示正在关闭连接。
- CLOSED（数字值为2），表示已关闭连接。
实例
在运行前，首先要在服务器端指定好它的socket（套接字）应用程序，并在服务器的配置文件中指定好运行该socket应用程序的主机与端口，然后再运行配置好的服务器。
<html>
<meta charset="UTF-8"></meta>
<head>
<title>WebSockets客户端示例</title>
</head>
<script>
var webSocket;
function connect()
{
try
{
var readyState=new Array("正在连接","已建立连接","正在关闭连接","已关闭连接");
var host="ws://localhost:8005/socket";
webSocket=new WebSocket(host);
var message=document.getElementById("message");
message.innerHTML+="<p>Socket状态："+readyState[webSocket.readyState]+"</p>";
webSocket.onopen=function()
{
message.innerHTML+="<p>Socket状态："+readyState[webSocket.readyState]+"</p>";
}
webSocket.onmessage=function(msg)
{
message.innerHTML+="<p>接收信息："+msg.data+"</p>";
}
webSocket.onclose=function()
{
message.innerHTML+="<p>Socket状态："+readyState[webSocket.readyState]+"</p>";
}
}
catch(exception)
{
message.innerHTML+="<p>有错误发生</p>";
}
}
function send()
{
var text=document.getElementById("text").value;
var message=document.getElementById("message");
if(text=="")
{
message.innerHTML+="<p>请输入一些文字</p>";
return;
}
try
{
webSocket.send(text);
message.innerHTML+="<p>发送数据："+text+"</p>";
}
catch(exception)
{
message.innerHTML+="<p>发送数据出错</p>";
}
document.getElementById("text").value="";
}
function disconnect()
{
webSocket.close();
}
</script>
<body>
<h1>WebSockets客户端示例</h1>
<div id="message"></div>
<p>请输入一些文字</p>
<input id="text" type="text"></input>
<button id="connect" onclick="connect();">建立连接</button>
<button id="send" onclick="send();">发送数据</button>
<button id="disconnect" onclick="disconnect();">断开连接</button>
</body>
</html>
