问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

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

创作时间:
作者:
@小白创作中心

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

引用
CSDN
1.
https://blog.csdn.net/2301_78858041/article/details/145975550

在现代Web应用中，实时聊天功能几乎是标配。无论是社交平台、在线客服，还是团队协作工具，实时聊天都能显著提升用户体验。Spring Boot作为Java后端开发的事实标准，搭配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 的配置到前端界面的实现，再到消息的持久化存储，每一个环节都进行了详细的讲解。
未来，你可以在此基础上进行更多扩展，例如：

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

互动问答区

问题 1：如何处理消息的离线存储？
回答：可以在前端使用
localStorage
存储消息，在线后自动同步。

问题 2：如何实现消息的历史记录查询？
回答：可以通过 Spring Data JPA 提供分页查询接口。

问题 3：如何优化 WebSocket 的性能？
回答：可以使用 Redis 作为消息代理（如
Redisson
）来提高吞吐量和稳定性。

结语

希望这篇文章能帮助你快速上手 Spring Boot 聊天室开发！如果你觉得这篇文章对你有帮助，请记得点赞和分享给更多小伙伴哦！ 😊

热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号