實現步驟 · 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! ----前端輸出---- 服務端：我已經收到消息! ```