一、WebSocket 是什么？
WebSocket 是一種網(wǎng)絡通信協(xié)議，它提供了一種在客戶端和服務器之間建立持久連接的方式，允許雙方進行全雙工通信。與傳統(tǒng)的 HTTP 協(xié)議相比，WebSocket 可以在連接建立后，讓服務器主動向客戶端發(fā)送數(shù)據(jù)，而無需客戶端頻繁發(fā)起請求。
1.1 WebSocket 的工作原理
建立連接：客戶端通過瀏覽器發(fā)起 WebSocket 請求，服務器接受請求后建立連接。
數(shù)據(jù)傳輸：連接建立后，客戶端和服務器可以通過 WebSocket 隧道雙向傳輸數(shù)據(jù)。
關閉連接：通信完成后，客戶端或服務器可以關閉連接。
1.2 WebSocket 的優(yōu)勢
實時性：數(shù)據(jù)傳輸無需等待客戶端請求，服務器可以實時推送數(shù)據(jù)。
高效性：減少了 HTTP 請求的開銷，避免了頻繁的連接和關閉。
雙向通信：客戶端和服務器可以同時發(fā)送和接收數(shù)據(jù)。
二、WebSocket 的使用場景
WebSocket 適用于需要實時交互的場景，以下是一些典型的應用場景：
2.1 實時聊天應用
2.2 實時監(jiān)控系統(tǒng)
2.3 游戲互動
2.4 即時通知
三、WebSocket 的注意事項
3.1 兼容性
3.2 安全性
3.3 性能優(yōu)化
四、WebSocket 的實現(xiàn)示例
4.1 前端代碼示例
以下是一個簡單的前端 WebSocket 示例，使用 HTML 和 JavaScript 實現(xiàn)：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>WebSocket 示例</title></head><body> <h1>WebSocket 客戶端</h1> <button onclick="connect()">連接服務器</button> <button onclick="sendMessage()">發(fā)送消息</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("發(fā)生錯誤"); }; } 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
創(chuàng)建一個配置類 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 創(chuàng)建 WebSocket 服務端類
創(chuàng)建一個 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("發(fā)生錯誤：" + throwable.getMessage()); }}
五、總結
WebSocket 是一種強大的實時通信技術，適用于需要實時交互的場景。通過上述示例，你可以快速入門 WebSocket 的開發(fā)。WebSocket 的優(yōu)勢在于其高效性和實時性，能夠顯著提升用戶體驗，減少服務器負擔。在實際開發(fā)中，需要注意兼容性、安全性和性能優(yōu)化等問題，以確保系統(tǒng)的穩(wěn)定運行。
閱讀原文：原文鏈接
該文章在 2025/5/26 10:26:24 編輯過
400 186 1886
