Spring Boot整合WebSocket案例

wen java案例 2026-08-10 96

本文目录导读：

项目结构
Maven依赖配置 (pom.xml)
主启动类
WebSocket配置类
握手拦截器
WebSocket处理器
WebSocketSession管理器
消息DTO（可选，如果使用JSON消息）
控制器
页面文件 (static/chat.html)
application.yml配置文件
前端测试页面
Maven和运行
测试指南

我来为您提供一个完整的Spring Boot整合WebSocket的实战案例。

项目结构

springboot-websocket-demo
├── pom.xml
├── src/main/java/com/example/websocket/
│   ├── WebSocketApplication.java
│   ├── config/
│   │   └── WebSocketConfig.java
│   ├── controller/
│   │   └── ChatController.java
│   ├── websocket/
│   │   ├── ChatWebSocketHandler.java
│   │   ├── WebSocketSessionManager.java
│   │   └── WebSocketServer.java
│   └── dto/
│       └── Message.java
└── src/main/resources/
    ├── application.yml
    └── static/
        └── index.html

Maven依赖配置 (pom.xml)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.14</version>
        <relativePath/>
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springboot-websocket-demo</artifactId>
    <version>1.0.0</version>
    <name>springboot-websocket-demo</name>
    <description>Spring Boot WebSocket Demo</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <!-- Spring Boot Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- WebSocket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- Thymeleaf模板 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- Lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- Spring Boot Test -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

主启动类

package com.example.websocket;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class WebSocketApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebSocketApplication.class, args);
    }
}

WebSocket配置类

package com.example.websocket.config;
import com.example.websocket.websocket.ChatWebSocketHandler;
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 org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;
import javax.annotation.Resource;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Resource
    private ChatWebSocketHandler chatWebSocketHandler;
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler, "/chat")
                .addInterceptors(new ChatHandshakeInterceptor())
                .setAllowedOrigins("*");
        // 支持SockJS
        registry.addHandler(chatWebSocketHandler, "/chat-sockjs")
                .addInterceptors(new ChatHandshakeInterceptor())
                .setAllowedOrigins("*")
                .withSockJS();
    }
}

握手拦截器

package com.example.websocket.config;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.http.server.ServletServerHttpRequest;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.HandshakeInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Map;
public class ChatHandshakeInterceptor implements HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response,
                                   WebSocketHandler wsHandler, Map<String, Object> attributes) {
        if (request instanceof ServletServerHttpRequest) {
            ServletServerHttpRequest servletRequest = (ServletServerHttpRequest) request;
            HttpServletRequest httpServletRequest = servletRequest.getServletRequest();
            // 获取请求参数
            String userName = httpServletRequest.getParameter("username");
            if (userName == null || userName.trim().isEmpty()) {
                return false;
            }
            attributes.put("username", userName);
            return true;
        }
        return false;
    }
    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response,
                               WebSocketHandler wsHandler, Exception exception) {
        // 握手完成后的处理
    }
}

WebSocket处理器

