一、WebSocket 是什么？
WebSocket 是一種網(wǎng)絡(luò)通信協(xié)議，它提供了一種在客戶端和服務(wù)器之間建立持久連接的方式，允許雙方進(jìn)行全雙工通信。與傳統(tǒng)的 HTTP 協(xié)議相比，WebSocket 可以在連接建立后，讓服務(wù)器主動(dòng)向客戶端發(fā)送數(shù)據(jù)，而無需客戶端頻繁發(fā)起請(qǐng)求。
1.1 WebSocket 的工作原理
建立連接：客戶端通過瀏覽器發(fā)起 WebSocket 請(qǐng)求，服務(wù)器接受請(qǐng)求后建立連接。
數(shù)據(jù)傳輸：連接建立后，客戶端和服務(wù)器可以通過 WebSocket 隧道雙向傳輸數(shù)據(jù)。
關(guān)閉連接：通信完成后，客戶端或服務(wù)器可以關(guān)閉連接。
1.2 WebSocket 的優(yōu)勢
實(shí)時(shí)性：數(shù)據(jù)傳輸無需等待客戶端請(qǐng)求，服務(wù)器可以實(shí)時(shí)推送數(shù)據(jù)。
高效性：減少了 HTTP 請(qǐng)求的開銷，避免了頻繁的連接和關(guān)閉。
雙向通信：客戶端和服務(wù)器可以同時(shí)發(fā)送和接收數(shù)據(jù)。
二、WebSocket 的使用場景
WebSocket 適用于需要實(shí)時(shí)交互的場景，以下是一些典型的應(yīng)用場景：
2.1 實(shí)時(shí)聊天應(yīng)用
2.2 實(shí)時(shí)監(jiān)控系統(tǒng)
2.3 游戲互動(dòng)
2.4 即時(shí)通知
三、WebSocket 的注意事項(xiàng)
3.1 兼容性
3.2 安全性
3.3 性能優(yōu)化
四、WebSocket 的實(shí)現(xiàn)示例
4.1 前端代碼示例
以下是一個(gè)簡單的前端 WebSocket 示例，使用 HTML 和 JavaScript 實(shí)現(xiàn)：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>WebSocket 示例</title></head><body> <h1>WebSocket 客戶端</h1> <button onclick="connect()">連接服務(wù)器</button> <button onclick="sendMessage()">發(fā)送消息</button> <button onclick="closeConnection()">關(guān)閉連接</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("連接已關(guān)閉"); }; webSocket.onerror = function() { console.log("發(fā)生錯(cuò)誤"); }; } else { alert("您的瀏覽器不支持 WebSocket！"); } }
function sendMessage() { if (webSocket) { webSocket.send("Hello, Server!"); } }
function closeConnection() { if (webSocket) { webSocket.close(); } } </script></body></html>
4.2 后端代碼示例（Spring Boot）
以下是一個(gè)簡單的 Spring Boot WebSocket 服務(wù)端示例：
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)建一個(gè)配置類 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 服務(wù)端類
創(chuàng)建一個(gè) WebSocket 服務(wù)端類 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("連接關(guān)閉：" + session.getId()); }
@OnMessage public void onMessage(String message, Session session) { log.info("收到來自客戶端的消息：" + message); for (Session sess : sessionPools) { if (sess.isOpen()) { try { sess.getBasicRemote().sendText("服務(wù)器收到消息：" + message); } catch (IOException e) { e.printStackTrace(); } } } }
@OnError public void onError(Session session, Throwable throwable) { log.error("發(fā)生錯(cuò)誤：" + throwable.getMessage()); }}
五、總結(jié)
WebSocket 是一種強(qiáng)大的實(shí)時(shí)通信技術(shù)，適用于需要實(shí)時(shí)交互的場景。通過上述示例，你可以快速入門 WebSocket 的開發(fā)。WebSocket 的優(yōu)勢在于其高效性和實(shí)時(shí)性，能夠顯著提升用戶體驗(yàn)，減少服務(wù)器負(fù)擔(dān)。在實(shí)際開發(fā)中，需要注意兼容性、安全性和性能優(yōu)化等問題，以確保系統(tǒng)的穩(wěn)定運(yùn)行。
閱讀原文：原文鏈接
該文章在 2025/5/26 10:26:24 編輯過
400 186 1886
