【WebSocket?】入門之旅（三）：WebSocket 的實戰應用

本篇文章將通過構建一個簡單的實時聊天應用，演示如何在前端和后端搭建 WebSocket 系統，完成實時消息傳輸。通過實戰，幫助你更好地理解 WebSocket 在實際項目中的應用。

搭建 WebSocket 服務器

首先，我們需要搭建一個 WebSocket 服務器。這里我們使用 Node.js 和 ws 庫來搭建服務器。ws 是一個常用的 WebSocket 實現，支持高效的雙向通信。

1. 安裝 `ws` 庫

在項目中安裝 ws 庫：

npm install ws

2. 創建 WebSocket 服務器

接下來，我們編寫一個簡單的 WebSocket 服務器，處理客戶端的連接和消息。

// websocket-server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });// 當有客戶端連接時
wss.on('connection', (ws) => {console.log('客戶端已連接');// 當接收到客戶端消息時ws.on('message', (message) => {console.log('收到消息: ', message);// 將消息發送給所有連接的客戶端wss.clients.forEach((client) => {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message);}});});// 連接關閉時ws.on('close', () => {console.log('客戶端斷開連接');});
});console.log('WebSocket 服務器啟動，監聽 8080 端口...');

在上面的代碼中：

我們創建了一個 WebSocket 服務器，監聽 8080 端口。
當客戶端連接時，會觸發 connection 事件。
當服務器接收到客戶端發送的消息時，它會廣播該消息給所有其他已連接的客戶端。
wss.clients.forEach 用來遍歷所有連接的客戶端并發送消息。

3. 啟動 WebSocket 服務器

運行服務器：

node websocket-server.js

啟動成功終端會出現以下字樣：

WebSocket 服務器啟動，監聽 8080 端口...

服務器啟動后，就可以通過 WebSocket 客戶端與其建立連接了。

WebSocket 客戶端實現

接下來，我們在前端實現 WebSocket 客戶端。我們將使用原生 JavaScript 來連接 WebSocket 服務器，并實現消息的發送與接收。

1. 創建 HTML 頁面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket 聊天應用</title><style>#messages { height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; }input, button { width: 100%; padding: 10px; margin-top: 10px; }</style>
</head>
<body><h2>WebSocket 聊天應用</h2><div id="messages"></div><input type="text" id="messageInput" placeholder="輸入消息..."><button id="sendMessageBtn">發送</button><script> ... </script>
</body>
</html>

<script>const socket = new WebSocket('ws://localhost:8080'); // 連接 WebSocket 服務器const messagesDiv = document.getElementById('messages');const messageInput = document.getElementById('messageInput');const sendMessageBtn = document.getElementById('sendMessageBtn');// 當 WebSocket 連接成功時socket.onopen = function() {console.log('WebSocket 連接已建立');};// 當接收到服務器的消息時socket.onmessage = function (event) {// 檢查數據類型是否為Blobif (event.data instanceof Blob) {// 將Blob轉換為文本const reader = new FileReader();reader.onload = function () {const message = reader.result;displayMessage(message);};reader.readAsText(event.data);} else {// 如果是文本直接使用const message = event.data;displayMessage(message);}};// 單獨的消息顯示函數function displayMessage(message) {const messageElement = document.createElement('div');messageElement.textContent = message;messagesDiv.appendChild(messageElement);messagesDiv.scrollTop = messagesDiv.scrollHeight; // 滾動到最新消息}// 當 WebSocket 出現錯誤時socket.onerror = function(error) {console.log('WebSocket 錯誤: ', error);};// 當 WebSocket 連接關閉時socket.onclose = function() {console.log('WebSocket 連接已關閉');};// 點擊發送按鈕時發送消息sendMessageBtn.onclick = function() {const message = messageInput.value;if (message) {socket.send(message);messageInput.value = ''; // 清空輸入框}};</script>

在這個 HTML 頁面中：

我們創建了一個簡單的聊天界面，包含一個用于顯示消息的 div 和一個輸入框與按鈕，用于輸入和發送消息。
使用 WebSocket 對象與后端 WebSocket 服務器建立連接，并在 onmessage 事件中接收消息并展示。
點擊“發送”按鈕時，輸入的消息將通過 WebSocket 發送到服務器。

2. 測試客戶端與服務器

打開瀏覽器，打開這個 HTML 頁面，打開多個標簽頁，可以看到多個客戶端可以實時接收到其他客戶端發送的消息。
在這里插入圖片描述
從打開兩個網頁客戶端相互發消息到關閉頁面，在終端會顯示以下內容：

客戶端已連接
客戶端已連接
收到消息:  <Buffer e4 bd a0 e5 a5 bd ef bc 81 e4 bb 8a e5 a4 a9 e6 98 9f e6 9c 9f e5 87 a0 ef bc 9f>
收到消息:  <Buffer e4 bd a0 e5 a5 bd ef bc 8c e4 bb 8a e5 a4 a9 e6 98 9f e6 9c 9f e4 b8 80 e3 80 82>
客戶端斷開連接
客戶端斷開連接

實時聊天應用示例

通過上面的代碼，您已經完成了一個簡單的實時聊天應用。每當一個客戶端發送消息時，其他所有客戶端都能立刻收到這條消息。這就是 WebSocket 的魅力所在——它為實時通信提供了便捷、低延遲的解決方案。

通過這個簡單的聊天應用，我們實現了：

消息的發送與接收：客戶端可以發送消息，服務器將其廣播給其他客戶端。
實時更新：消息的接收是即時的，確保了實時的溝通效果。

常見問題與解決方案

無法連接 WebSocket 服務器
- 確保服務器正在運行，并且監聽正確的端口。
- 確認客戶端使用的 WebSocket URL 正確，例如 ws://localhost:8080。
消息不接收
- 檢查 WebSocket 連接是否成功（查看瀏覽器控制臺中的 onopen 和 onmessage 輸出）。
- 確認消息是否通過 socket.send() 正確發送。
WebSocket 連接斷開
- 確保 WebSocket 連接沒有被防火墻或代理阻止。
- 使用 onclose 事件監聽連接關閉，并實現重連機制。

小結

本篇文章通過一個簡單的實時聊天應用，展示了如何在前端和后端使用 WebSocket 實現實時消息傳輸。
通過搭建 WebSocket 服務器和客戶端，我們實現了一個簡單的聊天系統，數據可以實時傳輸到多個客戶端。
WebSocket 為實時應用提供了高效的解決方案，適用于聊天、游戲、實時推送等場景。

🔔 下一篇文章，我們將進入 WebSocket 的性能優化，講解如何提高 WebSocket 在高并發下的性能和穩定性。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/96785.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/96785.shtml
英文地址，請注明出處：http://en.pswp.cn/web/96785.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！