Spring Websocket实现文本、图片、声音、文件下载及推送、接收及显示(集群模式)

本文介绍了如何在Spring环境下利用WebSocket实现文本、图片、声音和文件的下载、推送与接收。结合Nginx、Tomcat8.x和Quartz 2.x集群,展示了每20秒随机展示不同类型广告的测试页面。服务器端和客户端代码示例分别阐述了图片处理和显示的方法。作者还邀请架构大牛共创Java云架构交流社区,以提升技术并分享经验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相关环境 Nginx,Spring5.x当前(要选择4.0+),tomcat8.x,Quartz 2.x集群(实际运用是Quartz的集群模式和单机模式共存的)

测试面页:http://sms.reyo.cn/socket.html

每20秒随机显示不同类型的广告:文字、图片、声音),效果如下:

服务器端代码:

发送图片提供了两种方式处理,方便以后调用。

客户端接受并显示图片代码:

<think>好的,我现在需要帮助用户了解如何使用Spring WebSocket实现服务端主动推送更新。用户之前已经询问过定时刷新的方法,现在想进一步优化为实时推送。根据用户提供的引用,特别是引用[1]、[2]、[3]、[4],我需要整合这些信息,给出一个清晰的示例教程。 首先,用户的需求是从定时轮询转向WebSocket实现主动推送。之前的回答提到了优化方案中的WebSocket,现在需要详细展开。需要确保教程步骤明确,代码示例正确,并且覆盖配置、服务端和客户端的实现。 接下来,分析用户提供的引用内容。引用[1]和[2]提到WebSocket的配置类,需要注入ServerEndpointExporter,这在Spring Boot中是必要的。引用[3]强调了配置类的重要性,可能用户之前遇到过问题,所以需要特别说明。引用[4]展示了前端通过AJAX发送消息,但用户现在需要的是服务端主动推送,所以可能需要调整前端代码来监听WebSocket消息。 需要确保教程包括以下几个部分:添加依赖、配置WebSocket、服务端端点、前端连接和接收消息。同时,需要示例如何主动推送,比如通过定时任务模拟,或者业务逻辑触发。此外,需要提到如何测试和验证功能是否正常工作。 还要考虑用户可能的疑问,比如如何与之前的REST API结合,或者如何处理多个客户端连接。不过用户当前的问题主要集中在实现主动推送的示例,所以应集中在这个核心部分。 最后,检查是否有遗漏的步骤,比如依赖是否完整,配置是否正确,前端代码是否正确处理消息接收。同时,确保引用正确的来源,比如引用中的配置类和方法,确保示例代码的准确性。</think>以下是使用Spring WebSocket实现服务端主动推送更新的完整示例教程: --- ### 一、实现原理 WebSocket协议支持全双工通信,服务端可直接向客户端推送数据,无需客户端轮询请求[^1]。Spring通过`@ServerEndpoint`注解和消息监听机制实现该功能。 --- ### 二、实现步骤 #### 1. 添加依赖(`pom.xml`) ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` #### 2. 配置WebSocket支持(核心配置) ```java @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); // 必须注入此Bean[^3] } } ``` #### 3. 服务端端点实现 ```java @ServerEndpoint("/websocket/todo-updates") @Component public class TodoUpdateEndpoint { private static final Map<String, Session> sessions = new ConcurrentHashMap<>(); // 建立连接时触发 @OnOpen public void onOpen(Session session) { sessions.put(session.getId(), session); sendMessage(session, "连接已建立"); } // 关闭连接时触发 @OnClose public void onClose(Session session) { sessions.remove(session.getId()); } // 主动推送消息方法 public static void broadcast(String message) { sessions.forEach((id, session) -> { if (session.isOpen()) { sendMessage(session, message); } }); } private static void sendMessage(Session session, String message) { try { session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } } } ``` #### 4. 业务逻辑触发推送(示例) ```java @Service public class TodoService { @Autowired private SimpMessagingTemplate messagingTemplate; public void completeTodo(String todoId) { // 业务逻辑处理... // 主动推送通知 messagingTemplate.convertAndSend("/topic/todo-updates", new TodoUpdateEvent(todoId, "已完成")); } } ``` #### 5. 前端实现WebSocket客户端) ```html <!DOCTYPE html> <script> const socket = new WebSocket('ws://' + window.location.host + '/websocket/todo-updates'); // 接收服务端推送 socket.onmessage = function(event) { const data = JSON.parse(event.data); console.log('收到更新:', data); updateTodoList(data); // 更新页面数据 }; // 断线重连机制 socket.onclose = function() { setTimeout(() => { location.reload(); }, 5000); }; </script> ``` --- ### 三、主动推送的三种方式 1. **定时推送**(模拟场景) ```java @Scheduled(fixedRate = 30000) public void sendPeriodicUpdates() { List<Todo> updates = todoRepository.findRecentUpdates(); TodoUpdateEndpoint.broadcast(JSON.toJSONString(updates)); } ``` 2. **业务事件触发** ```java @EventListener public void handleTodoChange(TodoChangeEvent event) { messagingTemplate.convertAndSend("/topic/todo-updates", event.getData()); } ``` 3. **手动触发推送** ```java @PostMapping("/notify-update") public void manualNotify(@RequestBody String message) { TodoUpdateEndpoint.broadcast(message); } ``` --- ### 四、测试验证 1. 启动应用后访问前端页面 2. 打开浏览器开发者工具 -> Network -> WS 查看连接状态 3. 通过Postman调用业务接口触发推送 4. 观察前端控制台是否实时接收数据 --- ### 五、优化建议 1. **心跳检测**:添加`@OnMessage`处理心跳包保持连接 2. **消息压缩**:对大型数据启用`config.setMessageSizeLimit(1024 * 1024)` 3. **集群支持**:集成Redis的Pub/Sub实现多实例消息同步[^1] --- --相关问题-- 1. 如何保证WebSocket消息的可靠传输? 2. WebSocket协议与HTTP长轮询有何本质区别? 3. 在微服务架构中如何实现跨服务WebSocket推送
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值