# socket.io.demo

**Repository Path**: coder-kai/socket.io.demo

## Basic Information

- **Project Name**: socket.io.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-11-26
- **Last Updated**: 2025-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Socket.io 快速入门 Demo

> 一个完整的 Socket.io 实时聊天应用示例，包含 Vue 3 + Vite 前端和 Node.js + Express 后端

## 📋 项目结构

```
socket.io-demo/
├── server/              # Node.js 服务器端
│   ├── index.js        # Socket.io 服务器主文件
│   └── package.json    # 服务器依赖配置
├── client/             # Vue 3 客户端
│   ├── src/
│   │   ├── components/
│   │   │   └── ChatRoom.vue  # 聊天室组件
│   │   ├── App.vue
│   │   ├── main.js
│   │   └── style.css
│   ├── index.html
│   ├── vite.config.js
│   └── package.json    # 客户端依赖配置
├── socket.io-quick-start.md  # 快速入门文档
├── package.json        # 根目录配置
└── README.md
```

## 🚀 快速开始

### 1. 安装依赖

```bash
# 安装所有依赖（根目录 + server + client）
pnpm run install:all

# 或者分别安装
pnpm install
cd server && pnpm install
cd ../client && pnpm install
```

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

#### 方式一：分别启动（推荐）

```bash
# 终端 1：启动服务器（端口 3000）
pnpm run dev:server

# 终端 2：启动客户端（端口 5173）
pnpm run dev:client
```

#### 方式二：同时启动

```bash
# 同时启动服务器和客户端
pnpm run dev
```

### 3. 访问应用

- 前端地址：http://localhost:5173
- 后端地址：http://localhost:3000

## 📖 使用说明

1. **打开前端页面**：访问 http://localhost:5173
2. **设置用户名**：在弹出的对话框中输入用户名
3. **开始聊天**：输入消息并按 Enter 发送
4. **查看在线用户**：左侧边栏显示所有在线用户
5. **多窗口测试**：打开多个浏览器窗口/标签页，模拟多用户聊天

## 🛠️ 技术栈

### 后端
- Node.js (ES Modules)
- Express
- Socket.io

### 前端
- Vue 3 (Composition API)
- Vite
- Socket.io-client

### 包管理
- pnpm

## 📚 功能特性

- ✅ 实时双向通信
- ✅ 在线用户列表
- ✅ 系统消息通知
- ✅ 自动重连机制
- ✅ 连接状态显示
- ✅ 消息时间戳
- ✅ 响应式设计

## 📝 API 说明

### 客户端发送事件

- `user-join`: 用户加入聊天室
  ```javascript
  socket.emit('user-join', username);
  ```

- `chat-message`: 发送聊天消息
  ```javascript
  socket.emit('chat-message', { text: '消息内容' });
  ```

- `join-room`: 加入房间
  ```javascript
  socket.emit('join-room', 'room-name');
  ```

- `leave-room`: 离开房间
  ```javascript
  socket.emit('leave-room', 'room-name');
  ```

### 服务器发送事件

- `users-update`: 在线用户列表更新
- `chat-message`: 接收聊天消息
- `system-message`: 系统消息通知

## 🔧 开发说明

### 服务器配置

服务器默认运行在 `http://localhost:3000`，可以通过环境变量修改：

```bash
PORT=3000 pnpm run dev:server
```

### 客户端配置

客户端默认运行在 `http://localhost:5173`，配置在 `client/vite.config.js` 中。

如需修改服务器地址，编辑 `client/src/components/ChatRoom.vue`：

```javascript
const socket = io('http://localhost:3000', {
  // 配置选项
});
```

## 📖 文档

详细文档请查看 [socket.io-quick-start.md](./socket.io-quick-start.md)

## 📄 许可证

MIT

## 👤 作者

sukai <sukai@joyme.sg>

---

**祝学习愉快！** 🚀