package com.example.websocket.websocket;
import com.example.websocket.dto.Message;
import com.fasterxml.jackson.databind.ObjectMapper;
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;
import org.springframework.util.StringUtils;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {
    // 存储所有在线连接的用户
    private static final Map<String, WebSocketSession> ONLINE_USERS = new ConcurrentHashMap<>();
    // 存储用户与连接的映射
    private static final Map<String, String> SESSION_USER_MAP = new ConcurrentHashMap<>();
    private final ObjectMapper objectMapper = new ObjectMapper();
    /**
     * 连接建立后
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String username = (String) session.getAttributes().get("username");
        if (username != null) {
            // 判断是否已存在同名的连接
            if (ONLINE_USERS.containsKey(username)) {
                // 给用户发送错误消息并关闭连接
                session.sendMessage(new TextMessage("用户名已存在，请更换用户名后再试"));
                session.close();
                return;
            }
            ONLINE_USERS.put(username, session);
            SESSION_USER_MAP.put(session.getId(), username);
            // 广播新用户加入消息
            broadcastOnlineUsers();
            // 发送欢迎消息
            session.sendMessage(new TextMessage(objectMapper.writeValueAsString(
                Message.success("系统", "欢迎 " + username + "，连接成功！")
            )));
            System.out.println("用户 " + username + " 已连接");
        }
    }
    /**
     * 接收消息
     */
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String username = SESSION_USER_MAP.get(session.getId());
        if (username == null) {
            return;
        }
        String payload = message.getPayload();
        System.out.println("收到用户 " + username + " 的消息: " + payload);
        // 解析消息
        Message msg;
        try {
            msg = objectMapper.readValue(payload, Message.class);
        } catch (Exception e) {
            msg = Message.builder()
                    .from(username)
                    .content(payload)
                    .type(Message.MessageType.CHAT)
                    .timestamp(System.currentTimeMillis())
                    .build();
        }
        // 设置发送者
        msg.setFrom(username);
        // 根据消息类型发送
        switch (msg.getType()) {
            case CHAT:
                // 群聊消息，广播给所有用户
                if (StringUtils.isEmpty(msg.getTo())) {
                    broadcastMessage(msg);
                } else {
                    // 私聊消息
                    sendPrivateMessage(msg);
                }
                break;
            case JOIN:
                broadcastOnlineUsers();
                break;
            case LEAVE:
                // 用户离开
                break;
        }
    }
    /**
     * 连接关闭后
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        String username = SESSION_USER_MAP.remove(session.getId());
        if (username != null) {
            ONLINE_USERS.remove(username);
            System.out.println("用户 " + username + " 已断开连接");
            // 广播在线用户列表更新
            broadcastOnlineUsers();
        }
    }
    /**
     * 连接异常
     */
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.out.println("连接发生错误: " + session.getId() + " - " + exception.getMessage());
        if (session.isOpen()) {
            session.close();
        }
    }
    /**
     * 处理Ping消息
     */
    @Override
    protected void handlePongMessage(WebSocketSession session, org.springframework.web.socket.PongMessage message) throws Exception {
        super.handlePongMessage(session, message);
    }
    /**
     * 广播在线用户列表
     */
    private void broadcastOnlineUsers() throws IOException {
        Map<String, Object> data = new ConcurrentHashMap<>();
        data.put("type", "ONLINE_USERS");
        data.put("users", ONLINE_USERS.keySet());
        String message = objectMapper.writeValueAsString(data);
        for (WebSocketSession session : ONLINE_USERS.values()) {
            synchronized (session) {
                if (session.isOpen()) {
                    session.sendMessage(new TextMessage(message));
                }
            }
        }
    }
    /**
     * 广播消息给所有用户
     */
    private void broadcastMessage(Message message) throws IOException {
        String jsonMessage = objectMapper.writeValueAsString(message);
        for (WebSocketSession session : ONLINE_USERS.values()) {
            synchronized (session) {
                if (session.isOpen()) {
                    session.sendMessage(new TextMessage(jsonMessage));
                }
            }
        }
    }
    /**
     * 发送私聊消息
     */
    private void sendPrivateMessage(Message message) throws IOException {
        // 发送给目标用户
        WebSocketSession targetSession = ONLINE_USERS.get(message.getTo());
        if (targetSession != null && targetSession.isOpen()) {
            synchronized (targetSession) {
                targetSession.sendMessage(new TextMessage(objectMapper.writeValueAsString(message)));
            }
        }
        // 也发给发送者，并标记为私聊
        message.setPrivate(true);
        WebSocketSession senderSession = ONLINE_USERS.get(message.getFrom());
        if (senderSession != null && senderSession.isOpen()) {
            synchronized (senderSession) {
                senderSession.sendMessage(new TextMessage(objectMapper.writeValueAsString(message)));
            }
        }
    }
    /**
     * 主动发送消息给指定用户
     */
    public boolean sendMessageToUser(String username, String content) throws IOException {
        WebSocketSession session = ONLINE_USERS.get(username);
        if (session != null && session.isOpen()) {
            Message message = Message.builder()
                    .from("server")
                    .content(content)
                    .type(Message.MessageType.CHAT)
                    .timestamp(System.currentTimeMillis())
                    .build();
            synchronized (session) {
                session.sendMessage(new TextMessage(objectMapper.writeValueAsString(message)));
            }
            return true;
        }
        return false;
    }
    /**
     * 获取在线用户数量
     */
    public int getOnlineUserCount() {
        return ONLINE_USERS.size();
    }
    /**
     * 获取所有在线用户名
     */
    public Map<String, WebSocketSession> getOnlineUsers() {
        return ONLINE_USERS;
    }
}

