案例代碼：https://gitee.com/flymini/example-codes/tree/master/WebSocket_/com-learn-websocket04 **** 實現客戶端向后端發送數據，然后后端將數據推送到前端。 <br/> 步驟如下： **1. 創建一個 SpringBoot 項目** ```xml <!-- 引入 websocket 依賴 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` **2. 編寫掃描注解`@ServerEndpoint`的配置類** ```java @Configuration public class WebSocketConfig { /** * 掃描標注了注解 @ServerEndpoint 的類，讓被標注的類成為 WebSocket 的服務類 */ @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` **3. 編寫 WebSocket 服務類** ```java /** * value：當前 WebSocket 服務的訪問地址 */ @Component @ServerEndpoint(value = "/v1/endpoint") public class EndPointController { /** * 連接建立時被調用。 */ @OnOpen public void onOpen(Session session, EndpointConfig config) { System.out.println("連接已經建立."); } /** * 收到消息時被調用。 * @param message 前端傳遞過來的消息。 * @param session */ @OnMessage public void onMessage(String message, Session session) throws IOException { System.out.println("收到了消息：" + message); //將消息推送到前端 session.getBasicRemote().sendText("謝謝，我收到了你的消息：" + message); } /** * 連接關閉時被調用. * * @param session * @param reason 關閉的理由 */ @OnClose public void onClose(Session session, CloseReason reason) { System.out.println("連接已關閉，關閉理由：" + reason); } /** * 當連接發生異常時被調用 * * @param session * @param e */ @OnError public void onError(Session session, Throwable e) { System.out.println("連接發生異常：" + e.getMessage()); e.printStackTrace(); } } ``` **4. 前端程序** ```js var sock = null /** * 建立連接 */ function connect() { sock = new WebSocket('ws://localhost:8090/v1/endpoint') //當接收到服務端推送過來的消息時被觸發 sock.onmessage = (e) => { console.log(e.data) } } /** * 發送數據到服務端 */ function send() { sock.send('Hello World!') } /** * 關閉當前用戶與WebSocket的連接 */ function close() { sock.close(3000, "我想關閉連接！") } ```