# cursor-socketio-demo

**Repository Path**: zhoujianjun/cursor-socketio-demo

## Basic Information

- **Project Name**: cursor-socketio-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-31
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Socket.IO 聊天室

一个功能完整的实时聊天室应用，基于 Socket.IO + Vue3 + Vite 构建，采用科技风格 UI 设计。

## 功能特性

- ✅ **实时聊天** - 基于 WebSocket 的实时消息传输
- ✅ **表情发送** - 支持丰富的表情符号选择
- ✅ **图片发送** - 支持发送和预览图片（最大 5MB）
- ✅ **@提及功能** - 支持@用户并高亮显示，键盘导航选择
- ✅ **双击拍一拍** - 双击用户头像发送拍一拍消息，支持自定义文案
- ✅ **个人中心** - 修改头像、用户名、拍一拍文案
- ✅ **头像预览** - 点击头像查看大图
- ✅ **图片预览** - 点击图片查看大图，支持下载和复制
- ✅ **自动登录** - 使用 localStorage 保存用户信息，自动登录
- ✅ **历史记录** - 自动保存和加载聊天历史记录（最多100条）
- ✅ **在线用户** - 显示当前在线用户列表
- ✅ **新消息通知** - 窗口抖动和标题闪烁提醒
- ✅ **科技风格 UI** - 炫酷的科技风格界面，使用 Naive UI 组件库
- ✅ **响应式设计** - 适配桌面和移动设备
- ✅ **内网访问** - 支持局域网内其他设备访问

## 技术栈

- **前端**：Vue 3 + Vite + Socket.IO Client + Naive UI
- **后端**：Node.js + Express + Socket.IO
- **存储**：localStorage（客户端）+ 内存（服务端）
- **UI 库**：Naive UI（Vue 3 组件库）

## 安装和运行

### 1. 安装依赖

```bash
npm install
```

### 2. 开发模式

需要同时启动前端开发服务器和后端服务器：

**终端 1 - 启动 Vite 开发服务器（前端）：**
```bash
npm run dev
```
前端将运行在 http://localhost:5173
- 支持内网访问：其他设备可通过 `http://[你的IP]:5173` 访问
- 启动时会显示内网访问地址

**终端 2 - 启动后端服务器：**
```bash
npm run server
```
或者使用开发模式（自动重启）：
```bash
npm run server:dev
```
后端将运行在 http://localhost:3000
- 支持内网访问：监听 `0.0.0.0:3000`
- 启动时会显示内网访问地址

### 3. 访问应用

- **本机访问**：http://localhost:5173
- **内网访问**：http://[你的IP地址]:5173
  - 启动服务器时会显示具体的内网 IP 地址
  - 同一局域网内的其他设备可通过该地址访问

### 4. 生产构建

构建前端：
```bash
npm run build
```

启动生产服务器：
```bash
NODE_ENV=production npm start
```

## 使用说明

### 基本功能

1. **登录**：首次访问需要输入用户名，可选择自定义头像URL
2. **发送消息**：在输入框输入消息，按 Enter 或点击发送按钮（Shift+Enter 换行）
3. **发送表情**：点击 😊 按钮选择表情
4. **发送图片**：点击 🖼️ 按钮选择图片文件（最大 5MB）
5. **@提及用户**：输入 `@` 符号，选择要@的用户（支持键盘上下键导航）
6. **查看在线用户**：右侧边栏显示当前在线用户列表

### 高级功能

1. **双击拍一拍**：
   - 双击其他用户的头像发送拍一拍消息
   - 在个人中心设置自定义拍一拍文案（如："拍了拍我的肩膀说加油"）
   - 拍一拍消息会显示特殊动画效果

2. **个人中心**：
   - 点击自己的用户名（头部、侧边栏、消息中）打开个人中心
   - 可以修改头像（支持上传本地图片）
   - 可以修改用户名
   - 可以设置拍一拍文案
   - 所有修改会实时同步到服务器和其他用户

3. **头像和图片预览**：
   - 单击头像查看大图
   - 单击图片查看大图，支持下载和复制URL
   - 支持 ESC 键关闭预览

4. **新消息通知**：
   - 当窗口不在焦点时，收到新消息会触发窗口抖动
   - 浏览器标签页标题会闪烁提醒

5. **自动登录**：
   - 关闭浏览器后再次访问会自动登录
   - 用户信息保存在 localStorage

## 项目结构

```
socketio-chatroom/
├── server.js              # 服务器主文件
├── vite.config.js         # Vite 配置文件
├── package.json           # 项目配置
├── index.html             # HTML 入口文件
├── README.md              # 说明文档
├── src/                   # 源代码目录
│   ├── main.js           # Vue 应用入口
│   ├── App.vue           # 根组件
│   ├── style.css         # 全局样式
│   └── components/       # 组件目录
│       ├── LoginModal.vue    # 登录组件
│       ├── ChatRoom.vue      # 聊天室主组件
│       ├── UserProfile.vue   # 个人中心组件
│       ├── AvatarPreview.vue  # 头像预览组件
│       └── ImagePreview.vue   # 图片预览组件
└── dist/                  # 构建输出目录（生产环境）
```

## 主要组件说明

- **LoginModal.vue** - 登录界面，支持用户名和头像URL输入
- **ChatRoom.vue** - 主聊天界面，包含消息列表、输入框、在线用户列表等
- **UserProfile.vue** - 个人中心，支持修改头像、用户名、拍一拍文案
- **AvatarPreview.vue** - 头像预览模态框
- **ImagePreview.vue** - 图片预览模态框，支持下载和复制

## 注意事项

- 当前版本的历史记录存储在服务器内存中，服务器重启后会丢失
- 图片以 Base64 格式传输，适合小图片，大图片建议使用文件上传服务
- 拍一拍文案和用户信息存储在服务器内存中，重启后会丢失
- 生产环境建议使用数据库（如 MongoDB、Redis）存储聊天记录和用户信息
- 用户名修改后，历史消息中的用户名会自动更新

## 许可证

MIT