WebSocket
概念
WebSocket是再單個TCP連接上進行雙工通訊的協議，僅需要通過一次握手兩個之間就可以創建持久性的連接，進行雙向數據傳輸。WebSocket 是HTML5新增加的協議。
為什么要用
眾所周知傳統的http協議是客戶端（瀏覽器）發送請求，瀏覽器響應請求的方式，一條請求對應一條響應。若瀏覽器不主動請求則服務端無法想客戶端主動推數據。傳統的方式是使用AJAX輪詢（這個方式有它的問題）來解決這一問題后面展開講。
應用場景
列舉幾個應用場景：
-
網絡聊天室
-
多人在線游戲
-
網站向頁面實時推送廣告、消息
-
在線實現對控制設備的控制
前面三個應用場景已經有很多大佬講過了，我就不講了，這里主要簡單分析一下第四個應用場景。
場景4：
家里裝有“XX”牌網絡攝像機，我現在工作想看看自家“二哈”有沒有在拆家,打開改公司提供的app查看家里的情況，很不巧相機現在沒有開機，不過可以通過app控制相機開機，點擊開機按鈕相機開機。但是相機開機需要一段時間。這時傳統的做法是通過AJAX輪詢的方式每個1秒左右就向服務器發送請求詢問設備是否准備就緒。
客戶端> 開機沒啊，能不能播放視頻了呀。
服務端> 還沒呢，別着急等會兒再來。
客戶端> 開機沒啊，能不能播放視頻了呀。
服務端> 還沒呢，別着急等會兒再來。
客戶端> 開機沒啊，能不能播放視頻了呀。
服務端> 還沒呢，別着急等會兒再來。
......
N次之后
......
客戶端> 開機沒啊，能不能播放視頻了呀。。。
服務端> 可以了，你可以播放了
這個看出客戶端要通過很多次詢問后，才能知道服務端什么時候准備就緒，這樣如果發送請求的客戶特別多，請求頻率特別高這無疑會給服務端造成了不小的壓力。
如果有那么一種方式可以讓服務端想客戶端推送消息，就可以完美解決這一情況，於是WebSocket出現了。
WebSocket的使用
WebSocket是HTML5的新協議，所以支持HTML5的瀏覽器都能直接使用WebSocket不需要額外安裝，什么開發包，或者插件。
為了測試WebSocket我們需要簡單的搞一個服務端程序。Node.js本身支持的協議包括TCP協議和HTTP協議，但不支持WebSocket，為了讓讓node也支持WebSocket，這里我選用ws模塊。
測試
創建一個名為testWebSocket的文件夾，使用npm init 初始化項目
配置package.json文件添加，這里選用ws的最新的版本
"dependencies": {
"ws": "^6.2.1"
}
在根目錄使用npm指令npm install --save，把ws相關依賴都拉下來。
然后創建一個名為myWebSocketServer.js的文件，一個簡單的WebSocket服務端程序完成，
node myWebSocketServer.js先讓服務端跑起來。
// 導入WebSocket模塊:
const WebSocket = require('ws');
let i = 1;
// 引用Server類:
const WebSocketServer = WebSocket.Server;
// 實例化:
const myWs = new WebSocketServer({
port: 8080
});
myWs.on('connection', ws => {
ws.on('message', message => {
console.log('received: %s', message);
});
setInterval(() => {
ws.send('Hello siegaii this is serverMessage!' + i);
i++;
}, 1000);
});
客戶端
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<button id="test">hello siegaii</button>
<script>
let ws = new WebSocket('ws://localhost:8080/testWebSocket');
document.getElementById('test').addEventListener('click', () => {
ws.send('Hello Siegaii this is clientMessage!');
});
// 響應onmessage事件:
ws.onmessage = (msg) => {
console.log(msg);
};
</script>
</body>
</html>
運行結果如下
API
簡單介紹下WebSocket的api
// WebSocket Api
let socket = new WebSocket(url, [protocol] ); // 實例化一個WebSocket對象建立連接
/**
* socket的readyState屬性
* 0 - 表示連接尚未建立。
* 1 - 表示連接已建立，可以進行通信。
* 2 - 表示連接正在進行關閉。
* 3 - 表示連接已經關閉或者連接不能打開。
*/
socket.readyState
/**
* 只讀屬性 bufferedAmount 已被 send() 放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數。
*/
socket.bufferedAmount
/**
* WebSocket 事件
*/
socket.onopen(); //連接建立時觸發
socket.onmessage(); //客戶端接收服務端數據時觸發
socket.onerror(); //通信發生錯誤時觸發
socket.onclose(); //連接關閉時觸發
/**
* WebSocket 方法
*/
Socket.send() //使用連接發送數據
Socket.close() //關閉連接