WebSocketSession管理器

package com.example.websocket.websocket;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketSession;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Component
public class WebSocketSessionManager {
    private static final Map<String, WebSocketSession> SESSIONS = new ConcurrentHashMap<>();
    /**
     * 添加会话
     */
    public void add(String userId, WebSocketSession session) {
        SESSIONS.put(userId, session);
    }
    /**
     * 移除会话
     */
    public void remove(String userId) {
        SESSIONS.remove(userId);
    }
    /**
     * 获取会话
     */
    public WebSocketSession get(String userId) {
        return SESSIONS.get(userId);
    }
    /**
     * 会话是否存在
     */
    public boolean exists(String userId) {
        return SESSIONS.containsKey(userId);
    }
    /**
     * 保存用户和session的关联
     */
    public void saveSession(String userId, WebSocketSession session) {
        add(userId, session);
    }
    /**
     * 获取所有在线用户
     */
    public Map<String, WebSocketSession> getAllSessions() {
        return SESSIONS;
    }
    /**
     * 发送消息给指定用户
     */
    public boolean sendMessage(String userId, String message) throws IOException {
        WebSocketSession session = SESSIONS.get(userId);
        if (session != null && session.isOpen()) {
            session.sendMessage(new org.springframework.web.socket.TextMessage(message));
            return true;
        }
        return false;
    }
    /**
     * 关闭指定用户的连接
     */
    public void closeSession(String userId) throws IOException {
        WebSocketSession session = SESSIONS.get(userId);
        if (session != null && session.isOpen()) {
            session.close();
        }
        remove(userId);
    }
    /**
     * 关闭所有连接
     */
    public void closeAllSessions() throws IOException {
        for (WebSocketSession session : SESSIONS.values()) {
            if (session.isOpen()) {
                session.close();
            }
        }
        SESSIONS.clear();
    }
    /**
     * 统计数据
     */
    public int getOnlineCount() {
        return SESSIONS.size();
    }
}

消息DTO（可选，如果使用JSON消息）

package com.example.websocket.dto;
import lombok.Data;
import lombok.Builder;
/**
 * 消息对象
 */
@Data
@Builder
public class Message {
    private MessageType type;
    private String from;
    private String to;
    private String content;
    private Long timestamp;
    private boolean isPrivate;
    public enum MessageType {
        CHAT, JOIN, LEAVE
    }
}

控制器

