網(wǎng)站建設(shè)培訓(xùn)南寧短視頻seo排名加盟
原文地址：xupengboo
WebSocket
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
傳統(tǒng)的一些網(wǎng)站推送技術(shù)，使用的技術(shù)是Ajax輪詢。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進(jìn)行通訊。
聊天室案例，index.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>
</head>
<body><h1>WebSocket 聊天室</h1><div><input id="messageInput" type="text" placeholder="輸入消息..." /><button onclick="sendMessage()">發(fā)送</button></div><div><h2>聊天記錄：</h2><pre id="chatLog"></pre></div><script>// 連接到 WebSocket 服務(wù)器const ws = new WebSocket('ws://localhost:8080/chat');// 監(jiān)聽 WebSocket 打開事件ws.onopen = function() {console.log('WebSocket 連接已打開');};// 監(jiān)聽 WebSocket 消息事件ws.onmessage = function(event) {console.log('收到服務(wù)器消息:', event.data);document.getElementById('chatLog').textContent += event.data + '\n';};// 發(fā)送消息到服務(wù)器function sendMessage() {const message = document.getElementById('messageInput').value;ws.send(message);}// 監(jiān)聽 WebSocket 錯誤事件ws.onerror = function(error) {console.error('WebSocket 錯誤:', error);};// 監(jiān)聽 WebSocket 關(guān)閉事件ws.onclose = function() {console.log('WebSocket 連接已關(guān)閉');};</script>
</body>
</html>
通過 SpringBoot 實現(xiàn)后臺，WebSocket 通信服務(wù)：
- 引入
WebSocket依賴：
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
- 定義一個
WebSocket Handler繼承類：
package com.itholmes.demo.websocket;import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;import java.util.Collections;
import java.util.HashSet;
import java.util.Set;/*** @Author xupengboo* @Date 2024/9/12 9:25* @Describe*/
public class ChatWebSocketHandler extends TextWebSocketHandler {// 用于存儲所有客戶端連接private final Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());// 當(dāng)客戶端連接時觸發(fā)@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {sessions.add(session);System.out.println("新連接：" + session.getId());}// 當(dāng)收到客戶端消息時觸發(fā)@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {String payload = message.getPayload();System.out.println("收到消息：" + payload);// 將消息廣播給所有連接的客戶端for (WebSocketSession webSocketSession : sessions) {if (webSocketSession.isOpen()) {webSocketSession.sendMessage(new TextMessage("客戶端 " + session.getId() + " 說：" + payload));}}}// 當(dāng)連接關(guān)閉時觸發(fā)@Overridepublic void afterConnectionClosed(WebSocketSession session, org.springframework.web.socket.CloseStatus status) throws Exception {sessions.remove(session);System.out.println("連接關(guān)閉：" + session.getId());}}
- 配置
WebSocketConfigurer類：
package com.itholmes.demo.websocket;import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;/*** @Author xupengboo* @Date 2024/9/12 9:26* @Describe*/
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 注冊 WebSocket 處理器和路徑registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*"); // 允許跨域}}
- 啟動服務(wù)，配合前端測試即可。