Spring Boot 开发实时聊天室：从零到上线，手把手教学！

Spring Boot 开发实时聊天室：从零到上线，手把手教学！

引用

CSDN

1.

https://blog.csdn.net/2301_78858041/article/details/145975550

本文将手把手教你使用Spring Boot和Vue.js开发一个功能完善的实时聊天室。从环境准备、WebSocket配置到前端界面实现，每个环节都配有详细的代码示例和步骤说明。

前言：为什么选择 Spring Boot 开发聊天室？

在现代 Web 应用中，实时聊天功能几乎是标配。无论是社交平台、在线客服，还是团队协作工具，实时聊天都能显著提升用户体验。Spring Boot 作为 Java 后端开发的事实标准，搭配 WebSocket 技术，可以轻松实现高效、实时的通信功能。本文将从零开始，手把手教你开发一个功能完善的实时聊天室！

第一部分：功能需求与架构设计

1.1 功能需求

• 实时消息发送与接收
• 显示在线用户列表
• 展示历史聊天记录
• 支持消息撤回与删除（可选）
• 界面友好、操作简单

1.2 架构设计

• 后端：使用 Spring Boot + WebSocket 实现实时通信。
• 前端：使用 Vue.js + WebSocket 客户端库（如 sockjs-client）。
• 数据库：使用 MySQL 存储聊天记录。

第二部分：环境准备

2.1 开发工具

• IDEA 或 VS Code
• JDK 11+
• Maven 3.6+
• MySQL 8.0+
• Node.js （用于前端开发）

2.2 依赖引入

在 pom.xml 中添加以下依赖：

<dependencies>
    <!-- Spring Boot 核心依赖 -->
    <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>
 
    <!-- MySQL 数据库驱动 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.29</version>
    </dependency>
 
    <!-- Lombok 简化代码 -->
    <dependency>
        <groupId>org.projectlombok</groupId> 
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>  

第三部分：后端开发

3.1 配置 WebSocket

3.1.1 创建 WebSocket 配置类

import org.springframework.context.annotation.Configuration; 
import org.springframework.messaging.simp.config.MessageBrokerRegistry; 
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; 
import org.springframework.web.socket.config.annotation.StompEndpointRegistry; 
 
@Configuration 
@EnableWebSocketMessageBroker 
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
 
    @Override 
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic"); 
        registry.setApplicationDestinationPrefixes("/app"); 
    }
 
    @Override 
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").setAllowedOrigins("*"); 
    }
}  

3.1.2 配置 WebSocket 消息处理器

import org.springframework.messaging.handler.annotation.MessageMapping; 
import org.springframework.messaging.handler.annotation.SendTo; 
import org.springframework.stereotype.Controller; 
 
@Controller 
public class ChatController {
 
    @MessageMapping("/chat.sendMessage") 
    @SendTo("/topic/chat")
    public ChatMessage sendMessage(ChatMessage message) {
        return message;
    }
 
    @MessageMapping("/chat.typing") 
    @SendTo("/topic/typing")
    public TypingIndicator typing(TypingIndicator indicator) {
        return indicator;
    }
}  

3.2 实体类设计

3.2.1 聊天消息实体

@Data 
@AllArgsConstructor 
@NoArgsConstructor 
public class ChatMessage {
    private String sender;
    private String content;
    private Long timestamp;
}  

3.2.2 在线状态实体

@Data 
@AllArgsConstructor 
@NoArgsConstructor 
public class OnlineStatus {
    private String username;
    private boolean online;
}  

3.3 数据库设计

创建 chat_message 表：

CREATE TABLE chat_message (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    sender VARCHAR(50),
    content TEXT,
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP 
);  

第四部分：前端开发

4.1 初始化 Vue 项目

vue create chat-room 
cd chat-room 
npm install   

4.2 安装依赖

npm install sockjs-client stompjs   

4.3 实现聊天界面

4.3.1 main.js

import Vue from 'vue';
import App from './App.vue'; 
import SockJS from 'sockjs-client';
import { Stomp } from 'stompjs';
 
Vue.prototype.$sock  = new SockJS('http://localhost:8080/ws');
Vue.prototype.$stomp  = Stomp.over(Vue.prototype.$sock); 
 
new Vue({
    render: h => h(App),
}).$mount('#app');  

4.3.2 Chat.vue

<template>
    <div class="chat-container">
        <div class="chat-header">
            <h2>实时聊天室</h2>
            <div class="online-users">
                在线用户：{{ onlineUsers }}
            </div>
        </div>
        <div class="chat-messages" ref="messages">
            <div v-for="(message, index) in messages" :key="index">
                <strong>{{ message.sender  }}</strong>: {{ message.content  }}
            </div>
        </div>
        <div class="input-container">
            <input type="text" v-model="newMessage" @keyup.enter="sendMessage"  placeholder="输入消息...">
            <button @click="sendMessage">发送</button>
        </div>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            messages: [],
            newMessage: '',
            onlineUsers: []
        };
    },
    mounted() {
        const socket = this.$sock;
        const stompClient = this.$stomp;
 
        stompClient.connect({},  frame => {
            console.log('Connected:',  frame);
 
            stompClient.subscribe('/topic/chat',  message => {
                this.messages.push(JSON.parse(message.body)); 
                this.$refs.messages.scrollTop  = this.$refs.messages.scrollHeight; 
            });
 
            stompClient.subscribe('/topic/online',  message => {
                this.onlineUsers  = JSON.parse(message.body); 
            });
        });
    },
    methods: {
        sendMessage() {
            if (this.newMessage.trim())  {
                const message = {
                    sender: localStorage.getItem('username'), 
                    content: this.newMessage, 
                    timestamp: new Date().getTime()
                };
                
                this.$stomp.send('/app/chat.sendMessage',  {}, JSON.stringify(message)); 
                this.newMessage  = '';
            }
        }
    }
};
</script>  

第五部分：功能扩展与优化

5.1 实时在线状态更新

@Component 
public class OnlineStatusListener {
 
    @Autowired 
    private SimpMessagingTemplate messagingTemplate;
 
    @MessageMapping("/connect")
    public void handleConnect(String username) {
        messagingTemplate.convertAndSend("/topic/online",  OnlineStatus.builder() 
            .username(username)
            .online(true)
            .build());
    }
 
    @MessageMapping("/disconnect")
    public void handleDisconnect(String username) {
        messagingTemplate.convertAndSend("/topic/online",  OnlineStatus.builder() 
            .username(username)
            .online(false)
            .build());
    }
}  

5.2 消息持久化

@Repository 
public interface ChatMessageRepository extends JpaRepository<ChatMessage, Long> {}  

@Service 
public class ChatService {
 
    @Autowired 
    private ChatMessageRepository repository;
 
    public void saveMessage(ChatMessage message) {
        repository.save(message); 
    }
}  

第六部分：总结与展望

通过本文的学习，你已经掌握了如何使用 Spring Boot 和 Vue.js 开发一个实时聊天室的完整流程。从 WebSocket 的配置到前端界面的实现，再到消息的持久化存储，每一个环节都进行了详细的讲解。

未来，你可以在此基础上进行更多扩展，例如：

• 添加群聊功能
• 实现消息撤回与删除
• 支持表情包和图片上传
• 集成语音聊天功能