一、介紹

1.1 基礎(chǔ)概念介紹

• 單工通信：數(shù)據(jù)傳輸只允許在一個方向上傳輸，只能一方發(fā)送數(shù)據(jù)，另一方接收數(shù)據(jù)并發(fā)送。
• 半雙工：數(shù)據(jù)傳輸允許兩個方向上的傳輸，但在同一時間內(nèi)，只可以有一方發(fā)送或接收數(shù)據(jù)。
• 全雙工：同時可進行雙向數(shù)據(jù)傳輸。

1.2?WebSocket介紹

WebSocket是一種在單個TCP連接上進行全雙工通信的協(xié)議，它能夠在客戶端和服務(wù)器之間建立實時、雙向的通信通道。

與傳統(tǒng)的HTTP通信相比，WebSocket更輕量級、更高效，適用于需要實時通信或推送消息的場景。

WebSocket的最大特點就是，服務(wù)器可以主動向客戶端推送信息，客戶端也可以主動向服務(wù)器發(fā)送信息。

1.2.1?websocket 出現(xiàn)背景

WebSocket是一種在客戶端和服務(wù)器之間建立持久連接的通信協(xié)議。它的背景可以追溯到Web應(yīng)用程序需要實時雙向通信的需求。

在傳統(tǒng)的HTTP通信中，HTTP 協(xié)議是一種無狀態(tài)的、無連接的、單向的應(yīng)用層協(xié)議。它采用了請求/響應(yīng)模型。通信請求只能由客戶端發(fā)起，服務(wù)端對請求做出應(yīng)答處理。

客戶端發(fā)送請求，服務(wù)器響應(yīng)后即斷開連接，HTTP 協(xié)議無法實現(xiàn)服務(wù)器主動向客戶端發(fā)起消息，因此無法支持實時性要求高的應(yīng)用場景，比如在線游戲、即時聊天、股票行情等。

很多網(wǎng)站為了實現(xiàn)推送技術(shù)，所用的技術(shù)都是輪詢。即在特定得時間間隔，由瀏覽器對服務(wù)器發(fā)出http請求。

為了解決這一問題，Web開發(fā)者開始尋找一種更有效的方式來實現(xiàn)實時通信。WebSocket應(yīng)運而生，它允許在客戶端和服務(wù)器之間建立一次連接，并且可以在連接建立后保持長時間活躍，雙方可以隨時發(fā)送數(shù)據(jù)。這種持久連接的特性使得WebSocket非常適合實時通信應(yīng)用場景，從而推動了Web應(yīng)用程序的發(fā)展。

WebSocket的發(fā)展背景還包括了對網(wǎng)絡(luò)性能和效率的追求。相比傳統(tǒng)的HTTP輪詢或長輪詢方式，WebSocket可以減少通信的延遲和帶寬消耗，提升了網(wǎng)絡(luò)通信的效率。這也是WebSocket在各種實時通信應(yīng)用中得到廣泛應(yīng)用的重要原因之一。

總的來說，WebSocket的研發(fā)背景主要是為了滿足Web應(yīng)用程序?qū)崟r通信的需求，并且提升網(wǎng)絡(luò)通信的效率和性能。

1.3?websocket與HTTP比較

1.3.1 相似之處：

1. 基于TCP/IP協(xié)議：WebSocket和HTTP都是基于TCP/IP協(xié)議棧的應(yīng)用層協(xié)議。

2. 用于客戶端和服務(wù)器之間的通信：WebSocket和HTTP都是用于客戶端和服務(wù)器之間的通信，但在用途上有所區(qū)別。

1.3.2 不同之處：

1. 通信方式：

   • HTTP：HTTP是一種單向的、無狀態(tài)的通信協(xié)議，通常是客戶端向服務(wù)器發(fā)起請求，服務(wù)器返回響應(yīng)的模式。
   • WebSocket：WebSocket是一種全雙工的通信協(xié)議，允許客戶端和服務(wù)器之間同時發(fā)送和接收數(shù)據(jù)，實現(xiàn)了雙向通信。

2. 連接方式：

   • HTTP：HTTP是一種短連接的協(xié)議，每次通信都需要建立一個新的連接，通信結(jié)束后立即關(guān)閉連接。
   • WebSocket：WebSocket是一種長連接的協(xié)議，一旦建立連接，客戶端和服務(wù)器之間可以保持長時間的通信，不需要頻繁地建立和斷開連接。

3. 數(shù)據(jù)格式：

   • HTTP：HTTP通常使用文本格式來傳輸數(shù)據(jù)，如HTML、JSON等。
   • WebSocket：WebSocket支持傳輸任意格式的數(shù)據(jù)，可以是文本、二進制等。

4. 實時性和效率：

   • HTTP：HTTP通常是基于請求-響應(yīng)模式，因此在實時性和效率上有一定的限制，適用于普通的網(wǎng)頁瀏覽和數(shù)據(jù)傳輸。
   • WebSocket：WebSocket是專門設(shè)計用于實時通信的協(xié)議，實時性和效率較高，適用于需要實時通信或推送消息的場景。

5. 適用場景：

   • HTTP：適用于普通的網(wǎng)頁瀏覽、數(shù)據(jù)傳輸?shù)葓鼍啊?/li>
   • WebSocket：適用于實時聊天應(yīng)用、在線游戲、實時數(shù)據(jù)展示等需要實時通信的場景。

1.4?websocket握手過程

