【Java项目-轻聊】01-项目演示+项目介绍+准备工作+项目源码

弹简特2026-05-27 22:36

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
🎯 你正在阅读「Java项目-轻聊」系列文章 🎯

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🔥 弹简特 个人主页

❄️ 个人专栏直通车：

✨ 靠热爱去书写自己，靠勇敢去书写生活！

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

🌟 博主简介:

文章目录：

一、项目演示

1、注册

2、登录

3、登录成功之后主页面

4、上传头像

5、搜索好友

6、添加好友


7、发消息


一、轻聊 --- 项目介绍

1. 项目概述

轻聊 是一款基于 Web 的即时聊天系统，提供用户注册登录、好友管理、单聊会话、实时消息推送、头像上传等能力。界面布局与交互参考网页版微信：左侧为会话/好友列表，右侧为聊天区域，支持未读角标、好友请求处理等常见 IM 体验。

2. 项目背景(为什么做这个项目)

日常沟通中，网页端即时通讯工具（如网页版微信）凭借「打开浏览器即可使用、无需安装客户端」的特点，适合课程设计、内网协作、轻量社交等场景。

本项目是在学校 JavaEE 课设/实训背景下 ，以网页版微信为交互与布局启发，实现一个可运行的轻量级 IM 原型：

  • 支持多用户注册、登录与单点在线控制；
  • 好友通过「搜索 + 好友请求」建立关系；
  • 两人单聊，消息经 WebSocket 实时送达并持久化到数据库；
  • 离线后可通过历史消息接口拉取记录。

目标是在掌握 Spring Boot、MyBatis、WebSocket 等主流技术的同时，完成从前端到后端的完整业务闭环。

3. 项目架构与结构

3.1 总体架构

采用经典 三层架构 + WebSocket 实时通道：

横切组件 ：component（在线用户管理、Session 注册、WebSocket 推送）、config（WebSocket、头像存储、静态资源映射）。

3.2 目录结构

