Nexus - Premium WebSocket Chat Room

English | 中文

A high-end, minimalist real-time chat application with Apple-inspired design language.

---

✨ Features

• 🚀 Real-time Communication - WebSocket-based instant messaging
• 🎨 Premium Design - Apple-inspired minimalist UI with elegant animations
• 👥 Multi-user Support - See online users and chat with anyone
• 💬 Chat History - Persistent conversation history per user
• 🎭 Dynamic Avatars - Auto-generated gradient avatars for each user
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• 🌓 Dark Mode - Automatic dark mode support based on system preference
• ⚡ Smooth Animations - Micro-interactions and fluid transitions throughout

🛠 Tech Stack

Backend

• Spring Boot 3.5.6 - Modern Java framework
• Jakarta WebSocket - Real-time bidirectional communication
• Fastjson2 - Fast JSON processing
• Lombok - Reduce boilerplate code

Frontend

• Vanilla JavaScript - Pure JS, no frameworks
• CSS Variables - Theming and design system
• WebSocket API - Native browser WebSocket support
• Canvas API - Particle animation background

📦 Project Structure

SpringBootWebSocket/
├── src/main/java/com/study/springbootwebsocket/
│   ├── config/
│   │   ├── WebSocketConfig.java              # WebSocket configuration
│   │   └── GetHttpSessionConfigurator.java   # Session management
│   ├── controller/
│   │   └── UserController.java               # Login API
│   ├── ws/
│   │   └── ChatEndPoint.java                 # WebSocket endpoint
│   ├── pojo/
│   │   ├── User.java                         # User entity
│   │   ├── Message.java                      # Message entity
│   │   └── ResultMessage.java                # Response entity
│   └── utils/
│       └── MessageUtils.java                 # Message utilities
└── src/main/resources/static/
    ├── login.html                            # Login page
    ├── chat.html                             # Chat room page
    ├── css/
    │   └── style.css                         # Global styles
    └── js/
        └── chat.js                           # Chat logic

🚀 Quick Start

Prerequisites

• Java 17 or higher
• Maven 3.6+
• Modern web browser (Chrome, Firefox, Safari, Edge)

Installation & Running

1. Clone the repository

   git clone <repository-url>
   cd SpringBootWebSocket

2. Build the project

   mvn clean package

3. Run the application

   mvn spring-boot:run

   Or run directly from IDE:

   Run SpringBootWebSocketApplication.java
   

4. Access the application

   Open your browser and navigate to:

   http://localhost:8080/login.html
   

Default Credentials

• Username: Any username you like
• Password: 123 (default for all users)

📖 Usage Guide

Login

1. Open http://localhost:8080/login.html
2. Enter any username
3. Use password 123
4. Click "Connect"

Start Chatting

1. After login, you'll see the chat room
2. Online users appear in the left sidebar
3. Click on a user to start chatting
4. Type your message and press Enter or click Send
5. Chat history is maintained for each conversation

Features in Action

• User Avatars: Each user gets a unique gradient avatar
• Online Status: Green dot indicator for online users
• Message Bubbles: Sent messages appear in gradient bubbles on the right
• Received Messages: Messages from others appear on the left
• Smooth Scrolling: Auto-scroll to latest messages

🎨 Design Philosophy

Inspired by Apple's design language, Nexus features:

• Minimalism: Clean layouts with generous whitespace
• Fluidity: Smooth cubic-bezier transitions (0.3s)
• Balance: Harmonious spacing and typography
• Elegance: Subtle gradients and soft shadows
• Micro-interactions: Delightful feedback on every action

Color System

• Primary: #667eea to #764ba2 gradient
• Neutral: Carefully crafted grayscale palette
• Shadows: Multi-layer depth with low opacity

Typography

• Font: SF Pro Display / -apple-system
• Smooth rendering with antialiasing
• Balanced hierarchy and spacing

🔧 Configuration

Change Port

Edit application.properties:

server.port=8080

Modify Password

Edit UserController.java:

if (user != null && "your-password".equals(user.getPassword())) {
    // ...
}

🌐 WebSocket Protocol

Connection

ws://localhost:8080/chat

Message Format

Send Message:

{
  "toName": "recipient_username",
  "message": "Hello, World!"
}

Receive Message:

{
  "isSystemMessage": false,
  "fromName": "sender_username",
  "message": "Hello, World!"
}

System Message (User List):

