WebSockets通信
Web Sockets是H5提供的在web應(yīng)用程序中客戶端與服務(wù)器端之間進行的非HTTP的通信機制。
??使用Web Sockets API可以在服務(wù)器與客戶端之間建立一個非HTTP的雙向連接。這個連接是實時的，也是永久的，除非被顯示關(guān)閉。這意味著當服務(wù)器想向客戶端發(fā)送數(shù)據(jù)時，可以立即將數(shù)據(jù)推送到客戶端的瀏覽器中，無需重新建立連接。只要客戶端有一個被打開的socket（套接字）并且與服務(wù)器建立了連接，服務(wù)器就可以把數(shù)據(jù)推送到這個socket上，服務(wù)器不再需要輪詢客戶端的請求，從被動轉(zhuǎn)為了主動。
API的基本用法
要連接通信端點，只需要創(chuàng)建一個新的WebSocket實例，并提供希望連接的對端URL字符串。ws://和wss://前綴分別表示W(wǎng)ebSocket連接和安全的WebSocket連接。
if(window.WebSocket){ //進行檢測，確保瀏覽器支持WebSocket
var webSocket=new WebSocket("ws://localhost:8005/socket");
}
打開socket后只需要等待事件發(fā)生，而不需要主動向服務(wù)器輪詢，所以需要在WebSocket對象中添加回調(diào)函數(shù)來監(jiān)聽事件。
??WebSocket對象有三個事件：open、close和message。當連接建立時觸發(fā)open事件，當收到消息時觸發(fā)message事件，當WebSocket連接關(guān)閉時觸發(fā)close事件。
webSocket.onopen=function(event)
{
//開始通信時的處理
webSocket.send("Hello WebSocket!");
}
webSocket.onmessage=function(event)
{
var data=event.data;
}
webSocket.onclose=function(event)
{
//結(jié)束通信時的處理
}
當socket處于打開狀態(tài)（即調(diào)用onopen監(jiān)聽程序之后，調(diào)用onclose監(jiān)聽程序之間前），可以采用send方法來向服務(wù)器發(fā)送數(shù)據(jù)。只能發(fā)送文本數(shù)據(jù)，但是可以使用JSON對象把任何JS對象轉(zhuǎn)換成文本數(shù)據(jù)后進行發(fā)送。
document.getElementById("sendBtn").onclick=function(){
webSocket.send("data");
}
消息發(fā)送完成后，可以通過close方法來關(guān)閉socket，切斷通信連接。
webSocket.close();
另外，還可以通過讀取readyState的屬性值來獲取WebSocket對象的狀態(tài)。readyState屬性存在以下幾種屬性值：
- CONNECTING（數(shù)字值為0），表示正在連接。
- OPEN（數(shù)字值為1），表示已建立連接。
- CLOSING（數(shù)字值為2），表示正在關(guān)閉連接。
- CLOSED（數(shù)字值為2），表示已關(guān)閉連接。
實例
在運行前，首先要在服務(wù)器端指定好它的socket（套接字）應(yīng)用程序，并在服務(wù)器的配置文件中指定好運行該socket應(yīng)用程序的主機與端口，然后再運行配置好的服務(wù)器。
<html>
<meta charset="UTF-8"></meta>
<head>
<title>WebSockets客戶端示例</title>
</head>
<script>
var webSocket;
function connect()
{
try
{
var readyState=new Array("正在連接","已建立連接","正在關(guān)閉連接","已關(guān)閉連接");
var host="ws://localhost:8005/socket";
webSocket=new WebSocket(host);
var message=document.getElementById("message");
message.innerHTML+="<p>Socket狀態(tài)："+readyState[webSocket.readyState]+"</p>";
webSocket.onopen=function()
{
message.innerHTML+="<p>Socket狀態(tài)："+readyState[webSocket.readyState]+"</p>";
}
webSocket.onmessage=function(msg)
{
message.innerHTML+="<p>接收信息："+msg.data+"</p>";
}
webSocket.onclose=function()
{
message.innerHTML+="<p>Socket狀態(tài)："+readyState[webSocket.readyState]+"</p>";
}
}
catch(exception)
{
message.innerHTML+="<p>有錯誤發(fā)生</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>發(fā)送數(shù)據(jù)："+text+"</p>";
}
catch(exception)
{
message.innerHTML+="<p>發(fā)送數(shù)據(jù)出錯</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();">發(fā)送數(shù)據(jù)</button>
<button id="disconnect" onclick="disconnect();">斷開連接</button>
</body>
</html>
