# anonymous-chat-room

**Repository Path**: XY1912/anonymous-chat-room

## Basic Information

- **Project Name**: anonymous-chat-room
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-10
- **Last Updated**: 2026-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 匿名聊天室

一个基于 Vue 3 + TypeScript + WebSocket 实现的多功能匿名聊天室应用。

## 🎯 功能特性

### 核心功能
- ✅ **匿名聊天**：无需注册即可加入聊天室
- ✅ **实时消息收发**：基于 WebSocket 的双向通信
- ✅ **自定义用户名**：随时修改自己的显示名称
- ✅ **消息状态显示**：发送中、已发送、发送失败状态指示
- ✅ **图片发送**：支持上传和预览图片消息
- ✅ **表情发送**：内置常用表情选择器
- ✅ **消息搜索**：实时过滤消息内容，高亮显示匹配结果
- ✅ **在线用户列表**：显示当前在线用户
- ✅ **消息历史记录**：连接后自动加载历史消息

### 用户体验优化
- 🎨 **响应式设计**：适配不同屏幕尺寸
- ⚡ **消息节流**：防止消息发送过于频繁
- 📱 **手机友好**：优化移动端界面和交互
- 🔄 **自动重连**：网络断开时自动尝试重连
- 📊 **加载状态**：提供清晰的加载和连接状态反馈

## 🛠️ 技术栈

- **前端框架**：Vue 3 + TypeScript
- **构建工具**：Vite
- **状态管理**：Vuex
- **实时通信**：WebSocket
- **UI 设计**：原生 CSS (响应式设计)
- **后端**：Node.js + ws (WebSocket 服务器)

## 📦 项目结构

```
├── src/                      # 前端源码
│   ├── components/           # Vue 组件
│   │   ├── ChatRoom.vue     # 主聊天界面
│   │   └── MessageItem.vue  # 消息项组件
│   ├── services/            # 服务层
│   │   └── websocketService.ts  # WebSocket 客户端
│   ├── stores/              # Vuex 状态管理
│   │   └── chatStore.ts     # 聊天状态管理
│   ├── types/               # TypeScript 类型定义
│   │   └── chat.ts          # 聊天相关类型
│   ├── utils/               # 工具函数
│   │   └── throttle.ts      # 节流函数
│   ├── App.vue              # 根组件
│   └── main.ts              # 入口文件
├── server.js                # WebSocket 服务器
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript 配置
└── vite.config.ts           # Vite 配置
```

## 🚀 安装与运行

### 环境要求
- Node.js >= 16.x
- npm >= 8.x

### 安装依赖

```bash
npm install
```

### 运行项目

#### 1. 启动 WebSocket 服务器

```bash
node server.js
```

服务器将在 `ws://localhost:3000` 启动

#### 2. 启动前端开发服务器

在另一个终端窗口运行：

```bash
npm run dev
```

前端应用将在 `http://localhost:5173` 启动

### 构建生产版本

```bash
npm run build
```

构建产物将输出到 `dist` 目录

## 📖 使用说明

### 基本使用
1. 打开浏览器访问 `http://localhost:5173`
2. 默认使用随机生成的用户名
3. 点击用户名旁的「修改」按钮可以自定义用户名
4. 在消息输入框中输入文字，按 Enter 发送消息

### 功能说明

#### 发送图片
1. 点击输入框左侧的 📷 图标
2. 选择要上传的图片文件
3. 图片将自动发送到聊天室

#### 发送表情
1. 点击输入框左侧的 😊 图标
2. 在弹出的表情选择器中点击表情
3. 表情将插入到输入框中

#### 搜索消息
1. 在顶部搜索框中输入关键词
2. 消息列表将实时过滤并高亮显示匹配内容
3. 点击搜索框右侧的 × 清除搜索

#### 消息状态
- **发送中**：显示「发送中...」
- **已发送**：显示 ✓
- **发送失败**：显示 ✗，点击可重新发送

## 🔧 开发说明

### 代码规范
- 使用 TypeScript 进行类型检查
- 组件使用 Composition API
- 遵循 Vue 3 最佳实践

### 类型定义
核心类型定义在 `src/types/chat.ts` 中：
- `Message`：消息数据结构
- `User`：用户数据结构
- `WebSocketMessage`：WebSocket 消息格式

### WebSocket 协议

#### 客户端发送消息
- `message`：发送文本消息
- `imageMessage`：发送图片消息
- `usernameChange`：修改用户名
- `users`：请求在线用户列表
- `history`：请求消息历史

#### 服务器推送消息
- `message`：新消息通知
- `join`：用户加入通知
- `users`：用户列表更新
- `history`：历史消息数据

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系方式

如有问题或建议，请联系：991756894@qq.com