1.WebSocket全雙工通信協議
????????WebSocket是HTML5開始提供的一種單個TCP連接上進行全雙工通訊的協議。讓客戶端和服務器間的數據交互變得簡單，允許服務端向客戶端主動推送數據。瀏覽器和服務器間只需要完成一次握手，兩者間創建持久性的連接，并進行雙向的數據傳輸。
? ? ? ? WebSocket是在應用層實現的協議。握手過程中使用HTTP協議，握手成功升級為全雙工通信通道，成功后WebSocket協議在應用層上定義消息格式和通信規則，通過傳輸層TCP協議上進行數據傳輸。
1.1 如何實現實時推送技術?
Ajax輪詢：輪詢分為（長輪詢與短輪詢）在特定的時間間隔，瀏覽器向服務器發送HTTP請求，服務器返回最新的數據給客戶端。（缺點：需要不斷向服務器發送請求，占用服務器資源和帶寬）
WebSocket：js向服務器發出建立WebSocket連接請求，客戶端與服務端通過TCP連接直接交換數據。
1.2 WebSocket主要的應用場景
- 實時通信：在線聊天，視頻會議等
- 實時數據推送：新聞，體育賽事直播等，服務器可以主動向客戶端推送更新數據
- 協同編輯：在線文檔編輯的視線
- 在線游戲：需要實時推送更新游戲狀態，提供低延遲的雙向通信能力
具體的學習可以參考
HTML5 WebSocket | 菜鳥教程HTML5 WebSocket WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。 WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。 在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏..
https://www.runoob.com/html/html5-websocket.html
2.WebSocket相關屬性事件與方法
????????獲取WebSocket連接，通過send()方法向服務器發送數據，并通過onmessage事件接收服務器返回的數據。
2.1 創建WebSocket對象
var Socket = new WebSocket(url, [protocol] );
第一個參數url，指定連接的URL。第二個參數protocol，指定可接受的子協議。
?2.2?WebSocket對象屬性（使用創建的Socket對象）
| 屬性 | 描述 |
|---|---|
| Socket.readyState | 只讀屬性?readyState?表示連接狀態，可以是以下值：
|
| Socket.bufferedAmount | 只讀屬性?bufferedAmount?已被 send() 放入正在隊列中等待傳輸，但是還沒有發出的 UTF-8 文本字節數。 |
2.3??WebSocket事件（使用創建的Socket對象）
| 事件 | 事件處理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 連接建立時觸發 |
| message | Socket.onmessage | 客戶端接收服務端數據時觸發 |
| error | Socket.onerror | 通信發生錯誤時觸發 |
| close | Socket.onclose | 連接關閉時觸發 |
2.4?WebSocket方法（使用創建的Socket對象）
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用連接發送數據 |
| Socket.close() | 關閉連接 |
3.?WebSocket（node.js作為服務器，js請求連接）
3.1 安裝node.js與npm
根據電腦操作系統下載對應的版本。
3.2 初始化node.js項目
在新建項目文件目錄下通過npm初始化項目。
npm init -ynpm-npm init與npm init -y區別與作用(初始化一個新的node.js項目)-CSDN博客文章瀏覽閱讀43次。npm init與npm init -y區別與作用(初始化一個新的node.js項目)https://blog.csdn.net/2301_76671906/article/details/146195508?fromshare=blogdetail&sharetype=blogdetail&sharerId=146195508&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link
3.3 在node.js項目中安裝ws庫
npm install ws
ws是流行在node.js中實現WebSocket協議的庫。提供對應的AP來創建WebSocket服務器和客戶端，實現實時雙向通信。
3.4 創建WebSocket服務器-serve.js
// 引入WebSocket模塊
const WebSocket = require('ws');// 創建WebSocket服務器 監聽8080端口
const wss = new WebSocket.Server({ port: 8080 });// 當有新的客戶端連接時 觸發connection事件
wss.on('connection', (ws) => {console.log('新的客戶端已連接');// 收到客戶端消息時 觸發message事件ws.on('message', (message) => {console.log('收到消息: %s', message);// 向所有客戶端廣播消息wss.clients.forEach((client) => {// 判斷客戶端是否處于連接狀態if (client.readyState === WebSocket.OPEN) {// 向處于打開狀態的客戶端廣播接收到的消息client.send(message);}});});// 當客戶端斷開連接時 觸發close事件ws.on('close', () => {console.log('客戶端斷開連接');});
});console.log('WebSocket服務器已啟動，監聽8080端口');
3.5 運行自定義接收傳遞服務器-serve.js
對應的node.js項目中運行
node server.js
3.6 前端html連接serve.js服務
<!DOCTYPE html>
<html>
<head><title>WebSocket測試</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><input v-model="inputMessage" @input="sendMessage" placeholder="輸入消息"><p>收到的消息: {{ receivedMessage }}</p></div><script>// 創建WebSocket實例，連接到本地的8080端口const ws = new WebSocket('ws://localhost:8080');const app = new Vue({el: '#app',data: {inputMessage: '',receivedMessage: ''},methods: {sendMessage() {// 如果WebSocket連接已打開if (ws.readyState === WebSocket.OPEN) {// 發送輸入框中的內容ws.send(this.inputMessage);}}}});// 當WebSocket連接成功時觸發ws.onopen = function() {console.log('已連接到服務器');};// 當收到服務器發送的消息時觸發ws.onmessage = function(event) {console.log('收到消息: ' + event.data);// 更新Vue實例中的receivedMessage變量app.receivedMessage = event.data;};// 當WebSocket連接關閉時觸發ws.onclose = function() {console.log('連接已關閉');};
</script>
</body>
</html>
)
