SpringBoot与AngularJS实现WebSocket通信教程

"本文将详细介绍如何使用Spring框架的WebSocket功能创建通信服务，并提供相关的示例代码。内容包括后台服务的构建、前端AngularJS的集成，以及必要的依赖引入。" 在现代Web开发中，实时通信的需求日益增加，Spring框架为此提供了WebSocket支持，允许服务器与客户端进行双向通信。本示例将指导你如何在Spring Boot项目中实现WebSocket通信服务。 首先，我们需要在项目中添加WebSocket的依赖。在pom.xml文件中，引入以下依赖： ```xml <dependencies> <!-- Spring Boot WebSocket starter --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <!-- 其他相关依赖，如WebJars用于前端库的引用 --> ... </dependencies> ``` 接着，配置WebSocket的相关设置。在Spring Boot的配置类（如`WebSocketConfig.java`）中，你需要注册一个WebSocket处理程序和路径： ```java @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws").withSockJS(); } } ``` 这里的`/topic`是消息代理的前缀，`/app`是应用的消息前缀。`StompEndpointRegistry`的`addEndpoint`方法用于指定WebSocket的接入点，`withSockJS`则启用SockJS fallback机制，以保证在WebSocket不支持的浏览器中也能正常工作。 接下来，我们需要创建一个消息处理类，用于发送和接收WebSocket消息。例如： ```java @Service public class WebSocketService { private SimpMessagingTemplate messagingTemplate; @Autowired public WebSocketService(SimpMessagingTemplate messagingTemplate) { this.messagingTemplate = messagingTemplate; } public void sendMessage(String destination, String message) { messagingTemplate.convertAndSend(destination, message); } } ``` 前端使用AngularJS时，可以借助Stomp.js和SockJS库来建立WebSocket连接。以下是一个简单的AngularJS组件示例： ```javascript angular.module('app').component('websocketComponent', { controller: function WebSocketCtrl($scope, $location) { var socket = new SockJS('/ws'); var stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { console.log('Connected: ' + frame); stompClient.subscribe('/topic/messages', function(messageOutput) { $scope.$apply(function() { var message = JSON.parse(messageOutput.body); // 处理接收到的消息 }); }); }); // 发送消息 this.sendMessage = function(message) { stompClient.send("/app/sendMessage", {}, JSON.stringify({ 'message': message })); }; } }); ``` 在以上代码中，前端订阅了`/topic/messages`主题，当后台通过`/topic/messages`发布消息时，前端就能接收到并进行处理。同时，`sendMessage`方法用于向后台发送消息。 通过以上步骤，你就成功地在Spring Boot项目中集成了WebSocket通信服务，并与AngularJS前端进行了交互。这个示例代码可以作为一个基础模板，根据实际需求进行扩展和定制，实现更复杂的实时通信场景。