JavaScript WebSocket 使用总结
翻看之前寫的Highcharts使用總結 和前后臺交互之傳參方式，想對WebSocket 單獨寫一個使用總結。
一、認識 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" 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>
View Code
五、WebSocket 小應用——聊天室
因為這是去年做的一個小東西，當時的公司后臺幫我寫了個聊天服務器，所以可以正常使用這個聊天室，挺好玩的，可以相互發送消息，但是現在我這里只有前端的(⊙o⊙)…
<div class="talk_div">
<div id="skm_LockPane" class="LockOff"></div>
<header id="form1" runat="server">
<h2>聊天室</h2>
<h4>點擊連接按鈕，會通過WebSocket發起連接，進行會話</h4>
</header>
<div class="talk_container">
<form>
服務器地址：<input type="text" id="Connection"><br>
用 戶 名：<input type="name" id="txtName">
<button id="ToggleConnection" type="button" onclick="ToggleConnectionClicked();">連接</button>
</form>
<div id="LogContainer" class="container"></div>
</div>
<footer id="SendDataContainer">
<input type="text" id="DataToSend" size="70">
<input type="button" id="SendData" value="發送" onclick="SendDataClicked();">
</footer>
</div>
View Code
var ws;
var SocketCreated = false;
var isUserloggedout = false;
function lockOn(str) {
var lock = document.getElementById('skm_LockPane'); // id="skm_LockPane" 空idv
if (lock) // 如果變量lock
lock.className = 'LockOn';
lock.innerHTML = str;
}
function lockOff() {
var lock = document.getElementById('skm_LockPane');
lock.className = 'LockOff';
}
/* 點擊 按鈕 */
function ToggleConnectionClicked() {
if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
//（SocketCreated = false）&&（連接未建立）。。。。readyState屬性表示ReadOnly屬性的狀態。等于0或者1表示連接未建立
lockOn("離開聊天室..."); // lockOn 頁面秒彈"離開聊天室..."
SocketCreated = false;
isUserloggedout = true;
ws.close();
} else {
lockOn("進入聊天室..."); // lockOn 頁面秒彈"進入聊天室..."
Log("準備連接到服務器 ...");
try {
if ("WebSocket" in window) {
ws = new WebSocket("ws://" + document.getElementById("Connection").value);
}
else if ("MozWebSocket" in window) {
ws = new MozWebSocket("ws://" + document.getElementById("Connection").value);
}
SocketCreated = true;
isUserloggedout = false;
} catch (ex) {
Log(ex, "ERROR");
return;
}
document.getElementById("ToggleConnection").innerHTML = "斷開";
ws.onopen = WSonOpen;
ws.onmessage = WSonMessage;
ws.onclose = WSonClose;
ws.onerror = WSonError;
}
};
function WSonOpen() {
lockOff();
Log("連接已建立!", "OK");
$("#SendDataContainer").show(); //輸入框顯現
console.log(1213); //控制臺輸出
};
function WSonMessage(event) {
Log(event.data);
};
function WSonClose() {
lockOff();
if (isUserloggedout)
Log("【" + document.getElementById("txtName").value + "】離開了聊天室！");
document.getElementById("ToggleConnection").innerHTML = "連接";
$("#SendDataContainer").hide();
};
function WSonError() {
lockOff();
Log("遠程連接中斷", "ERROR");
};
function SendDataClicked() {
if (document.getElementById("DataToSend").value.trim() != "") {
ws.send(document.getElementById("txtName").value + " 說:" + document.getElementById("DataToSend").value);
document.getElementById("DataToSend").value = "";
}
};
function Log(Text, MessageType) {
if (MessageType == "OK") Text = "<span style='color: green;'>" + Text + "</span>";
if (MessageType == "ERROR") Text = "<span style='color: red;'>" + Text + "</span>";
document.getElementById("LogContainer").innerHTML = document.getElementById("LogContainer").innerHTML + Text + "<br />";
var LogContainer = document.getElementById("LogContainer");
LogContainer.scrollTop = LogContainer.scrollHeight;
};
$(document).ready(function () {
$("#SendDataContainer").hide();
var WebSocketsExist = true;
try {
var dummy = new WebSocket("ws://192.168.1.201:2012");
} catch (ex) {
try {
webSocket = new MozWebSocket("ws://192.168.1.201:2012");
}
catch (ex) {
WebSocketsExist = false;
}
}
if (WebSocketsExist) {
Log("您的瀏覽器支持WebSocket. 您可以嘗試連接到聊天服務器!", "OK");
document.getElementById("Connection").value = "192.168.1.201:2012";
} else {
Log("您的瀏覽器不支持WebSocket。請選擇其他的瀏覽器再嘗試連接服務器。", "ERROR");
document.getElementById("ToggleConnection").disabled = true;
}
$("#DataToSend").keypress(function (evt) {
if (evt.keyCode == 13) {
$("#SendData").click();
evt.preventDefault();
}
})
});
View Code
輸入用戶名之后點擊按鈕連接到服務器：
因為沒有服務器可以連接，所以。。。。O(∩_∩)O哈哈~
在點擊斷開后，連接斷開，用戶離開：
前端后臺都會的可以玩一下，我剛開始的時候覺得好好玩，一直在那發消息哈哈~
六、 WebSocket 其他 。
1、所謂的 TCP 連接，即三次握手，還記得在學校的時候期末考試這個必考，啊哈哈
過程：（1）客戶端發送一個SYN包給服務器，然后等待應答。
（2）服務器端回應給客戶端一個ACK=1、SYN=1的 TCP 數據段。
（3）客戶必須再次回應服務器端一個ACK確認數據段。
2、WebSocket 和 Http 協議。
WebSocket 和 Http 協議都屬于應用層協議。
關系：當 WebSocket 建立握手連接時，數據是通過 HTTP 協議傳輸的，在建立連接后，真正的數據傳輸不需要 HTTP 協議參與。
3、WebSocket Server （web 服務器）
調用開源庫，如 PyWebSocket（python語言）、WebSocket-Node（js語言，建立在Node.js上）、LibWebSockets（c/c++語言）....他們實現了WebSocket 數據包的封裝和解析，調用這些接口即可。
總結
以上是生活随笔為你收集整理的JavaScript WebSocket 使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iptables详解
- 下一篇： 使用DataGrid控件