【Java】基于Websocket实现的简易聊天室

先看效果

后端代码

1.首先导入pom依赖

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

    </dependencies>

2.Websocket配置

package com.ts.config;

import com.ts.handler.ChatHandler;
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;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new ChatHandler(), "/chat")
                .setAllowedOrigins("*"); // 允许跨域
    }
}

package com.ts.handler;

import com.ts.response.ChatMessage;
import com.ts.utils.JsonUtils;
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 java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class ChatHandler extends TextWebSocketHandler {
    private static final Map<WebSocketSession, String> userSessions = new HashMap<>();

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        Map<String, String> data = JsonUtils.parseJson(message.getPayload());
        String type = data.get("type");

        if ("join".equals(type)) {
            // 用户加入
            String username = data.get("username");
            userSessions.put(session, username);
            broadcast(new ChatMessage("系统", username + " 进入聊天室"));
            broadcastOnlineCount(); // 广播在线人数
        } else if ("message".equals(type)) {
            // 普通消息
            String username = userSessions.get(session);
            String content = data.get("content");
            broadcast(new ChatMessage(username, content));

        } else if ("ping".equals(type)) {
            // 心跳检测：直接返回 pong（不广播）
            session.sendMessage(new TextMessage(JsonUtils.toJson(
                    Map.of("type", "pong") // 返回简单结构，前端直接忽略
            )));
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        String username = userSessions.get(session);
        if (username != null) {
            userSessions.remove(session);
            broadcast(new ChatMessage("系统", username + " 离开聊天室"));
            broadcastOnlineCount(); // 广播在线人数
        }
    }

    private void broadcast(ChatMessage message) {
        String json = JsonUtils.toJson(message);
        userSessions.keySet().forEach(session -> {
            try {
                session.sendMessage(new TextMessage(json));
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    private void broadcastOnlineCount() {
        String json = JsonUtils.toJson(Map.of(
                "type", "onlineCount",
                "count", userSessions.size()
        ));
        userSessions.keySet().forEach(session -> {
            try {
                session.sendMessage(new TextMessage(json));
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }
}

---

3.消息返回类

package com.ts.response;

public class ChatMessage {
    private String username;
    private String content;

    public ChatMessage(String username, String content) {
        this.username = username;
        this.content = content;
    }

    // Getter和Setter
    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

---

4.Json格式化工具类

package com.ts.utils;

import com.fasterxml.jackson.databind.ObjectMapper;
import java.util.Map;

public class JsonUtils {
    private static final ObjectMapper objectMapper = new ObjectMapper();

    public static Map<String, String> parseJson(String json) {
        try {
            return objectMapper.readValue(json, Map.class);
        } catch (Exception e) {
            throw new RuntimeException("解析JSON失败", e);
        }
    }

    public static String toJson(Object obj) {
        try {
            return objectMapper.writeValueAsString(obj);
        } catch (Exception e) {
            throw new RuntimeException("生成JSON失败", e);
        }
    }
}

---

前端代码

<!DOCTYPE html>
<html>
<head>
    <title>简易聊天室</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #onlineCount {
            padding: 10px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ccc;
            text-align: center;
            font-size: 14px;
            color: #666;
        }

        #usernameForm {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        #usernameForm input {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        #usernameForm button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #chatRoom {
            display: none;
            background-color: #fff;
            width: 400px;
            height: 600px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            flex-direction: column;
        }

        #messages {
            flex: 1;
            padding: 10px;
            overflow-y: scroll;
            border-bottom: 1px solid #ccc;
        }

        .message {
            margin-bottom: 10px;
        }

        .message .sender {
            font-weight: bold;
            color: #007bff;
        }

        .message .content {
            background-color: #e1ffc7;
            padding: 10px;
            border-radius: 10px;
            display: inline-block;
            max-width: 70%;
        }

        .message.received .content {
            background-color: #f1f1f1;
        }

        #messageInput {
            padding: 10px;
            border: none;
            border-top: 1px solid #ccc;
            font-size: 16px;
        }

        #sendButton {
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 0 0 10px 10px;
            cursor: pointer;
        }

         .message.self {
             margin-left: auto; /* 自己消息右对齐 */
             text-align: right;
         }
        .message.self .content {
            background-color: #e1ffc7; /* 自己消息背景色 */
        }
        .message.received {
            margin-right: auto; /* 他人消息左对齐 */
            text-align: left;
        }
        .message.received .content {
            background-color: #f1f1f1; /* 他人消息背景色 */
        }
        .sender {
            font-size: 0.8em;
            color: #666;
            margin-bottom: 4px;
        }

    </style>
</head>
<body>
<div id="usernameForm">
    <input type="text" id="usernameInput" placeholder="请输入用户名">
    <button onclick="setUsername()">进入聊天室</button>
</div>
<div id="chatRoom">
    <div id="onlineCount">在线人数：0</div>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="输入消息...">
    <button id="sendButton" onclick="sendMessage()">发送</button>
</div>

<script>
    let socket;
    let username;
    let heartbeatInterval;

    function setUsername() {
        const usernameInput = document.getElementById('usernameInput');
        username = usernameInput.value.trim();
        if (username) {
            // 隐藏用户名输入框，显示聊天界面
            document.getElementById('usernameForm').style.display = 'none';
            document.getElementById('chatRoom').style.display = 'flex';

            // 建立WebSocket连接
            socket = new WebSocket('ws://localhost:80/chat');

            socket.onopen = function () {
                console.log("WebSocket连接成功");
                // 发送用户名到服务器
                socket.send(JSON.stringify({type: 'join', username: username}));

                // 启动心跳检测
                heartbeatInterval = setInterval(() => {
                    if (socket.readyState === WebSocket.OPEN) {
                        socket.send(JSON.stringify({type: 'ping'}));
                    }
                }, 30000); // 每30秒发送一次心跳
            };

            socket.onmessage = function (event) {
                const message = JSON.parse(event.data);
                if (message.type === 'pong') {
                    console.log("收到心跳响应");
                    return; // 直接返回不处理
                }
                if (message.type === 'onlineCount') {
                    // 更新在线人数
                    document.getElementById('onlineCount').innerText = `当前在线人数：${message.count}`;
                    return;
                }
                const messagesDiv = document.getElementById('messages');
                // 增加对齐样式判断
                const isSelf = message.username === username;
                const messageClass = isSelf ? 'message self' : 'message received';
                messagesDiv.innerHTML += `<div class="${messageClass}">
                <div class="sender">${message.username}</div>
                <div class="content">${message.content}</div>
                </div>`;
                messagesDiv.scrollTop = messagesDiv.scrollHeight;
            };

            socket.onerror = function (error) {
                console.error("WebSocket错误:", error);
            };

            socket.onclose = function () {
                console.log("WebSocket连接关闭");
                clearInterval(heartbeatInterval); // 停止心跳检测
            };
        }
    }

    function sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value.trim();
        if (message) {
            // 发送消息到服务器（JSON格式）
            socket.send(JSON.stringify({type: 'message', content: message}));
            input.value = '';
        }
    }

    // 回车发送消息
    document.getElementById('messageInput')
        .addEventListener('keypress', e => e.key === 'Enter' && sendMessage());
</script>
</body>
</html>