# MQTT在线聊天室

**Repository Path**: yuanchengfeng/mqtt-online-chat-room

## Basic Information

- **Project Name**: MQTT在线聊天室
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-08
- **Last Updated**: 2025-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MQTT 在线聊天室

一个基于 MQTT 协议和 WebSocket 的实时在线聊天室应用，采用全栈单体架构，支持多房间聊天、在线用户显示、输入状态提示等功能。简单易部署，开箱即用。

## 功能特性

✨ **核心功能**

- 🌐 基于 MQTT 协议的实时消息传输
- 🏠 多聊天室支持（综合讨论、技术交流、随机聊天、游戏讨论）
- 👥 实时在线用户列表
- ⌨️ 输入状态指示器
- 📱 响应式设计，支持移动端

🎨 **界面特色**

- 现代化的 Material Design 风格
- 流畅的动画效果
- 直观的用户体验
- 实时通知系统

🔧 **技术特性**

- 全栈单体架构 - 前后端代码统一管理
- 内置 MQTT Broker - 无需外部 MQTT 服务
- WebSocket 实时连接 - 低延迟消息传输
- 零配置启动 - npm start 即可运行
- 静态文件服务 - 前端资源直接托管

## 技术栈

**服务端 (server.js)**

- Node.js + Express - HTTP 服务器
- Socket.IO - WebSocket 实时通信
- Aedes - 内置 MQTT Broker
- CORS 中间件 - 跨域支持

**客户端 (前端文件)**

- 原生 HTML5/CSS3/JavaScript - 无构建工具的纯前端
- Socket.IO 客户端 - 与服务器实时通信
- Material Design 风格 - 现代化 UI 设计
- 响应式布局 - 支持移动端适配

## 快速开始

### 1. 安装依赖

在项目根目录安装依赖：

```bash
npm install
```

### 2. 启动服务器

```bash
# 开发模式（自动重启）
npm run dev

# 或者生产模式
npm start
```

### 3. 访问应用

打开浏览器访问：

```
http://localhost:3000
```

## 项目结构

```
mqtt-chatroom/
├── README.md              # 项目说明文档
├── package.json           # 项目依赖和脚本配置
├── package-lock.json      # 依赖版本锁定文件
├── node_modules/          # Node.js依赖包目录
│
├── server.js              # 后端服务器 (Express + Socket.IO + MQTT)
├── index.html             # 前端主页面
├── app.js                 # 前端JavaScript逻辑
└── style.css              # 前端样式文件
```

### 文件说明

**🔧 服务端**

- `server.js` - 全栈服务器，集成 Express HTTP 服务、Socket.IO WebSocket 服务、Aedes MQTT Broker 和静态文件托管

**🎨 客户端**

- `index.html` - 单页应用主页面，包含完整的聊天室 UI 结构
- `app.js` - 客户端核心逻辑，处理 Socket.IO 连接、实时消息、用户交互
- `style.css` - Material Design 风格的响应式样式表

**📦 项目配置**

- `package.json` - 项目元信息和依赖管理
- `package-lock.json` - 依赖版本锁定，确保环境一致性
- `README.md` - 项目完整说明文档

## 使用说明

### 加入聊天室

1. 输入您的用户名
2. 选择要加入的聊天室：
   - 💬 综合讨论 - 日常聊天交流
   - 💻 技术交流 - 技术话题讨论
   - 🎲 随机聊天 - 随意聊天
   - 🎮 游戏讨论 - 游戏相关话题
3. 点击"进入聊天室"

### 聊天功能

- **发送消息**: 在输入框中输入消息，按 Enter 或点击发送按钮
- **查看在线用户**: 点击右上角用户图标切换用户列表
- **输入状态**: 其他用户输入时会显示"正在输入..."提示
- **离开聊天室**: 点击右上角退出按钮

### 消息类型

- **普通消息**: 用户发送的聊天消息
- **系统消息**: 用户加入/离开的通知（灰色显示）
- **自己的消息**: 显示在右侧（蓝色气泡）
- **他人消息**: 显示在左侧（白色气泡）

## API 接口

服务器提供以下 API 接口：

### GET /api/health

获取服务器运行状态

```json
{
  "status": "running",
  "mqttPort": 1883,
  "websocketPort": 3000,
  "timestamp": "2024-01-01T00:00:00.000Z"
}
```

### GET /api/stats

获取在线用户统计

```json
{
  "totalUsers": 5,
  "rooms": {
    "general": ["用户1", "用户2"],
    "tech": ["用户3", "用户4", "用户5"]
  }
}
```

## 配置说明

### 端口配置

- **HTTP 服务器**: 3000 (可通过环境变量 PORT 修改)
- **MQTT Broker**: 1883
- **WebSocket**: 与 HTTP 服务器同端口

### 环境变量

```bash
PORT=3000                    # HTTP服务器端口
```

## 开发说明

### 添加新聊天室

1. 在 `index.html` 中添加新的 option：

```html
<option value="new-room">🆕 新聊天室</option>
```

2. 在 `app.js` 中更新房间标题映射：

```javascript
const roomTitles = {
  "new-room": "🆕 新聊天室",
};
```

### 自定义样式

修改 `style.css` 中的 CSS 变量来自定义主题：

```css
:root {
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --success-color: #27ae60;
  --warning-color: #f39c12;
  --error-color: #e74c3c;
}
```

## 故障排除

### 常见问题

1. **无法连接服务器**

   - 检查服务器是否正常启动
   - 确认端口 3000 未被占用
   - 检查防火墙设置

2. **消息发送失败**

   - 检查网络连接
   - 确认 WebSocket 连接状态
   - 查看浏览器控制台错误

3. **MQTT 连接问题**
   - 检查端口 1883 是否可用
   - 确认 MQTT broker 正常运行

### 调试模式

在开发环境下，应用会在浏览器控制台输出调试信息：

```javascript
// 查看连接状态
console.log("连接地址:", window.location.origin);

// 查看应用实例
window.chatApp;
```

## 部署说明

### 项目优势

由于采用全栈单体架构，本项目具有以下部署优势：

- **零依赖外部服务** - 内置 MQTT Broker，无需额外安装 MQTT 服务
- **单进程部署** - 只需启动一个 Node.js 进程即可运行完整应用
- **简化运维** - 无需前后端分离部署，降低运维复杂度

### 生产环境部署

1. 安装 PM2 进程管理器：

```bash
npm install -g pm2
```

2. 启动应用：

```bash
pm2 start server.js --name mqtt-chatroom
```

3. 配置反向代理（Nginx 示例）：

```nginx
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 联系方式

如有问题或建议，请创建 Issue 或联系开发者。