spring boot+vue+websocket带token身份认证推送消息实现

本知识点将介绍如何在Spring Boot与Vue前后端分离架构中集成WebSocket，并实现带有身份认证的消息推送功能。这是实现即时通讯、实时数据更新等应用场景的常用技术方案。 ### 1. WebSocket简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务器主动向客户端推送信息。对于实现聊天系统、实时通知等功能非常有用。与HTTP相比，WebSocket能够实现真正的双向通信，而非HTTP的请求-响应模式。 ### 2. Spring Boot集成WebSocket Spring Boot通过引入`spring-boot-starter-websocket`模块可以轻松集成WebSocket。在`pom.xml`文件中添加以下依赖，以支持WebSocket的依赖管理： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` Spring Boot提供了自动配置的选项来支持WebSocket。通过`@EnableWebSocket`注解启用WebSocket支持。另外，还可以通过`WebSocketMessageBrokerConfigurer`接口配置消息代理。 ### 3. WebSocket配置 配置部分主要负责配置WebSocket端点。以下是一个简单的配置示例： ```java @Configuration public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/websocket").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic"); registry.setApplicationDestinationPrefixes("/app"); } } ``` ### 4. WebSocket服务端 服务端代码使用`@ServerEndpoint`注解标记一个类作为WebSocket服务端点。`onOpen`、`onClose`和`onMessage`方法分别处理连接建立、关闭和接收消息的事件。 ```java @Component @ServerEndpoint("/websocket/{userId}") @Slf4j public class WebSocketServer { private static int onlineCount = 0; private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<>(); private Session session; private Integer userId; @OnOpen public void onOpen(Session session, @PathParam("userId") Integer userId) { this.session = session; webSocketSet.add(this); addOnlineCount(); ***("用户ID:" + userId + "连接成功,当前在线人数为" + getOnlineCount()); this.userId = userId; try { sendMessage(userId, "消息服务器连接成功"); } catch (IOException e) { e.printStackTrace(); log.error("WebSocketIO异常"); } } @OnClose public void onClose() { webSocketSet.remove(this); subOnlineCount(); ***("有一连接关闭！当前在线人数为:" + getOnlineCount()); } @OnMessage public void onMessage(String messageStr) { // 实现消息接收处理逻辑 } // 实现消息发送的方法 public void sendMessage(Integer userId, String message) throws IOException { // 发送消息逻辑 } } ``` ### 5. 身份认证 为了确保安全性，WebSocket通信需要进行身份认证。通常是在WebSocket连接建立之前，使用HTTP的`Authorization`头部进行身份认证。认证成功后，服务器端生成一个令牌（token），例如JWT（JSON Web Token），返回给客户端。客户端在后续的WebSocket连接请求中将此token附加在HTTP头部中，服务器端接收token并验证合法性。 ```java // 在WebSocket连接前进行token验证逻辑 ``` ### 6. 消息推送 消息推送的核心在于WebSocket服务端接收到消息后，根据业务逻辑选择合适的目标用户或用户组，然后通过WebSocket会话向客户端推送消息。 ```java // 消息推送逻辑 public void pushMessageToUser(Integer userId, String message) { // 寻找对应用户对应的WebSocket会话 // 发送消息到该会话 } ``` ### 7. Vue前端实现 Vue前端实现通常会使用`sockjs`和`stomp.js`库来实现与后端WebSocket的交互。连接建立后，可以通过订阅服务器发布到特定主题的消息来接收消息推送。 ```javascript // Vue前端连接WebSocket示例代码 var socket = new SockJS('/websocket'); var stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { console.log('Connected: ' + frame); stompClient.subscribe('/topic/messages', function(messageOutput) { var message = JSON.parse(messageOutput.body); console.log(message); }); }); ``` ### 总结 本知识点介绍了Spring Boot集成WebSocket，并在前后端分离的架构下，通过身份认证实现消息推送功能的关键实现步骤。重点涉及了WebSocket的配置和编程模型、消息推送机制、以及前后端实现细节。通过掌握这些知识点，可以在实际项目中设计和实现高性能的实时通信系统。