实现步骤 · Java后端框架Ⅲ

示例：前端发送数据到后端，然后后端推送数据到前端。 <br/> **1. 一个SpringBoot项目** ```xml  <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> </dependencies> ``` **2. 注册websocket配置类** ```java /** * 1. 实现接口 WebSocketMessageBrokerConfigurer * 2. @EnableWebSocketMessageBroker将当前类标注为websocket服务器 */ @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 注册websocket服务器的访问地址 */ @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/endpoint-websocket") //websocket服务器访问地址 .setAllowedOrigins("*") //允许跨越访问 .withSockJS(); //支持客户端使用socketjs连接 } /** * 配置消息代理 */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { //服务端向客户端通信时需要添加的地址前缀 registry.enableSimpleBroker("/topic"); //客户端向服务端通信时需要添加的地址前缀 registry.setApplicationDestinationPrefixes("/app"); } } ``` **3. controller层代码** ```java @RestController public class TestController { @MessageMapping("/v1/chat") public String chatInfo(String message) { System.out.println("服务端收到消息：" + message); return "服务端：我已经收到消息!"; } } ``` **4. 前端代码** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Websocket03</title> <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script> <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script> <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script> </head> <body> <div id="app"> <button onclick="connect()">建立连接</button> <br/> <button onclick="disconnect()">断开连接</button> <br/> <button onclick="send()">发送数据</button> <br/> </div> </body> <script type="text/javascript"> var client = null /** * 连接服务端 */ function connect() { const socket = new SockJS('http://localhost:8083/endpoint-websocket') client = Stomp.over(socket) client.connect({}, (frame) => { console.info("服务端已连接：", frame) }) } /** * 断开与服务端的连接 */ function disconnect() { if (client != null) { client.disconnect() } console.info('已断开连接') } /** * 向服务端发送消息并获取响应 */ function send() { //客户端向服务端发送数据，注意看地址是以/app为前缀 client.send('/app/v1/chat', {}, 'Hello World!') //获取服务端返回的数据，注意看是以/topic为前缀 client.subscribe('/topic/v1/chat', (res) => { console.info(res.body) }) } </script> </html> ``` **5. 效果演示** 当前端发送消息到后端后，输出如下。 ``` ----后端输出---- 服务端收到消息：Hello World! ----前端输出---- 服务端：我已经收到消息! ```