# websocketui

**Repository Path**: xwt1988/websocketui

## Basic Information

- **Project Name**: websocketui
- **Description**: 用于连接websocket并用接口和websocket交互
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-19
- **Last Updated**: 2025-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebSocket 和 HTTP 请求工具

这个工具允许用户通过WebSocket连接获取Session ID，然后使用这个Session ID发送GET或POST请求到指定的后端API。

## 使用方法

1. **连接WebSocket**：
   - 在输入框中填入WebSocket服务器地址（默认为 `ws://localhost:8080/ws`）
   - 点击「连接」按钮建立WebSocket连接
   - 连接成功后，状态会变为「已连接」，并显示获取到的Session ID

2. **发送HTTP请求**：
   - 选择请求方法（GET或POST）
     - **GET请求**：通过键值对形式输入参数
     - **POST请求**：通过JSON格式输入参数
   - 输入请求URL
   - 对于GET请求：
     - 在键值对表格中输入参数名和参数值
     - 点击「添加参数」按钮可以添加更多参数行
     - 点击参数行右侧的「删除」按钮可以移除该参数
   - 对于POST请求：
     - 在文本框中输入JSON格式的请求参数（默认为 `{}`）
   - 点击「发送请求」按钮
   - 响应结果会显示在下方的文本区域

## 技术实现

- **前端**：HTML, CSS, JavaScript
- **WebSocket**：使用浏览器内置的WebSocket API
- **HTTP请求**：使用Fetch API
- **Session ID**：通过WebSocket连接获取，并自动添加到HTTP请求参数中

## 注意事项

1. 请确保WebSocket服务器正在运行，并且能够正确返回包含Session ID的消息
2. HTTP请求会自动将Session ID添加到请求参数中
3. 请求参数必须是有效的JSON格式
4. 对于GET请求，参数会被转换为查询字符串；对于POST请求，参数会作为请求体发送
5. 响应结果会以JSON格式显示

## 本地开发

### 启动流程

1. **启动HTTP服务器**：
   - 用于提供前端静态文件
   - 命令：`python -m http.server 8000`
   - 默认端口为8000，访问地址：http://localhost:8000

2. **启动代理服务器**：
   - 用于解决跨域请求问题，支持所有源的跨域访问
   - 命令：`node proxy.js`
   - 默认端口为3000，代理地址：http://localhost:3000
   - 支持的跨域功能：
     - 允许所有源的跨域请求（动态识别请求源）
     - 支持多种HTTP方法（GET, POST, PUT, DELETE, OPTIONS, PATCH, HEAD）
     - 支持常见的请求头（Content-Type, Authorization, X-Requested-With等）
     - 支持凭证传递（cookies, authorization headers）
     - 24小时预检缓存，提高性能

3. **启动后端服务**：
   - 确保WebSocket服务和API服务已启动
   - 默认WebSocket地址：ws://localhost:8080/ws
   - 默认API地址：http://localhost:7080

4. **访问应用**：
   - 在浏览器中打开：http://localhost:8000
   - 连接WebSocket获取Session ID
   - 发送HTTP请求测试功能

### 详细启动命令

#### Windows系统

1. **启动HTTP服务器**：
   ```
   # 打开命令提示符
   cd d:\xwt\trae-workspace\websocket
   python -m http.server 8000
   ```

2. **启动代理服务器**：
   ```
   # 打开新的命令提示符
   cd d:\xwt\trae-workspace\websocket
   node proxy.js
   ```

#### macOS/Linux系统

1. **启动HTTP服务器**：
   ```
   # 打开终端
   cd /path/to/websocket
   python3 -m http.server 8000
   ```

2. **启动代理服务器**：
   ```
   # 打开新的终端
   cd /path/to/websocket
   node proxy.js
   ```

### 故障排除

1. **端口占用**：
   - 如果8000端口被占用，可以使用其他端口，如8081：`python -m http.server 8081`
   - 相应地修改浏览器访问地址：http://localhost:8081

2. **代理服务器错误**：
   - 确保已安装Node.js
   - 检查proxy.js文件是否存在语法错误
   - 查看命令行输出的错误信息

3. **CORS跨域错误**：
   - 确保代理服务器已启动（`node proxy.js`）
   - 检查app.js中的代理配置是否正确
   - 确认请求URL是否被正确转发到代理服务器
   - 新的代理服务器支持所有源的跨域访问，无需修改前端访问方式
   - 可以通过任何方式访问前端页面（file://、http://localhost、其他域名等）

4. **代理服务器功能验证**：
   - 启动代理服务器后，应该看到：`代理服务器运行在 http://localhost:3000`
   - 确认目标服务器地址：`将请求转发到 http://192.168.8.120:9315`
   - 所有HTTP请求都会自动通过代理服务器转发，无需手动配置

## 功能扩展建议

1. 添加更多HTTP请求方法支持（如PUT、DELETE等）
2. 增加请求头自定义功能
3. 添加请求超时设置
4. 实现请求历史记录功能
5. 增加对WebSocket消息的更复杂处理