当前位置：首页 > article >正文

springboot使用scoket

article 2025/3/1 12:06:08

引入依赖

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

创建一个WebSocketConfig的配置类

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new ChatWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

创建一个ChatWebSocketHandler

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

    private final ObjectMapper objectMapper = new ObjectMapper();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("New connection: " + session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
             String payload = message.getPayload();
             System.out.println("Received message from " + session.getId() + ": " + payload);
            JSONObject jsonObject = new JSONObject(payload);
            // 解析接收到的消息（假设是 JSON 格式）
       
             String question = (String) jsonObject.get("content");

            // 将回答发送回客户端
            Map<String, Object> response = new HashMap<>();
            response.put("type", "answer");
            response.put("name", "Server");
            response.put("content", answer);

            String jsonResponse = objectMapper.writeValueAsString(response);
            System.out.println("Sending response to client: " + jsonResponse);
            session.sendMessage(new TextMessage(jsonResponse));
        }
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Connection closed: " + session.getId());
    }
}

最后在准备一个html的页面进行测试啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
        }
        h1 {
            text-align: center;
        }
        .chat-box {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }
        .message {
            margin: 5px 0;
        }
        .user-message {
            color: blue;
        }
        .server-message {
            color: green;
        }
        input[type="text"] {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>WebSocket Chat</h1>
        <div class="chat-box" id="chatBox"></div>
        <input type="text" id="nameInput" placeholder="Your Name" />
        <input type="text" id="messageInput" placeholder="Type your question here..." />
        <button onclick="sendMessage()">Send</button>
    </div>

    <script>
        const ws = new WebSocket('ws://localhost:8013/ws');
        const chatBox = document.getElementById('chatBox');
        const nameInput = document.getElementById('nameInput');
        const messageInput = document.getElementById('messageInput');

        ws.onopen = function() {
            console.log('Connected to server');
        };

        ws.onmessage = function(event) {
            try {
                const message = JSON.parse(event.data);
                if (message.type === 'answer') {
                    displayMessage(message.name, message.content, 'server-message');
                }
            } catch (error) {
                console.error('Failed to parse message:', error);
            }
        };

        ws.onclose = function() {
            console.log('Disconnected from server');
        };

        function sendMessage() {
            const name = nameInput.value.trim();
            const question = messageInput.value.trim();

            if (name && question) {
                const message = {
                    type: 'question',
                    name: name,
                    content: question
                };
                ws.send(JSON.stringify(message));
                displayMessage(name, question, 'user-message');
                messageInput.value = '';
            } else {
                alert('Please enter both name and question.');
            }
        }

        function displayMessage(name, content, className) {
            const messageElement = document.createElement('div');
            messageElement.className = `message ${className}`;
            messageElement.textContent = `${name}: ${content}`;
            chatBox.appendChild(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
        }
    </script>
</body>
</html>

最后注意更换这个端口