<dependency>
?? ?<groupId>org.springframework.boot</groupId>
?? ?<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.繼承父類TextWebSocketHandler，重寫API代碼

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

//將該類注入到spring
@Component
public class WebsocketTest extends TextWebSocketHandler {
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("連接建立成功");
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        //message.getPayload得到數據載荷
        System.out.println("收到的消息：" + message.getPayload());

        //服務器將消息返回給客戶端
        session.sendMessage(message);
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("連接異常");
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("連接關閉");
    }
}

3.注冊

將websocketTest進行注冊與路徑"/websocket"進行關聯，最上面加入@EnableWebSocket注解，開啟WebSocket服務。

import com.example.gobang.TestDemo.WebsocketTest;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import javax.annotation.Resource;

@Configuration
@EnableWebSocket//開啟WebSocket
public class RegWebSocket implements WebSocketConfigurer {

    @Resource
    private WebsocketTest websocketTest;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        //將WebsocketTest類進行注冊與路徑"/websocket"進行關聯
        registry.addHandler(websocketTest,"/websocket");
    }
}

前端

<input type="text"  id="msg">
    <button id="submit">提交</button>
    <script>
        //創建websocket實例
        let webScoket = new WebSocket("ws://127.0.0.1:8080/websocket");

        webScoket.onopen = function(){
            console.log("連接建立");
        }

        webScoket.onmessage = function(e){
            console.log("收到消息：" + e.data);
        }

        webScoket.onerror = function(){
            console.log("連接異常");
        }

        webScoket.onclose = function(){
            console.log("連接關閉");
        }


        //點擊按鈕。通過websocket發送請求

        let msg = document.querySelector("#msg");
        let webBtn = document.querySelector("#submit");
        webBtn.onclick = function(){
            console.log("發送消息：" + msg.value);
            webScoket.send(msg.value);
        }
    </script>

4.結果