{
  "isSystemMessage": true,
  "message": ["user1", "user2", "user3"]
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Design inspiration from Apple's Human Interface Guidelines
• WebSocket implementation with Spring Boot
• Modern CSS techniques and animations

---

Nexus - 高端 WebSocket 聊天室

一个具有 Apple 风格设计语言的高端、极简实时聊天应用

✨ 功能特性

• 🚀 实时通信 - 基于 WebSocket 的即时消息传递
• 🎨 高端设计 - Apple 风格的极简 UI 配合优雅动画
• 👥 多用户支持 - 查看在线用户并与任何人聊天
• 💬 聊天历史 - 为每个用户保持持久的对话历史
• 🎭 动态头像 - 为每个用户自动生成渐变色头像
• 📱 响应式设计 - 在桌面和移动端无缝运行
• 🌓 深色模式 - 根据系统偏好自动支持深色模式
• ⚡ 流畅动画 - 整体微交互和流畅过渡

🛠 技术栈

后端

• Spring Boot 3.5.6 - 现代 Java 框架
• Jakarta WebSocket - 实时双向通信
• Fastjson2 - 快速 JSON 处理
• Lombok - 减少样板代码

前端

• 原生 JavaScript - 纯 JS，无框架
• CSS 变量 - 主题和设计系统
• WebSocket API - 浏览器原生 WebSocket 支持
• Canvas API - 粒子动画背景

📦 项目结构

SpringBootWebSocket/
├── src/main/java/com/study/springbootwebsocket/
│   ├── config/
│   │   ├── WebSocketConfig.java              # WebSocket 配置
│   │   └── GetHttpSessionConfigurator.java   # Session 管理
│   ├── controller/
│   │   └── UserController.java               # 登录 API
│   ├── ws/
│   │   └── ChatEndPoint.java                 # WebSocket 端点
│   ├── pojo/
│   │   ├── User.java                         # 用户实体
│   │   ├── Message.java                      # 消息实体
│   │   └── ResultMessage.java                # 响应实体
│   └── utils/
│       └── MessageUtils.java                 # 消息工具类
└── src/main/resources/static/
    ├── login.html                            # 登录页面
    ├── chat.html                             # 聊天室页面
    ├── css/
    │   └── style.css                         # 全局样式
    └── js/
        └── chat.js                           # 聊天逻辑

🚀 快速开始

环境要求

• Java 17 或更高版本
• Maven 3.6+
• 现代浏览器 (Chrome, Firefox, Safari, Edge)

安装与运行

1. 克隆仓库

   git clone <repository-url>
   cd SpringBootWebSocket

2. 构建项目

   mvn clean package

3. 运行应用

   mvn spring-boot:run

   或在 IDE 中直接运行:

   运行 SpringBootWebSocketApplication.java
   

4. 访问应用

   在浏览器中打开:

   http://localhost:8080/login.html
   

默认凭据

• 用户名: 任意用户名
• 密码: 123 (所有用户的默认密码)

📖 使用指南

登录

1. 打开 http://localhost:8080/login.html
2. 输入任意用户名
3. 使用密码 123
4. 点击 "Connect"

开始聊天

1. 登录后，进入聊天室
2. 在线用户显示在左侧边栏
3. 点击用户开始聊天
4. 输入消息并按 Enter 或点击发送
5. 每个对话的聊天历史会被保留

功能演示

• 用户头像: 每个用户获得独特的渐变色头像
• 在线状态: 在线用户显示绿色圆点指示器
• 消息气泡: 发送的消息显示在右侧的渐变气泡中
• 接收消息: 其他人的消息显示在左侧
• 平滑滚动: 自动滚动到最新消息

🎨 设计理念

受 Apple 设计语言启发，Nexus 特点:

• 极简主义: 简洁的布局和充足的留白
• 流动感: 平滑的 cubic-bezier 过渡 (0.3s)
• 平衡性: 和谐的间距和排版
• 优雅性: 微妙的渐变和柔和的阴影
• 微交互: 每个操作都有愉悦的反馈

色彩系统

• 主色: #667eea 到 #764ba2 渐变
• 中性色: 精心设计的灰度色板
• 阴影: 低透明度的多层深度

字体排版

• 字体: SF Pro Display / -apple-system
• 抗锯齿平滑渲染
• 平衡的层级和间距

🔧 配置

更改端口

编辑 application.properties:

server.port=8080

修改密码

编辑 UserController.java:

if (user != null && "your-password".equals(user.getPassword())) {
    // ...
}

🌐 WebSocket 协议

连接地址

ws://localhost:8080/chat

消息格式

发送消息:

{
  "toName": "接收者用户名",
  "message": "你好，世界！"
}

接收消息:

{
  "isSystemMessage": false,
  "fromName": "发送者用户名",
  "message": "你好，世界！"
}

系统消息 (用户列表):

{
  "isSystemMessage": true,
  "message": ["user1", "user2", "user3"]
}

🤝 贡献

欢迎贡献！请随时提交 Pull Request。

📄 许可证

本项目采用 MIT 许可证。

🙏 致谢

• 设计灵感来自 Apple 的人机界面指南
• 使用 Spring Boot 实现 WebSocket
• 现代 CSS 技术和动画

---

Made with ❤️ by Nexus Team