咸阳做网站的公司一句话让客户主动找你
目录
- WebSocket简介
- WebSocket原理
- WebSocket的使用场景
- 在Spring Boot中集成WebSocket
- 创建Spring Boot项目
- 添加依赖
- 配置WebSocket
- 创建WebSocket处理器
- 配置WebSocket端点
- 前端使用WebSocket
- 添加WebSocket拦截器
WebSocket简介
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使客户端和服务器之间的数据交换变得更加简单和快速，适用于需要实时更新的应用场景。
WebSocket原理
WebSocket协议建立在HTTP协议之上，但它不是HTTP协议的延续，而是HTTP协议升级的一种。客户端通过发送一个HTTP请求来发起WebSocket连接，这个请求包含一个特殊的Upgrade头，表示请求协议从HTTP升级到WebSocket。服务器在接收到这个请求后，如果支持WebSocket协议，则返回一个101状态码，表示切换协议，随后双方就可以通过这个TCP连接进行双向通信。
WebSocket的使用场景
WebSocket非常适合以下应用场景：
- 实时聊天应用：例如即时通讯工具。
- 在线游戏：需要低延迟、高频率的数据交换。
- 实时数据推送：例如股票行情、体育赛事直播。
- 协同编辑工具：例如多人在线文档编辑。
在Spring Boot中集成WebSocket
创建Spring Boot项目
首先，使用Spring Initializr或IDE（如IntelliJ IDEA）创建一个新的Spring Boot项目，选择合适的Spring Boot版本（如2.7.x或3.x），并添加以下依赖：
- Spring Web
- WebSocket
添加依赖
在pom.xml中添加WebSocket的依赖：
<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!-- 其他依赖 -->
</dependencies>
配置WebSocket
创建一个配置类来启用WebSocket支持，并配置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;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*") // 允许跨域.addInterceptors(new MyWebSocketInterceptor()); // 添加拦截器}
}
创建WebSocket处理器
创建一个处理WebSocket消息的处理器类：
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;public class MyWebSocketHandler extends TextWebSocketHandler {@Overridepublic void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {String payload = message.getPayload();// 处理接收到的消息System.out.println("Received: " + payload);session.sendMessage(new TextMessage("Echo: " + payload));}@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {// 连接成功后的逻辑处理System.out.println("Connected: " + session.getId());}
}
添加WebSocket拦截器
为了在WebSocket连接建立之前和断开之后进行一些预处理和后处理，可以添加WebSocket拦截器。
创建一个WebSocket拦截器类：
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;public class MyWebSocketInterceptor implements HandshakeInterceptor {@Overridepublic boolean beforeHandshake(HttpServletRequest request, HttpServletResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {// 在握手之前的逻辑处理System.out.println("Before Handshake");// 可以通过请求参数进行身份验证等return true; // 返回true表示继续握手，返回false表示终止握手}@Overridepublic void afterHandshake(HttpServletRequest request, HttpServletResponse response, WebSocketHandler wsHandler, Exception exception) {// 在握手之后的逻辑处理System.out.println("After Handshake");}
}
配置WebSocket端点
在WebSocketConfig中配置WebSocket端点，如上所示，已经在registerWebSocketHandlers方法中注册了WebSocket处理器和端点。
前端使用WebSocket
在前端使用JavaScript来连接和通信：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>WebSocket Demo</title>
</head>
<body><h1>WebSocket Demo</h1><button onclick="connect()">Connect</button><button onclick="sendMessage()">Send Message</button><script>let socket;function connect() {socket = new WebSocket("ws://localhost:8080/ws");socket.onopen = function(event) {console.log("Connected to WebSocket server.");};socket.onmessage = function(event) {console.log("Received: " + event.data);};socket.onclose = function(event) {console.log("Disconnected from WebSocket server.");};socket.onerror = function(error) {console.log("WebSocket error: " + error);};}function sendMessage() {if (socket) {socket.send("Hello, WebSocket!");}}</script>
</body>
</html>
至此与websocket的集成结束。