一、WebSocket 是什么？
WebSocket 是一種網絡通信協議，它提供了一種在客戶端和服務器之間建立持久連接的方式，允許雙方進行全雙工通信。與傳統的 HTTP 協議相比，WebSocket 可以在連接建立后，讓服務器主動向客戶端發送數據，而無需客戶端頻繁發起請求。
1.1 WebSocket 的工作原理
建立連接：客戶端通過瀏覽器發起 WebSocket 請求，服務器接受請求后建立連接。
數據傳輸：連接建立后，客戶端和服務器可以通過 WebSocket 隧道雙向傳輸數據。
關閉連接：通信完成后，客戶端或服務器可以關閉連接。
1.2 WebSocket 的優勢
二、WebSocket 的使用場景
WebSocket 適用于需要實時交互的場景，以下是一些典型的應用場景：
2.1 實時聊天應用
2.2 實時監控系統
2.3 游戲互動
2.4 即時通知
三、WebSocket 的注意事項
3.1 兼容性
3.2 安全性
3.3 性能優化
四、WebSocket 的實現示例
4.1 前端代碼示例
以下是一個簡單的前端 WebSocket 示例，使用 HTML 和 JavaScript 實現：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>WebSocket 示例</title></head><body> <h1>WebSocket 客戶端</h1> <button onclick="connect()">連接服務器</button> <button onclick="sendMessage()">發送消息</button> <button onclick="closeConnection()">關閉連接</button> <p id="messages"></p>
<script> var webSocket = null;
function connect() { if ('WebSocket' in window) { webSocket = new WebSocket("ws://localhost:18801/webSocket"); webSocket.onopen = function() { console.log("已連接"); }; webSocket.onmessage = function(event) { document.getElementById("messages").innerHTML += event.data + "<br>"; }; webSocket.onclose = function() { console.log("連接已關閉"); }; webSocket.onerror = function() { console.log("發生錯誤"); }; } else { alert("您的瀏覽器不支持 WebSocket！"); } }
function sendMessage() { if (webSocket) { webSocket.send("Hello, Server!"); } }
function closeConnection() { if (webSocket) { webSocket.close(); } } </script></body></html>
4.2 后端代碼示例（Spring Boot）
以下是一個簡單的 Spring Boot WebSocket 服務端示例：
4.2.1 添加依賴
在 pom.xml 文件中添加 WebSocket 依賴：
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency>
4.2.2 配置 WebSocket
創建一個配置類 WebSocketConfig：
import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); }}
4.2.3 創建 WebSocket 服務端類
創建一個 WebSocket 服務端類 WebSocketServer：
import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Component;
import javax.websocket.*;import javax.websocket.server.ServerEndpoint;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint("/webSocket")@Componentpublic class WebSocketServer { private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class); private static final CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<>();
@OnOpen public void onOpen(Session session) { sessionPools.add(session); log.info("新連接加入：" + session.getId()); }
@OnClose public void onClose(Session session) { sessionPools.remove(session); log.info("連接關閉：" + session.getId()); }
@OnMessage public void onMessage(String message, Session session) { log.info("收到來自客戶端的消息：" + message); for (Session sess : sessionPools) { if (sess.isOpen()) { try { sess.getBasicRemote().sendText("服務器收到消息：" + message); } catch (IOException e) { e.printStackTrace(); } } } }
@OnError public void onError(Session session, Throwable throwable) { log.error("發生錯誤：" + throwable.getMessage()); }}
五、總結
WebSocket 是一種強大的實時通信技術，適用于需要實時交互的場景。通過上述示例，你可以快速入門 WebSocket 的開發。WebSocket 的優勢在于其高效性和實時性，能夠顯著提升用戶體驗，減少服務器負擔。在實際開發中，需要注意兼容性、安全性和性能優化等問題，以確保系統的穩定運行。
閱讀原文：原文鏈接
該文章在 2025/5/26 10:26:24 編輯過
400 186 1886
