本文完整实现一套可直接上线部署的前后端分离实时聊天系统，包含群聊、私聊、频道管理、消息持久化、HTTPS 加密、自动重连等企业级能力，代码规范、结构清晰，可直接用于学习与二次开发。

---

前言

在实时交互场景越来越普遍的今天，WebSocket 已经成为即时通信（IM）、在线客服、协同编辑等系统的核心技术。 本文将从零搭建一套生产可用的聊天系统，采用主流技术栈： Vue3 + Spring Boot + WebSocket + MySQL + HTTPS，从架构设计、核心实现、部署流程全覆盖。

---

一、项目整体介绍

本项目是一套前后端分离架构的实时聊天系统，具备完整 IM 系统能力：

• 支持多频道群聊广播
• 支持点对点私聊精准推送
• 用户认证与权限校验
• 消息异步持久化、历史记录查询
• WebSocket 自动重连、消息不丢失
• 全链路 HTTPS + WSS 加密传输
• 响应式布局，PC 端友好

项目特色

• 低延迟：消息推送 < 100ms
• 高可用：断线自动重连、消息可靠投递
• 易扩展：模块化设计，支持多场景扩展
• 安全性高：JWT 认证 + 传输加密

---

二、技术栈选型

前端

• Vue 3 + Vite
• Element Plus
• WebSocket (Stomp.js)
• Axios
• Pinia 状态管理

后端

• Spring Boot
• Spring WebSocket
• JWT 身份认证
• MySQL 8.0+
• HikariCP 连接池
• SSL / HTTPS 安全证书

---

三、系统架构设计

采用经典前后端分离架构：

1. 前端通过 WebSocket 长连接维持通信
2. 后端负责消息路由、权限验证、消息广播 / 推送
3. MySQL 完成用户、频道、消息数据持久化
4. 全局启用 HTTPS 保证通信安全

plaintext

前端 Vue → WebSocket/WSS → 后端服务 → 数据库

---

四、核心功能实现（重点）

1. WebSocket 群聊广播机制（发布 / 订阅模式）

群聊基于 订阅 / 发布模式 实现：

• 前端订阅频道：/topic/channel/{channelId}
• 后端广播消息到频道所有在线用户

后端核心代码

java

运行

@MessageMapping("/message/group/send")
public void sendGroupMessage(GroupMessageDTO dto, @Header("Authorization") String token) {
    // 身份验证
    String userId = jwtUtil.extractUserId(token.replace("Bearer ",""));
    
    // 构建消息
    GroupMessage message = new GroupMessage();
    message.setChannelId(dto.getChannelId());
    message.setSenderId(Long.parseLong(userId));
    message.setContent(dto.getContent());
    message.setSendTime(LocalDateTime.now());

    // 异步存储，不阻塞广播
    groupMessageService.saveAsync(message);

    // 频道广播
    simpMessagingTemplate.convertAndSend("/topic/channel/" + dto.getChannelId(), message);
}

前端订阅代码

javascript

运行

// 订阅当前频道消息
client.subscribe(`/topic/channel/${channelId}`, (msg) => {
  const message = JSON.parse(msg.body);
  messageList.value.push(message);
  scrollToBottom();
});

---

2. 私聊定向推送

私聊通过用户专属队列实现精准推送，不广播、不泄露。

java

运行

simpMessagingTemplate.convertAndSendToUser(
    receiverId,
    "/queue/private",
    message
);

---

3. 消息异步存储

使用 @Async 实现消息异步入库，不影响实时推送性能。

java

运行

@Async
@Transactional
public void saveAsync(GroupMessage message) {
    groupMessageMapper.insert(message);
}

---

4. 数据库设计（核心表）

用户表

sql

CREATE TABLE `sys_user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `role` varchar(20) DEFAULT 'USER',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

频道表

sql

CREATE TABLE `channel` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `creator_id` bigint NOT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

群聊消息表

sql

CREATE TABLE `group_message` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `channel_id` bigint NOT NULL,
  `sender_id` bigint NOT NULL,
  `sender_name` varchar(50) NOT NULL,
  `content` varchar(1000) NOT NULL,
  `send_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_channel_id` (`channel_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

---

5. HTTPS + WSS 安全配置

通过 SSL 证书实现全站加密：

yaml

server:
  port: 443
  ssl:
    key-store: classpath:cert.p12
    key-store-password: xxxxxxx
    key-store-type: PKCS12

前端 WebSocket 必须使用：

plaintext

wss://xxx.xxx.xxx/ws

---

五、快速部署指南

后端部署

1. 创建数据库 chat_system
2. 执行 SQL 脚本
3. 配置 application.yml 数据库信息
4. 启动 Spring Boot 服务

前端部署

bash

运行

cd frontend
npm install
npm run dev

访问地址：

plaintext

http://localhost:5173

---

六、项目亮点总结

1. 纯 WebSocket 长连接，无轮询，极低资源消耗
2. 群聊 + 私聊双模式，满足绝大多数 IM 场景
3. 消息异步持久化，高性能不卡顿
4. JWT 认证 + HTTPS 加密，生产环境安全可用
5. 前后端完全分离，易于维护、扩展、部署
6. 自动重连、消息自动滚动，体验接近商用 IM

---

七、适合人群 & 使用场景

• 想要学习 WebSocket 实时通信的开发者
• 需要快速搭建 IM 系统的项目
• 前后端分离实战项目学习
• 可扩展为：客服系统、社区聊天、内部协作、游戏聊天室等

---

八、项目信息

• 项目名称：Vue WebSocket Chat
• 技术架构：Vue3 + Spring Boot + WebSocket
• 源码仓库：https://gitee.com/zhai-zhaoyang/online-real-time-chat-system
• 部署状态：可直接上线部署