WebSocket握手過程是建立WebSocket連接的第一步，它是基于HTTP協(xié)議的，但在一定程度上有所不同。以下是WebSocket握手過程的簡要步驟：

1. 客戶端發(fā)送WebSocket握手請求：客戶端發(fā)送一個HTTP請求給服務(wù)器，請求升級連接為WebSocket。請求中包含了一些特殊的頭部字段，如Upgrade和Connection字段，以及Sec-WebSocket-Key字段等。

2. 服務(wù)器響應(yīng)WebSocket握手請求：服務(wù)器收到客戶端的握手請求后，會進行驗證并作出響應(yīng)。服務(wù)器會返回一個HTTP 101狀態(tài)碼（表示協(xié)議切換）并在響應(yīng)頭部中包含一些特殊的字段，如Upgrade和Connection字段，以及Sec-WebSocket-Accept字段等。同時，服務(wù)器也會發(fā)送一些WebSocket擴展和子協(xié)議等信息。

3. 建立WebSocket連接：客戶端收到服務(wù)器的響應(yīng)后，如果狀態(tài)碼為101，則握手成功，此時WebSocket連接已經(jīng)建立?？蛻舳撕头?wù)器可以通過該連接進行雙向通信。

4. 雙方開始交換數(shù)據(jù)：建立了WebSocket連接后，客戶端和服務(wù)器可以隨時發(fā)送數(shù)據(jù)，并且可以實現(xiàn)雙向通信。

需要注意的是，WebSocket握手過程在HTTP層面進行，但建立了WebSocket連接后，通信協(xié)議會切換到WebSocket協(xié)議，之后的通信就不再遵循HTTP協(xié)議的規(guī)則。這樣可以實現(xiàn)更加高效和實時的雙向通信。

二、WebSocket的用法

1. 創(chuàng)建WebSocket連接

在JavaScript中，可以使用WebSocket API來創(chuàng)建WebSocket連接：

var socket = new WebSocket('ws://example.com/socket');

?

2. 監(jiān)聽WebSocket事件

可以監(jiān)聽WebSocket對象的各種事件，包括連接建立、消息接收、連接關(guān)閉等：

socket.onopen = function() {console.log('WebSocket連接已建立');
};socket.onmessage = function(event) {console.log('收到消息：', event.data);
};socket.onclose = function() {console.log('WebSocket連接已關(guān)閉');
};

3. 發(fā)送和接收消息

通過WebSocket對象的send方法可以向服務(wù)器發(fā)送消息，服務(wù)器也可以通過WebSocket對象的send方法向客戶端發(fā)送消息：

// 發(fā)送消息
socket.send('Hello, Server!');// 接收消息在onmessage事件中處理
socket.onmessage = function(event) {console.log('收到消息：', event.data);
};

三、WebSocket在項目中的應(yīng)用

WebSocket可以被廣泛應(yīng)用于需要實時通信或推送消息的場景，例如：

1. 實時聊天應(yīng)用：WebSocket能夠?qū)崿F(xiàn)即時通訊，可以讓用戶之間實時發(fā)送消息、接收消息。

2. 在線游戲：WebSocket可用于在線游戲中，實現(xiàn)玩家之間的實時交互、游戲狀態(tài)的同步等功能。

3. 實時數(shù)據(jù)展示：對于需要實時展示數(shù)據(jù)變化的項目，如股票交易系統(tǒng)、監(jiān)控系統(tǒng)等，可以使用WebSocket將實時數(shù)據(jù)推送給客戶端。

4. 協(xié)作編輯：在協(xié)作編輯類的應(yīng)用中，多個用戶可以同時編輯同一個文檔或項目，WebSocket可以用于實現(xiàn)多用戶之間的實時同步。

5. 通知推送：WebSocket可以用于向客戶端推送實時通知，例如新消息通知、系統(tǒng)提醒等。

3.1?示例：實時聊天應(yīng)用

下面是一個簡單的實時聊天應(yīng)用的示例，使用WebSocket實現(xiàn)客戶端和服務(wù)器之間的實時通信：

1、服務(wù)端代碼（Node.js）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', function connection(ws) {ws.on('message', function incoming(message) {console.log('收到消息：', message);// 廣播消息給所有客戶端wss.clients.forEach(function each(client) {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});
});

2、客戶端代碼（HTML + JavaScript）

<!DOCTYPE html>
<html>
<head><title>WebSocket Chat</title>
</head>
<body><input type="text" id="messageInput"><button onclick="sendMessage()">Send</button><ul id="messageList"></ul><script>var socket = new WebSocket('ws://localhost:8080');socket.onmessage = function(event) {var messageList = document.getElementById('messageList');var li = document.createElement('li');li.textContent = event.data;messageList.appendChild(li);};function sendMessage() {var messageInput = document.getElementById('messageInput');var message = messageInput.value;socket.send(message);messageInput.value = '';}</script>
</body>
</html>

這個示例實現(xiàn)了一個簡單的實時聊天應(yīng)用，用戶可以在輸入框中輸入消息并發(fā)送，其他用戶能夠即時收到消息并顯示在頁面上。

結(jié)論

WebSocket是一種強大的實時通信協(xié)議，它能夠在客戶端和服務(wù)器之間建立持久的雙向通信通道，為項目中的實時通信場景提供了極大的便利。通過本文的介紹和示例，相信讀者對WebSocket有了更深入的理解，能夠更加靈活地運用WebSocket解決實際的項目需求。