# SOCKETIO_LEARNING_GUIDE

**Repository Path**: zhoujianjun/socketio_-learning_-guide

## Basic Information

- **Project Name**: SOCKETIO_LEARNING_GUIDE
- **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-01
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Socket.IO 学习项目 (Vite + React)

这是一个使用 **Vite + React** 构建的 Socket.IO 实时聊天应用示例，帮助你学习 WebSocket 和实时通信。

## 技术栈

- **前端**: React 18 + Vite 5
- **后端**: Node.js + Express + Socket.IO
- **实时通信**: Socket.IO (WebSocket)

## 项目结构

```
cursor-demo/
├── src/
│   ├── components/          # React 组件
│   │   ├── LoginModal.jsx   # 登录组件
│   │   ├── Sidebar.jsx      # 侧边栏（房间列表）
│   │   └── ChatArea.jsx     # 聊天区域
│   ├── hooks/
│   │   └── useSocket.js     # Socket.IO Hook
│   ├── styles/              # 样式文件
│   ├── App.jsx              # 主应用组件
│   └── main.jsx             # 入口文件
├── server.js                # Socket.IO 服务器
├── vite.config.js           # Vite 配置
├── package.json
└── README.md
```

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 开发模式

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

```bash
npm run dev
```

或者分别启动：

```bash
# 终端 1: 启动服务器
npm run dev:server

# 终端 2: 启动前端
npm run dev:client
```

### 3. 访问应用

- **前端**: http://localhost:5173 (Vite 开发服务器)
- **后端**: http://localhost:3000 (Socket.IO 服务器)

## 功能特性

### 基础功能
- ✅ 实时聊天消息
- ✅ 用户加入/离开通知
- ✅ 在线用户列表
- ✅ 正在输入提示
- ✅ 美观的 UI 界面
- ✅ 内网访问支持

### 房间功能（Rooms）
- ✅ 多房间支持（创建、加入、切换房间）
- ✅ 房间消息隔离（每个房间消息独立）
- ✅ 房间用户列表显示
- ✅ 默认房间（general、random）
- ✅ 实时房间列表更新

## 开发说明

### React 组件结构

- **LoginModal**: 用户登录界面
- **Sidebar**: 房间列表和创建房间
- **ChatArea**: 消息显示和输入区域
- **useSocket Hook**: 封装所有 Socket.IO 逻辑

### Socket.IO Hook

`useSocket` Hook 提供了：
- Socket 连接管理
- 房间管理
- 消息发送/接收
- 事件监听

使用示例：
```jsx
const {
  connected,
  currentRoom,
  rooms,
  messages,
  joinChat,
  joinRoom,
  sendMessage
} = useSocket()
```

## 构建生产版本

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

# 预览生产版本
npm run preview

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

## Socket.IO 核心概念

### 服务器端

**基础事件：**
- `io.on('connection', callback)` - 监听新客户端连接
- `socket.emit(event, data)` - 向特定客户端发送事件
- `socket.broadcast.emit()` - 向除发送者外的所有客户端广播
- `io.emit()` - 向所有连接的客户端广播

**房间功能（Rooms）：**
- `socket.join(roomName)` - 加入房间
- `socket.leave(roomName)` - 离开房间
- `io.to(roomName).emit()` - 向房间内所有客户端发送消息

### 客户端

- `socket.emit(event, data)` - 向服务器发送事件
- `socket.on(event, callback)` - 监听服务器发送的事件
- `socket.disconnect()` - 断开连接

## 详细文档

- 📖 [Socket.IO 学习要点清单](./SOCKETIO_LEARNING_GUIDE.md) - 完整的学习路径
- 🏠 [Rooms 功能教程](./ROOMS_TUTORIAL.md) - Rooms 功能详细说明

## 下一步学习

- ✅ ~~房间（Rooms）功能~~ - 已完成
- ⏳ 命名空间（Namespaces）
- ⏳ 中间件（Middleware）和身份验证
- ⏳ 私聊功能
- ⏳ 文件传输
- ⏳ 集群部署（Redis 适配器）

## 注意事项

- 开发环境：前端运行在 5173 端口，后端在 3000 端口
- 生产环境：前端构建后由 Express 服务器提供静态文件
- CORS 配置：已配置允许 Vite 开发服务器访问