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
