Spring Boot如何基于现有WebSocket代码实现多人公共聊天功能？

你现有的后端WebSocket配置、Controller、消息实体和前端页面结构都已符合需求，只需要补充前端STOMP客户端的连接、消息收发逻辑即可完成功能，具体实现步骤如下：

1. 引入前端依赖 #

自行下载sockjs.min.js和stomp.min.js到本地静态资源目录，在JSP页面的</body>标签前引入本地依赖：

<script src="/你的静态资源路径/sockjs.min.js"></script>
<script src="/你的静态资源路径/stomp.min.js"></script>

2. 编写前端核心逻辑 #

同样放在JSP页面底部，依赖引入之后的位置，以下逻辑会自动获取登录用户的用户名，无需用户手动输入：

window.onload = function () {
    // 直接从登录态获取当前用户名，对应你自己登录后存储的session属性名即可
    const username = '${sessionScope.loginUser.username}';
    if (!username) {
        alert('请先登录');
        window.location.href = '/你的登录页面路径';
        return;
    }

    let stompClient = null;
    const messageArea = document.querySelector('#messageArea');
    const connectingElement = document.querySelector('.connecting');
    const messageInput = document.querySelector('#message');
    const sendBtn = document.querySelector('.chat-send-btn');
    const messageForm = document.querySelector('#messageForm');

    // 初始化WebSocket连接
    function connect() {
        const socket = new SockJS('/safespot');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, onConnected, onError);
    }

    // 连接成功回调
    function onConnected() {
        // 订阅公共聊天室消息
        stompClient.subscribe('/topic/public', onMessageReceived);
        // 发送用户加入通知
        stompClient.send("/app/chat.register",
            {},
            JSON.stringify({sender: username, type: 'JOIN'})
        )
        connectingElement.style.display = 'none';
    }

    // 连接失败回调
    function onError(error) {
        connectingElement.textContent = '连接失败，请刷新页面重试';
        connectingElement.style.color = 'red';
    }

    // 发送消息逻辑
    function sendMessage() {
        const content = messageInput.value.trim();
        if (content && stompClient) {
            const chatMessage = {
                sender: username,
                content: content,
                type: 'CHAT'
            };
            stompClient.send("/app/chat.send", {}, JSON.stringify(chatMessage));
            messageInput.value = '';
        }
    }

    // 收到消息后的渲染逻辑
    function onMessageReceived(payload) {
        const message = JSON.parse(payload.body);
        const messageElement = document.createElement('li');

        if (message.type === 'JOIN') {
            messageElement.classList.add('event-message');
            messageElement.textContent = `${message.sender} 加入了聊天`;
        } else if (message.type === 'LEAVE') {
            messageElement.classList.add('event-message');
            messageElement.textContent = `${message.sender} 离开了聊天`;
        } else {
            messageElement.classList.add('chat-message');
            // 可自行加样式区分自己和他人的消息
            if (message.sender === username) {
                messageElement.classList.add('my-message');
            }
            const senderElement = document.createElement('span');
            senderElement.textContent = message.sender + ': ';
            const contentElement = document.createElement('p');
            contentElement.textContent = message.content;
            messageElement.appendChild(senderElement);
            messageElement.appendChild(contentElement);
        }
        messageArea.appendChild(messageElement);
        // 自动滚动到最新消息位置
        messageArea.scrollTop = messageArea.scrollHeight;
    }

    // 绑定发送事件：支持按钮点击和回车发送
    sendBtn.addEventListener('click', sendMessage);
    messageForm.addEventListener('submit', function(e) {
        e.preventDefault();
        sendMessage();
    });

    // 监听页面关闭，发送用户离开通知
    window.onbeforeunload = function () {
        if (stompClient) {
            stompClient.send("/app/chat.send", {}, JSON.stringify({sender: username, type: 'LEAVE'}));
            stompClient.disconnect();
        }
    }

    // 启动连接
    connect();
}

3. 补充基础样式（可选） #

可以在页面CSS中添加以下基础样式，方便区分不同类型的消息：

#messageArea {
    list-style: none;
    padding: 15px;
    height: 400px;
    overflow-y: auto;
    margin: 0;
}
.event-message {
    text-align: center;
    color: #999;
    margin: 8px 0;
    font-size: 14px;
}
.chat-message {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 4px;
    max-width: 70%;
}
.chat-message span {
    font-weight: bold;
    font-size: 14px;
    color: #2d8cf0;
}
.chat-message p {
    margin: 5px 0 0 0;
    word-break: break-all;
}
.my-message {
    margin-left: auto;
    background: #e8f3ff;
}

完成以上步骤后，用户登录成功进入聊天页面即可自动连接聊天室，所有在线用户可以实时收发消息，自动展示发送人用户名。如果需要支持历史消息查看，只需要在后端增加消息存储逻辑，页面加载完成后拉取历史消息渲染即可。

内容的提问来源于stack exchange，提问作者ServletException