218 lines
6.2 KiB
Markdown
218 lines
6.2 KiB
Markdown
# 远程文件编辑器
|
||
|
||
一个为 ComputerCraft: Tweaked (CC:Tweaked) 设计的远程文件编辑器，支持实时文件管理和代码编辑。
|
||
|
||
Demo: http://cc-web-edit.liulikeji.cn
|
||
|
||
你可以直接使用 Demo，这是开放的，但你也可以部署自己的服务器
|
||
|
||
## 🌟 特性
|
||
|
||
### 核心功能
|
||
|
||
- **远程文件管理**：实时浏览、编辑和管理 CC:Tweaked 计算机中的文件
|
||
- **Monaco 编辑器**：基于 VS Code 的 Monaco 编辑器，提供专业的代码编辑体验
|
||
- **低延迟通信**：基于 HTTP 长轮询 + 请求挂起机制，模拟 WebSocket 的低延迟传输
|
||
|
||
### 文件操作
|
||
|
||
- ✅ 文件/文件夹创建、重命名、删除
|
||
- ✅ 文本文件在线编辑和保存
|
||
- ✅ 文件上传（支持多文件，最大 1MB）
|
||
- ✅ 文件下载到本地
|
||
- ✅ 二进制文件识别（非文本文件显示为 `[binary]`）
|
||
|
||
### CC:Tweaked 集成
|
||
|
||
- **自动命令生成**：根据 URL 参数自动生成连接命令
|
||
- **一键复制**：点击即可复制连接命令到剪贴板
|
||
- **房间管理**：支持创建和加入房间
|
||
- **实时通信**：高效的请求挂起机制确保接近实时的响应
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 项目结构
|
||
|
||
```
|
||
项目根目录/
|
||
├── PyServer/ # Python 后端服务器
|
||
│ ├── main.py # 主服务器文件
|
||
│ └── static/ # 静态文件目录（需手动创建）
|
||
│ └── Client/
|
||
│ └── cc/
|
||
│ └── main.lua # CC:Tweaked 客户端脚本
|
||
├── Frontend1/ # Vue 前端项目
|
||
│ ├── src/
|
||
│ │ ├── App.vue # 主组件
|
||
│ │ └── mock-server.ts # HTTP 客户端
|
||
│ └── package.json
|
||
└── Client/ # 客户端文件
|
||
└── main.lua # CC:Tweaked 客户端脚本
|
||
```
|
||
|
||
### 部署步骤
|
||
|
||
1. **部署后端服务器**
|
||
|
||
```bash
|
||
# 进入后端目录
|
||
cd PyServer
|
||
|
||
# 创建静态文件目录
|
||
mkdir -p static/Client/cc
|
||
|
||
# 复制客户端脚本到静态目录
|
||
cp ../Client/main.lua static/Client/cc/main.lua
|
||
|
||
# 安装依赖
|
||
pip install -r requirements.txt
|
||
|
||
# 启动服务器（需要管理员权限绑定80端口）
|
||
python main.py
|
||
```
|
||
|
||
服务器将启动：
|
||
|
||
- HTTP 服务：端口 80（文件服务、API 和静态资源）
|
||
|
||
2. **构建前端项目**
|
||
|
||
```bash
|
||
# 进入前端目录
|
||
cd Frontend1
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 将构建产物复制到后端静态目录
|
||
cp -r dist/* ../PyServer/static/
|
||
```
|
||
|
||
3. **访问编辑器**
|
||
打开浏览器访问 `http://你的服务器地址` 即可使用编辑器。
|
||
|
||
### CC:Tweaked 客户端连接
|
||
|
||
1. **获取连接命令**
|
||
|
||
- 访问编辑器页面会自动创建房间
|
||
- 在页面底部点击命令文本即可复制连接命令
|
||
|
||
2. **在游戏中运行**
|
||
|
||
```lua
|
||
# 粘贴复制的命令到CC:Tweaked计算机
|
||
# 命令格式类似：wget run http://服务器地址/Client/cc/main.lua http://服务器地址 房间ID
|
||
```
|
||
|
||
3. **刷新文件列表**
|
||
- 在 CC 客户端连接成功后
|
||
- 返回编辑器页面点击刷新按钮即可看到文件列表
|
||
|
||
## 🔧 功能说明
|
||
|
||
### 当前支持的功能
|
||
|
||
- 📁 文件系统浏览和操作
|
||
- 📝 文本文件在线编辑
|
||
- ⬆️ 文件上传（≤1MB）
|
||
- ⬇️ 文件下载到本地
|
||
- 🔄 实时文件同步
|
||
|
||
### 限制说明
|
||
|
||
- **二进制文件**：非文本文件会显示为 `[binary]`，无法在线编辑
|
||
- **单客户端**：目前主要支持一个网页端和一个 CC 客户端的配对使用
|
||
- **文件大小**：上传文件限制为 1MB
|
||
- **低延迟**：HTTP 长轮询机制提供接近实时的响应体验
|
||
|
||
### 计划功能
|
||
|
||
- 🚧 远程控制台（后续开发）
|
||
- 🚧 改进的多客户端支持
|
||
|
||
## ⚙️ API 接口
|
||
|
||
### HTTP API 接口
|
||
|
||
- `POST /api/room` - 创建房间
|
||
- `POST /api/frontend/send` - 前端发送消息到客户端
|
||
- `POST /api/frontend/receive` - 前端接收来自客户端的消息（长轮询）
|
||
- `POST /api/client/send` - 客户端发送消息到前端
|
||
- `POST /api/client/receive` - 客户端接收来自前端的消息（长轮询）
|
||
|
||
### 通信机制
|
||
|
||
**长轮询 + 请求挂起**：
|
||
|
||
- 客户端请求挂起最长达 295 秒，直到有消息到达
|
||
- 当有新消息时立即响应，实现低延迟传输
|
||
- 服务器端控制请求超时，避免不必要的轮询
|
||
|
||
### 消息类型
|
||
|
||
- `file_operation` - 文件操作请求
|
||
- `file_operation_response` - 文件操作响应
|
||
|
||
### 文件操作类型
|
||
|
||
- `fetch_files` - 获取文件列表
|
||
- `create_or_save_file` - 创建/保存文件
|
||
- `new_file` - 创建新文件
|
||
- `new_folder` - 创建新文件夹
|
||
- `rename` - 重命名文件/文件夹
|
||
- `delete_file` - 删除文件/文件夹
|
||
|
||
## 🎯 使用流程
|
||
|
||
1. **访问编辑器**：打开服务器地址，自动创建房间
|
||
2. **复制命令**：点击编辑器主页的 CC:Tweaked 命令文本，复制到剪贴板
|
||
3. **CC 端连接**：在游戏中粘贴并运行命令
|
||
4. **刷新列表**：在编辑器中刷新文件列表
|
||
5. **开始编辑**：浏览和编辑 CC 计算机中的文件
|
||
|
||
## 🔒 注意事项
|
||
|
||
1. **权限要求**：服务器需要绑定 80 端口
|
||
2. **网络访问**：确保 CC:Tweaked 计算机可以访问你的服务器
|
||
3. **文件安全**：操作会直接影响游戏内计算机的文件系统
|
||
|
||
## 🐛 常见问题
|
||
|
||
**Q: 无法访问编辑器页面**
|
||
A: 检查服务器是否正常启动，80 端口是否被占用
|
||
|
||
**Q: CC 端连接失败**
|
||
A: 检查网络连通性，确保游戏内计算机可以访问服务器
|
||
|
||
**Q: 文件列表为空**
|
||
A: 确保 CC 客户端已成功连接，然后刷新文件列表
|
||
|
||
**Q: 文件上传失败**
|
||
A: 检查文件大小是否超过 1MB 限制
|
||
|
||
**Q: 消息传输延迟**
|
||
A: 服务器使用长轮询机制，响应通常在毫秒级别
|
||
|
||
## 📄 技术说明
|
||
|
||
- **后端**：Python + HTTP Server + 长轮询机制
|
||
- **前端**：Vue 3 + TypeScript + Monaco Editor
|
||
- **通信**：HTTP 长轮询 + 请求挂起实现低延迟通信
|
||
- **客户端**：CC:Tweaked + HTTP
|
||
|
||
## 🤝 开发说明
|
||
|
||
该项目使用创新的 HTTP 长轮询 + 请求挂起机制来模拟 WebSocket 的低延迟传输特性，为远程代码编辑提供了近乎实时的响应体验。
|
||
|
||
远程控制台功能计划在后续版本中开发。
|
||
|
||
## 贡献
|
||
|
||
你可以制作适配不同平台的客户端然后共享其代码
|
||
|
||
欢迎提交 issues
|