package com.example.websocket.controller;
import com.example.websocket.websocket.ChatWebSocketHandler;
import com.example.websocket.websocket.WebSocketSessionManager;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.Map;
@Controller
public class ChatController {
    @Resource
    private ChatWebSocketHandler chatWebSocketHandler;
    @Resource
    private WebSocketSessionManager sessionManager;
    /**
     * 聊天页面
     */
    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("users", chatWebSocketHandler.getOnlineUsers().keySet());
        return "chat";
    }
    /**
     * 获取在线用户
     */
    @GetMapping("/online-users")
    @ResponseBody
    public Map<String, Object> getOnlineUsers() {
        Map<String, Object> result = new HashMap<>();
        result.put("success", true);
        result.put("users", chatWebSocketHandler.getOnlineUsers().keySet());
        result.put("count", chatWebSocketHandler.getOnlineUserCount());
        return result;
    }
    /**
     * 发送消息给指定用户
     */
    @PostMapping("/send-message")
    @ResponseBody
    public Map<String, Object> sendMessage(@RequestParam("to") String to,
                                           @RequestParam("content") String content) {
        Map<String, Object> result = new HashMap<>();
        try {
            boolean success = chatWebSocketHandler.sendMessageToUser(to, content);
            result.put("success", success);
            result.put("message", success ? "消息发送成功" : "用户不在线");
            return result;
        } catch (Exception e) {
            result.put("success", false);
            result.put("message", "消息发送失败: " + e.getMessage());
            return result;
        }
    }
    /**
     * 关闭指定用户的连接
     */
    @PostMapping("/disconnect")
    @ResponseBody
    public Map<String, Object> disconnect(@RequestParam("userId") String userId) {
        Map<String, Object> result = new HashMap<>();
        try {
            sessionManager.closeSession(userId);
            result.put("success", true);
            result.put("message", "已关闭用户 " + userId + " 的连接");
            return result;
        } catch (Exception e) {
            result.put("success", false);
            result.put("message", "关闭连接失败: " + e.getMessage());
            return result;
        }
    }
    /**
     * 重新加载配置（测试用）
     */
    @GetMapping("/test-send")
    @ResponseBody
    public Map<String, Object> testSend() {
        Map<String, Object> result = new HashMap<>();
        try {
            String message = "测试消息: " + System.currentTimeMillis();
            chatWebSocketHandler.sendMessageToUser("test", message);
            result.put("success", true);
            result.put("message", message);
            return result;
        } catch (Exception e) {
            result.put("success", false);
            result.put("message", "发送失败: " + e.getMessage());
            return result;
        }
    }
}

