一、WebSocket 理解
-
概念： WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議，
-
特點： WebSocket 使得客戶端和服務器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料，在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向資料傳輸，
-
流程： 在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道，兩者之間就直接可以資料互相傳送，
-
目前： 現在，很多網站為了實作推送技術，所用的技術都是 Ajax 輪詢，輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器回傳最新的資料給客戶端的瀏覽器，這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源，
-
優勢： HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊，
二、WebSocket 屬性
- WebSocket 物件
let ws = new WebSocket('ws://localhost:3000') // 創建 WebSocket 物件
- WebSocket 物件屬性：
| 屬性 | 描述 |
|---|---|
| ws.readyState | 只讀屬性 readyState 表示連接狀態，可以是以下值: 0 - 表示連接尚未建立， 1 - 表示連接已建立，可以進行通信， 2 - 表示連接正在進行關閉， 3 - 表示連接已經關倍訓者連接不能打開， |
- WebSocket 物件事件：
| 事件 | 事件處理程式 | 描述 |
|---|---|---|
| open | ws.onopen | 連接建立時觸發 |
| message | ws.onmessage | 客戶端接收服務端資料時觸發 |
| error | ws.onerror | 通信發生錯誤時觸發 |
| close | ws.onclose | 連接關閉時觸發 |
- WebSocket 物件方法：
| 方法 | 描述 |
|---|---|
| ws.send() | 使用連接發送資料 |
| ws.close() | 關閉連接 |
三、WebSocket 使用
// 創建 WebSocket 物件
let ws = new WebSocket('ws://localhost:3000')
// 定時器
let timer;
// 監聽打開
ws.onopen = webSocketOpen;
// 監聽例外
ws.onerror = webSocketError;
// 監聽訊息
ws.onmessage = webSocketMessage;
// 監聽關閉
ws.onclose = webSocketClose;
function webSocketOpen() {
console.log(`連接成功`)
start()
},
function webSocketError() {
console.log(`連接例外，請重繪頁面重試`)
},
function webSocketMessage(e) {
console.log(`接收到訊息:${e.data}`)
},
function webSocketClose() {
console.log(`連接關閉`)
clearInterval(timer)
},
// 發送心跳, 因為長時間不發送訊息，就會斷
function start() {
clearInterval(timer)
timer = setInterval(() => {
let date = new Date()
ws.send(`發送心跳給后端${date}`)
}, 2 * 60 * 1000)
}
四、WebSocket 應用
-
雙向通信，如聊天室，
-
微信小程式對 WebSocket 進行了封裝，wx.connectSocket() 可以理解為創建了一個 WebSocket 實體 SocketTask，
-
socket.io支持 WebSocket、輪詢、HTTP 流等方式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/180450.html
標籤：其他
上一篇：javascript document.createElement() document.createTextNode() appendChild(）