# demowebsocket

**Repository Path**: wolflee1989712/demowebsocket

## Basic Information

- **Project Name**: demowebsocket
- **Description**: demowebsocket
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-14
- **Last Updated**: 2025-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 沙盘远程操控系统

一个基于WebSocket的实时沙盘远程操控系统，支持iPad等移动设备进行远程操作。

## 功能特性

- 🎨 **实时绘制**: 支持多用户同时在沙盘上绘制
- 📱 **移动优化**: 专为iPad等触控设备优化
- 🔄 **实时同步**: WebSocket实现毫秒级数据同步
- 🏗️ **对象管理**: 支持添加建筑、树木、道路等沙盘元素
- 👥 **多用户协作**: 支持多个用户同时操作
- 🎛️ **灵活控制**: 可调节画笔大小、透明度等参数

## 技术栈

### 前端
- HTML5 Canvas
- 原生JavaScript (ES6+)
- CSS3 (响应式设计)
- WebSocket API

### 后端
- Node.js
- WebSocket (ws库)
- Express.js
- UUID生成

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动服务器

```bash
# 生产环境
npm start

# 开发环境 (需要安装nodemon)
npm run dev
```

### 3. 访问应用

- 打开浏览器访问: `http://localhost:4000`
- WebSocket服务运行在: `ws://localhost:9090`

## 使用说明

### 基本操作

1. **连接服务器**: 点击"连接服务器"按钮建立WebSocket连接
2. **开始绘制**: 在沙盘区域用鼠标或手指绘制
3. **调整设置**: 使用右侧控制面板调整画笔大小和透明度
4. **清空沙盘**: 点击"清空沙盘"按钮清除所有内容
5. **重置视图**: 点击"重置视图"按钮恢复默认设置

### iPad使用技巧

- 使用Safari浏览器获得最佳体验
- 支持多点触控和手势操作
- 建议将网页添加到主屏幕作为Web App使用
- 横屏使用可获得更大的操作空间

### 键盘快捷键

- `空格键`: 连接/断开服务器
- `Delete键`: 清空沙盘
- `Escape键`: 断开连接
- `Ctrl+Z`: 撤销 (暂未实现)

## API接口

### WebSocket消息格式

#### 客户端发送消息

```javascript
// 开始绘制
{
  "type": "draw_start",
  "x": 100,
  "y": 150,
  "brushSize": 5,
  "opacity": 1
}

// 绘制移动
{
  "type": "draw_move",
  "fromX": 100,
  "fromY": 150,
  "toX": 105,
  "toY": 155,
  "brushSize": 5,
  "opacity": 1
}

// 添加对象
{
  "type": "add_object",
  "object": {
    "type": "building",
    "x": 200,
    "y": 200,
    "color": "#3498db"
  }
}

// 清空画布
{
  "type": "clear_canvas"
}
```

#### 服务器响应消息

```javascript
// 欢迎消息
{
  "type": "welcome",
  "clientId": "uuid",
  "message": "欢迎连接到沙盘服务器"
}

// 用户数量更新
{
  "type": "user_count",
  "count": 3
}

// 沙盘状态
{
  "type": "sandbox_state",
  "state": {
    "objects": [...],
    "drawingHistory": [...]
  }
}
```

## 开发指南

### 项目结构

```
webdemo/
├── index.html          # 主页面
├── server.js           # WebSocket服务器
├── package.json        # 项目配置
├── README.md          # 项目说明
└── js/
    ├── main.js        # 主应用逻辑
    ├── sandbox.js     # 沙盘绘制功能
    └── websocket.js   # WebSocket客户端
```

### 添加新功能

1. **添加新的沙盘对象类型**:
   - 在`sandbox.js`的`drawObject`方法中添加新的绘制逻辑
   - 在服务器端添加相应的消息处理

2. **扩展WebSocket消息类型**:
   - 在客户端`websocket.js`的`handleMessage`方法中添加处理逻辑
   - 在服务器端`handleClientMessage`函数中添加对应处理

### 性能优化建议

- 限制绘制历史记录数量
- 使用消息队列处理高频操作
- 实现客户端缓存机制
- 添加消息压缩

## 部署说明

### 本地部署

1. 确保Node.js版本 >= 14.0.0
2. 安装依赖: `npm install`
3. 启动服务: `npm start`

### 生产环境部署

1. 使用PM2等进程管理器
2. 配置反向代理 (Nginx)
3. 启用HTTPS和WSS
4. 设置环境变量

```bash
# 环境变量示例
PORT=9090          # WebSocket端口
HTTP_PORT=4000     # HTTP端口
NODE_ENV=production
```

## 故障排除

### 常见问题

1. **无法连接WebSocket**
   - 检查服务器是否正常运行
   - 确认端口没有被占用
   - 检查防火墙设置

2. **iPad上触控不响应**
   - 确保使用Safari浏览器
   - 检查触控事件绑定
   - 尝试刷新页面

3. **绘制延迟较高**
   - 检查网络连接
   - 减少同时在线用户数
   - 优化消息频率

### 调试模式

打开浏览器开发者工具，在控制台中可以使用以下调试命令:

```javascript
// 获取应用状态
getAppStatus()

// 添加测试对象
addBuilding(100, 100, '#ff0000')
addTree(200, 200)
addRoad(50, 50, 150, 150)

// 导出/导入数据
const data = exportSandbox()
importSandbox(data)
```

## 许可证

MIT License

## 贡献

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