WebSocket
說到網絡協議不得不說 HTTP，但是HTTP 協議有一個明顯的缺陷：通信只能由客戶端發起。
服務器數據發送變化並不能主動告知客戶端，而需要讓客戶端不斷輪詢以檢查服務器數據是否變化。
效率低不說，還很浪費資源。
在此背景下，HTML5 定義了 WebSocket協議，可在單個TCP連接上進行 全雙工通信 ，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。
Websocket 使用 ws 或 wss 的 統一資源標誌符（URI）。其中 wss 表示使用了 TLS的Websocket。
ws://example.com/wsapi
wss://secure.example.com/wsapi
Websocket 與 HTTP 和 HTTPS 使用相同的 TCP端口，可以繞過大多數防火牆的限制。默認情況下，Websocket 協議使用 80端口；運行在 TLS 之上時，默認使用 443端口。
本文服務器端採用的是 NodeJs
可戳本處 進行下載
同時配置 cnpm（npm淘寶鏡像）
npm install -g cnpm --registry=https://registry.npm.taobao.org
驗證：
cnpm -v
Project
本文實例目錄：
┌ node_modules
├ client.html
└ server.js
目前僅實現文本交互。
庫包
服務器端採用了nodejs-websocket 庫（可戳）
安裝：
cnpm install nodejs-websocket
出現以上結果則在該目錄下會自動生成 node_modules 文件夾
-
node_modules
服務端
var ws = require("nodejs-websocket");
console.log("Connecting ...");
var server = ws.createServer(function(conn){
conn.on("text",function(str){
//服務端打印接收到的數據
console.log("News:" + str);
//接收到的數據打上標記“Server-”，再發送回客戶端
conn.sendText("Server-"+str);
});
conn.on("close",function(code,reason) {
console.log("Disconnected.");
});
conn.on("error",function(code,reason) {
console.log("Error.")
});
}).listen(8848);
console.log("Server runing!");
-
server.js
客戶端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game1 Test Demo</title>
</head>
<body>
<div id="mess">正在連接...</div>
<div>
<button id="state1" >第一重</button>
<button id="state2">第二重</button>
<button id="state3">第三重</button><br><br>
<a> 已發送：</a>
<a id="sendnews"></a><br>
<a>已接收:</a>
<a id="receivenews"></a>
</div>
<script>
var mess = document.getElementById("mess");
if(window.WebSocket){
//這裏修改爲本機IP地址
var ws = new WebSocket('ws://10.0.2.15:8848');
ws.onopen = function(e){
console.log("連接服務器成功");
mess.innerHTML = "連接成功"
ws.send("TestClient");
}
ws.onclose = function(e){
console.log("服務器關閉");
mess.innerHTML = "服務器關閉"
}
ws.onerror = function(){
console.log("連接出錯");
mess.innerHTML = "連接出錯"
}
//收到服務器數據後的回調函數
ws.onmessage = function(e){
document.getElementById("receivenews").innerHTML=e.data;
}
//設置點擊事件
document.getElementById("state1").onclick = function(e){
ws.send("昨夜西風凋碧樹，獨上西樓，望盡天涯路。");
document.getElementById("sendnews").innerHTML="昨夜西風凋碧樹，獨上西樓，望盡天涯路。"
}
document.getElementById("state2").onclick = function(e){
ws.send("衣帶漸寬終不悔，爲伊消得人憔悴。");
document.getElementById("sendnews").innerHTML="衣帶漸寬終不悔，爲伊消得人憔悴。"
}
document.getElementById("state3").onclick = function(e){
ws.send("衆裏尋他千百度，驀然回首，那人卻在燈火闌珊處。");
document.getElementById("sendnews").innerHTML="衆裏尋他千百度，驀然回首，那人卻在燈火闌珊處。"
}
}
</script>
</body>
</html>
-
client.html
測試
先開啓服務器
node server.js
再打開 client.html