text 复制代码 
web_chatroom/
├── upload/avatars/               # 用户上传头像（运行时生成）
├── src/main/
│   ├── java/com/zhongge/web_chatroom/
│   │   ├── WebChatroomApplication.java
│   │   ├── controller/           # 控制层
│   │   │   ├── param/            # 请求/WS 参数对象
│   │   │   ├── UserController.java
│   │   │   ├── FriendController.java
│   │   │   ├── FriendRequestController.java
│   │   │   ├── MessageController.java
│   │   │   ├── MessageSessionController.java
│   │   │   └── WebSocketController.java
│   │   ├── service/              # 服务层
│   │   │   ├── dto/
│   │   │   └── impl/
│   │   ├── dao/                  # 持久层
│   │   │   ├── dataobject/       # 数据库实体（DO）
│   │   │   └── mapper/           # MyBatis Mapper
│   │   ├── component/            # 在线用户、推送等
│   │   └── config/               # 配置类
│   ├── resources/
│   │   ├── application.yml
│   │   ├── mapper/*.xml          # MyBatis SQL
│   │   └── static/               # 前端静态资源
│   │       ├── login.html / register.html / client.html
│   │       ├── css/              # 样式（AI 辅助实现）
│   │       └── js/client.js      # 主业务脚本
│   └── java/db.sql               # 数据库初始化脚本
└── pom.xml

3.3 数据库表关系（简要）

表名 说明
user 用户账号、密码、头像路径
friend 好友关系（双向各一条记录）
friend_request 好友申请（待处理 status=0）
message_session 聊天会话
message_session_user 会话与用户的关联
message 聊天消息记录

4. 技术栈

层次 技术 版本/说明
语言 Java 1.8
后端框架 Spring Boot 2.7.6
持久层 MyBatis Spring Boot Starter 2.3.0
数据库 MySQL 8.x，库名 web_chatroom
实时通信 Spring WebSocket 文本消息 JSON
JSON 序列化 Jackson Spring 内置
工具 Lombok 简化实体代码
前端 HTML5 + jQuery 2.0.3（百度 CDN）
前端样式 CSS3 common.css / auth.css / client.css
构建 Maven -
开发热部署 spring-boot-devtools 可选

5. 功能模块与技术对应

功能模块 功能说明 主要技术
用户认证 注册、登录、退出；HttpSession 维持登录态；禁止同一账号重复登录（HTTP + WS 双重校验） Spring MVC、HttpSession、UserSessionRegistry、OnlineUserManager
用户信息 获取当前用户、刷新头像路径 Session + UserService + MyBatis
头像管理 上传 jpg/jpeg/png（≤2MB），磁盘存储；访问 /avatars/** 或 /user/getAvatar MultipartFile、WebMvc 资源映射、AvatarProperties
好友列表 展示已添加好友（含头像） FriendService + FriendMapper
搜索加好友 用户名模糊搜索；排除已是好友、已有待处理请求的用户 UserMapper.searchByKeyword
好友请求 发送/接收/同意/拒绝；在线 WebSocket 推送；离线登录后拉取待处理列表 FriendRequestService、WebSocketPushService、@Transactional
会话管理 创建两人单聊会话；列表展示最近消息预览；同好友去重 MessageSessionService、MessageMapper
实时聊天 WebSocket 发消息；服务端转发双方并落库；canonical sessionId 合并 WebSocketController、ChatMessageService、MessageMapper
历史消息 按会话查询最近 100 条，时间正序展示 MessageService、MessageMapper
未读角标 非当前会话收到消息时左侧数字 +1；进入会话清零 纯前端 client.js 实现
界面交互 Tab 切换（会话/好友）、搜索面板、好友请求弹窗、气泡左右布局 jQuery + DOM 操作

页面说明

页面 路径 作用
登录 /login.html 用户登录
注册 /register.html 新用户注册
主界面 /client.html 聊天主界面（需已登录）
测试页 /test.html WebSocket 回显测试（/chat）

6. 项目亮点与分工

项目亮点

  1. 分层清晰：控制层只负责协议与 Session；业务集中在 Service；持久层独立 dao.mapper / dao.dataobject，便于维护与扩展。
  2. 类微信体验：左侧会话列表 + 未读角标 + 好友请求置顶；右侧聊天气泡；搜索加好友流程完整。
  3. 单账号单在线：后登录不踢先登录，而是拒绝重复登录；WebSocket 同样拒绝第二条连接，保证状态一致。
  4. 会话去重：两人之间复用 canonical sessionId（取最小 sessionId），避免重复会话导致消息分裂。
  5. 消息可靠：实时推送 + 数据库持久化，支持上线后拉取历史记录。
  6. 头像链路完整：上传落盘、数据库记录路径、静态 URL 与 getAvatar 接口双通道访问。

分工说明

部分 实现者 说明
后端 弹简特 Spring Boot 三层架构、MyBatis、WebSocket、业务规则（登录防重、好友、会话、消息转发等）
前端 JS 业务 弹简特 client.js：WebSocket 连接、消息收发、未读、好友/会话/搜索/好友请求等交互逻辑
前端 HTML 结构 弹简特 页面骨架与业务 DOM 结构
CSS 样式 AI 辅助 界面美观简洁，由我借助Cursor工具提效实现auth.css / client.css / common.css 等视觉样式，并集成与微调

三、准备工作

1、创建项目

2. 选择依赖

3. 对应的配置


4. 配置文件

yml 复制代码 
# ===================== 应用服务配置 =====================
# 应用服务 WEB 访问端口
server:
  port: 8080

# ===================== MyBatis 持久层配置 =====================
# 配置Mapper XML文件位置、实体类别名包、下划线转驼峰、SQL日志打印
mybatis:
  # Mapper XML 文件存放路径：classpath下mapper目录及其子目录下所有以Mapper.xml结尾的文件
  mapper-locations: classpath:mapper/**/*Mapper.xml
  # 实体类别名包：自动扫描该包下的DO实体类，在XML中可直接使用类名（无需写全类名）
  type-aliases-package: com.zhongge.web_chatroom.dao.dataobject
  # MyBatis 核心配置
  configuration:
    # 开启数据库下划线字段 自动映射 Java驼峰命名（如 user_name → userName）
    map-underscore-to-camel-case: true
    # 控制台打印执行的SQL语句（开发环境使用，方便调试）
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