页面文件 (static/chat.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">WebSocket聊天室</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        .chat-container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        .chat-header {
            background: #4a90d9;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-main {
            display: flex;
            height: 500px;
        }
        .chat-sidebar {
            width: 250px;
            background: #f8f9fa;
            padding: 15px;
            border-right: 1px solid #dee2e6;
        }
        .chat-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            background: #e9ecef;
        }
        .chat-input {
            padding: 15px;
            background: white;
            border-top: 1px solid #dee2e6;
        }
        .message {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
            max-width: 70%;
        }
        .message.received {
            background: white;
            float: left;
            clear: both;
            border: 1px solid #dee2e6;
        }
        .message.sent {
            background: #4a90d9;
            color: white;
            float: right;
            clear: both;
        }
        .message .message-user {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .message .message-time {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .online-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .online-list-item {
            padding: 8px 10px;
            margin-bottom: 5px;
            background: #e9ecef;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .online-list-item:hover {
            background: #dee2e6;
        }
        .online-list-item.selected {
            background: #4a90d9;
            color: white;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background: #4a90d9;
            color: white;
            cursor: pointer;
            margin-right: 10px;
        }
        .btn:hover {
            background: #357abd;
        }
        .btn-danger {
            background: #dc3545;
        }
        .btn-danger:hover {
            background: #c82333;
        }
        input[type="text"] {
            padding: 10px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            flex: 1;
            margin-right: 10px;
        }
        .system-message {
            text-align: center;
            color: #666;
            font-size: 14px;
            padding: 10px;
        }
        .connection-status {
            font-size: 14px;
            color: #28a745;
        }
        .connection-status.disconnected {
            color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <h2>WebSocket 聊天室</h2>
            <div id="connectionStatus" class="connection-status">连接中...</div>
        </div>
        <div class="chat-main">
            <!-- 在线用户列表 -->
            <div class="chat-sidebar">
                <h4>在线用户 (<span id="onlineCount">0</span>)</h4>
                <ul id="onlineList" class="online-list"></ul>
            </div>
            <!-- 聊天区域 -->
            <div class="chat-content">
                <div id="messages" class="chat-messages"></div>
                <div class="chat-input">
                    <div style="margin-bottom: 10px;">
                        <span id="targetDisplay">所有人</span>
                    </div>
                    <div style="display: flex;">
                        <input type="text" id="messageInput" placeholder="输入消息..." />
                        <button class="btn" onclick="sendMessage()">发送</button>
                        <button class="btn btn-danger" onclick="leaveRoom()">退出</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录弹窗 -->
    <div id="loginModal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000;">
        <div style="background: white; padding: 30px; border-radius: 10px; text-align: center;">
            <h3>请输入昵称</h3>
            <input type="text" id="loginInput" placeholder="你的昵称" style="margin: 20px 0; width: 100%;" />
            <button class="btn" onclick="login()">进入聊天室</button>
        </div>
    </div>
    <script>
        let ws = null;
        let username = '';
        let isConnected = false;
        let currentTarget = '';
        // 登录
        function login() {
            username = document.getElementById('loginInput').value.trim();
            if (!username) {
                alert('请输入昵称');
                return;
            }
            // 隐藏登录弹窗
            document.getElementById('loginModal').style.display = 'none';
            // 连接WebSocket
            connectWebSocket();
        }
        // 连接WebSocket
        function connectWebSocket() {
            // 构建WebSocket URL
            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
            const url = `${protocol}://${location.host}/chat?username=${encodeURIComponent(username)}`;
            try {
                ws = new WebSocket(url);
                // 连接打开
                ws.onopen = function() {
                    console.log('WebSocket连接已建立');
                    document.getElementById('connectionStatus').textContent = '已连接';
                    document.getElementById('connectionStatus').classList.remove('disconnected');
                    isConnected = true;
                };
                // 接收消息
                ws.onmessage = function(event) {
                    const data = JSON.parse(event.data);
                    handleMessage(data);
                };
                // 连接关闭
                ws.onclose = function(event) {
                    console.log('WebSocket连接已关闭');
                    document.getElementById('connectionStatus').textContent = '已断开';
                    document.getElementById('connectionStatus').classList.add('disconnected');
                    isConnected = false;
                };
                // 连接错误
                ws.onerror = function(error) {
                    console.log('WebSocket连接错误:', error);
                    document.getElementById('connectionStatus').textContent = '连接错误';
                    document.getElementById('connectionStatus').classList.add('disconnected');
                    isConnected = false;
                };
            } catch (error) {
                console.error('WebSocket连接失败:', error);
                alert('连接WebSocket失败');
            }
        }
        // 处理接收到的消息
        function handleMessage(data) {
            switch(data.type) {
                case 'CHAT':
                    displayMessage(data);
                    break;
                case 'ONLINE_USERS':
                    updateOnlineUsers(data.users);
                    break;
                default:
                    console.log('未知消息类型:', data.type);
            }
        }
        // 显示消息
        function displayMessage(message) {
            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.className = 'message ' + (message.from === username ? 'sent' : 'received');
            const userElement = document.createElement('div');
            userElement.className = 'message-user';
            userElement.textContent = message.from === username ? '我' : message.from;
            const contentElement = document.createElement('div');
            contentElement.textContent = message.content;
            const timeElement = document.createElement('div');
            timeElement.className = 'message-time';
            const time = new Date(message.timestamp);
            timeElement.textContent = `${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
            messageElement.appendChild(userElement);
            messageElement.appendChild(contentElement);
            messageElement.appendChild(timeElement);
            // 如果是私聊消息，显示标记
            if (message.isPrivate) {
                const privateTag = document.createElement('span');
                privateTag.style.cssText = 'background: #ffc107; padding: 2px 5px; border-radius: 3px; font-size: 12px; margin-left: 10px;';
                privateTag.textContent = '私聊';
                userElement.appendChild(privateTag);
            }
            messagesDiv.appendChild(messageElement);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        // 更新在线用户列表
        function updateOnlineUsers(users) {
            const listElement = document.getElementById('onlineList');
            listElement.innerHTML = '';
            document.getElementById('onlineCount').textContent = users.length;
            users.forEach(user => {
                const item = document.createElement('li');
                item.className = 'online-list-item';
                item.textContent = user;
                item.onclick = function() {
                    currentTarget = user;
                    document.getElementById('targetDisplay').textContent = '发送给: ' + user;
                    // 选中效果
                    const items = document.querySelectorAll('.online-list-item');
                    items.forEach(i => i.classList.remove('selected'));
                    this.classList.add('selected');
                };
                listElement.appendChild(item);
            });
        }
        // 发送消息
        function sendMessage() {
            if (!isConnected) {
                alert('连接已断开');
                return;
            }
            const input = document.getElementById('messageInput');
            const content = input.value.trim();
            if (!content) return;
            const message = {
                type: 'CHAT',
                from: username,
                to: currentTarget,
                content: content,
                timestamp: Date.now()
            };
            ws.send(JSON.stringify(message));
            input.value = '';
        }
        // 退出聊天室
        function leaveRoom() {
            if (ws) {
                ws.close();
            }
            // 重新显示登录弹窗
            document.getElementById('loginModal').style.display = 'flex';
            document.getElementById('loginInput').value = '';
            username = '';
            document.getElementById('messages').innerHTML = '';
        }
        // 支持回车发送
        document.getElementById('messageInput').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });
        // 页面加载时自动聚焦登录输入框
        window.onload = function() {
            document.getElementById('loginInput').focus();
        };
    </script>
</body>
</html>

application.yml配置文件

server:
  port: 8080
spring:
  application:
    name: springboot-websocket-demo
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    cache: false
websocket:
  # WebSocket配置
  endpoint: /chat
  allowed-origins: "*"
  max-buffer-size: 1048576
  send-timeout: 10000

前端测试页面

<!-- src/main/resources/static/test.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">WebSocket测试页面</title>
</head>
<body>
    <h1>WebSocket 测试</h1>
    <input type="text" id="username" placeholder="输入用户名" />
    <button onclick="connect()">连接</button>
    <input type="text" id="message" placeholder="输入消息" />
    <button onclick="sendMsg()">发送</button>
    <button onclick="disconnect()">断开连接</button>
    <div id="output"></div>
    <script>
        let ws = null;
        function connect() {
            const username = document.getElementById('username').value;
            ws = new WebSocket(`ws://localhost:8080/chat?username=${username}`);
            ws.onopen = function() {
                console.log('连接成功');
                output('连接成功');
            };
            ws.onmessage = function(event) {
                console.log('收到消息:', event.data);
                output('收到: ' + event.data);
            };
            ws.onclose = function(event) {
                console.log('连接关闭:', event.code, event.reason);
                output('连接关闭');
            };
            ws.onerror = function(error) {
                console.log('错误:', error);
                output('错误: ' + JSON.stringify(error));
            };
        }
        function sendMsg() {
            const content = document.getElementById('message').value;
            ws.send(content);
            output('发送: ' + content);
        }
        function disconnect() {
            if (ws) {
                ws.close();
            }
        }
        function output(text) {
            const div = document.getElementById('output');
            div.innerHTML += `<div>${text}</div>`;
        }
    </script>
</body>
</html>

Maven和运行

# 启动应用
mvn spring-boot:run
# 或使用编译后的jar
mvn clean package
java -jar target/springboot-websocket-demo-1.0.0.jar

测试指南

基础测试：
- 访问 http://localhost:8080/
- 输入昵称登录
- 发送消息到所有人或指定用户
多用户测试：
- 打开多个浏览器标签页
- 使用不同的昵称登录
- 测试群聊和私聊功能
连接测试：
- 查看Spring Boot控制台日志
- 模拟断线重连

这个案例实现了：

✅ 完整的WebSocket连接管理
✅ 群聊和私聊功能
✅ 在线用户列表
✅ 用户身份认证
✅ 消息广播和定向发送
✅ 连接状态监控
✅ 简洁美观的前端界面

关键特性：

使用Spring Boot的WebSocket支持
TextWebSocketHandler处理消息
线程安全的ConcurrentHashMap管理会话
支持JSON消息格式
包含握手拦截器进行用户认证
提供API接口发送系统消息

这个案例可以直接作为聊天室、实时通知、在线客服等应用的基础框架。

本文地址： https://www.bmjup.com/post/42719.html