五分鐘學會HTML5的WebSocket協議
1、背景
很多網站為了實現推送技術，所用的技術都是Ajax輪詢。輪詢是在特定的的時間間隔由瀏覽器對伺服器發出HTTP請求，然後由伺服器返回最新的資料給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向伺服器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的頻寬等資源。HTML5新增的一些新協議WebSocket,可以提供在單個TCP連線上提供全雙工，雙向通訊，能夠節省伺服器資源和頻寬，並且能夠實時進行通訊。
2、WebSocket介紹
傳統的http也是一種協議，WebSocket是一種協議，使用http伺服器無法實現WebSocket，
2.1.瀏覽器支援情況
基本主流瀏覽器都支援
2.2.優點
相對於http有如下好處：
- 1.客戶端與伺服器只建立一個TCP連線，可以使用更少的連線。
- 2.WebSocket伺服器端可以主動推送資料到客戶端，更靈活高效。
- 3.更輕量級的協議頭，減少資料傳送量。
對比輪訓機制
3、WebSocket用法
我們瞭解WebSocket是什麼，有哪些優點後，怎麼使用呢？
3.1.WebSocket建立
WebSocket使用了自定義協議，url模式與http略有不同，未加密的連線是ws://，加密的連線是wss://，WebSocket例項使用new WebSocket()方法來建立，
var ws = new WebSocket(url, [protocol] );
第一個引數 url, 指定連線的 URL。第二個引數 protocol 是可選的，指定了可接受的子協議。
3.2.WebSocket屬性
當建立ws物件後，readyState為ws例項狀態，共4種狀態
0 表示連線尚未建立。
1 表示連線已建立，可以進行通訊。
2 表示連線正在進行關閉。
3 表示連線已經關閉或者連線不能開啟。
Tips：在傳送報文之前要判斷狀態，斷開也應該有重連機制。
3.3.WebSocket事件
在建立ws例項物件後，會擁有以下幾個事件，根據不同狀態可在事件回撥寫方法。
ws.onopen 連線建立時觸發
ws.onmessage 客戶端接收服務端資料時觸發
ws.onerror 通訊發生錯誤時觸發
ws.onclose 連線關閉時觸發
ws.onmessage = (res) => {
console.log(res.data);
};
ws.onopen = () => {
console.log('OPEN...');
};
ws.onclose=()=>{
console.log('CLOSE...');
}3.4.WebSocket方法
ws.send() 使用連線傳送資料(只能傳送純文字資料)
ws.close() 關閉連線
4、Demo演示
瞭解WebSocket的一些API之後，趁熱打鐵，做一個小案例跑一下。
4.1.Node伺服器端
WebSocket協議與Node一起用非常好，原因有以下兩點：
1.WebSocket客戶端基於事件程式設計與Node中自定義事件差不多。
2.WebSocket實現客戶端與伺服器端長連線，Node基本事件驅動的方式十分適合高併發連線
建立一個webSocket.js如下：
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function (ws) {
console.log('client connected');
ws.on('message', function (message) {
ws.send('我收到了' + message);
});
});開啟windows命令視窗執行
4.2.HTML客戶端
新建一個index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocket小Demo</title>
</head>
<body>
<div class="container">
<div>
<input type="text" id="msg">
<button onclick="sendMsg()">傳送報文</button>
</div>
</div>
<script>
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (res) => {
console.log(res);
};
ws.onopen = () => {
console.log('OPEN...');
};
ws.onclose = () => {
console.log('CLOSE...');
}
function sendMsg() {
let msg = document.getElementById('msg').value;
ws.send(msg);
}
</script>
</body>開啟瀏覽器依次輸入字元1,2,3，每次輸入完點擊發送報體，可見在ws.onmessage事件中res.data中返回來我們發的報文
5、問題與總結
以上只是簡單的介紹了下WebSocket的API與簡單用法，在處理高併發，長連線這些需求上，例如聊天室，可能WebSocket的http請求更加合適高效。
但在使用WebSocket過程中發現容易斷開連線等問題，所以在每次傳送報文前要判斷是否斷開，當多次傳送報文時，由於伺服器端返回資料量不同，返回客戶端前後順序也不同，所以需要在客戶端收到上一個報文返回資料後再發送下一個報文，為了避免回撥巢狀過多，通過Promise ，async ,await等同步方式解決。關於WebSocket就寫這麼多，如有不足，歡迎多多指正！
參考資料：
《JavaScript高階教程》
《深入檢出NodeJs》
《菜鳥教程