# ===================== 头像上传自定义配置 =====================
# 项目自定义：用户头像上传相关配置
avatar:
  # 头像文件本地存储路径（项目根目录 upload/avatars，不放入resources避免打包冲突）
  upload-dir: upload/avatars
  # 单个头像文件最大大小（单位：MB）
  max-size-mb: 2
  # 用户未设置头像时，默认显示的头像访问路径
  default-web-path: /img/default-avatar.svg

# ===================== Spring 核心配置 =====================
spring:
  # 文件上传配置（SpringMVC）
  servlet:
    multipart:
      # 单个文件最大限制（必须和上面avatar.max-size-mb保持一致）
      max-file-size: 2MB
      # 单次请求最大上传总大小
      max-request-size: 2MB

  # ===================== 数据库连接配置 =====================
  datasource:
    # MySQL 连接地址：本地3306、库名web_chatroom、编码UTF-8、关闭SSL、时区UTC
    url: jdbc:mysql://localhost:3306/web_chatroom?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
    # 数据库用户名
    username: root
    # 数据库密码
    password: 123456
    # MySQL 8.x 驱动类
    driver-class-name: com.mysql.cj.jdbc.Driver

5. 相关依赖参考

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.zhongge</groupId>
    <artifactId>web_chatroom</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>web_chatroom</name>
    <description>web_chatroom</description>
    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.7.6</spring-boot.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.3.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>${spring-boot.version}</version>
                <configuration>
                    <mainClass>com.zhongge.web_chatroom.WebChatroomApplication</mainClass>
                    <skip>true</skip>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

四、项目源码

点击👉 项目源码同步仓库

五、结尾

OK，老铁们，正所谓照葫芦画瓢，咱们只有知道项目整体样貌、技术选型与基础配置，后续编码上手才能事半功倍。

本篇完整带大家浏览了轻聊IM项目(IM:即时通讯)的整体效果、技术架构、功能模块，同时完成了Spring Boot项目创建、依赖引入、YAML配置、Maven依赖编写等全部初始化工作。目前项目骨架已经搭建完毕，环境可以正常运行。

下一期我们会梳理详细业务需求，一步步完成数据库表设计，我们下一期见咯~

相关推荐
luck_bor1 小时前
File类&递归作业
java·开发语言
武子康2 小时前
Java-07 深入浅出 MyBatis数据库一对多关系模型实战：表结构设计与查询实现
java·后端
REDcker4 小时前
Linux OverlayFS详解
java·linux·运维
Royzst4 小时前
xml知识点
java·服务器·前端
鱼鳞_4 小时前
苍穹外卖-Day08(缓存套餐)
java·redis·缓存
过期动态5 小时前
【LeetCode 热题 100】移动零
java·数据结构·算法·leetcode·职场和发展·rabbitmq
sinat_255487816 小时前
IDEA：查找文件/类
java·ide·设计模式·intellij-idea
AI人工智能+电脑小能手6 小时前
【大白话说Java面试题 第77题】【Mysql篇】第7题：回表查询与全表扫描的区别？
java·开发语言·数据库·mysql·面试
lulu12165440787 小时前
Claude Code SpringBoot技能体系架构设计与演进
java·人工智能·spring boot·后端·ai编程
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法04【AI】2026 年具身智能模型和世界模型总结05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07Codegraph 实战：用知识图谱让 AI 编程效率翻倍08Codex使用DeepSeek API的方法（cc switch + codex bridge方案）09给 Claude Code 装上“技能库”和“眼睛”：配置 Skills 与图片识别实战10CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）