# ueui

**Repository Path**: kcat11/ueui

## Basic Information

- **Project Name**: ueui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-26
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UE Vue 通信系统

这是一个基于 Vue 3 和 Vite 构建的 Web 应用，用于与 Unreal Engine 进行双向通信。

## 功能特性

- 🎮 **UE 通信**: 基于 ue.js 库与 Unreal Engine 进行双向通信
- 📡 **实时消息**: 支持发送和接收实时消息
- 🔄 **连接状态**: 实时显示与 UE 的连接状态
- 📝 **消息日志**: 完整的消息发送和接收日志
- 🎯 **预设消息**: 内置常用消息模板
- 📱 **响应式设计**: 支持桌面和移动设备

## 项目结构

```
UE_vue/
├── public/
│   └── ue.js              # UE 通信库
├── src/
│   ├── components/
│   │   └── UECommunicationPanel.vue  # 通信控制面板
│   ├── utils/
│   │   └── ue-communication.js       # 通信工具类
│   ├── App.vue            # 主应用组件
│   ├── main.js            # 应用入口
│   └── style.css          # 全局样式
├── index.html             # HTML 入口
├── package.json           # 项目配置
├── vite.config.js         # Vite 配置
└── README.md              # 项目说明
```

## 安装和运行

### 1. 安装依赖

```bash
npm install
```

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

```bash
npm run dev
```

应用将在 `http://localhost:3000` 启动。

### 3. 构建生产版本

```bash
npm run build
```

## 使用方法

### 基本通信

1. **检查连接**: 点击"检查连接"按钮测试与 UE 的连接状态
2. **发送消息**: 在消息发送区域输入事件名称和数据
3. **预设消息**: 使用预设的常用消息模板
4. **查看日志**: 在日志区域查看所有通信记录

### 消息格式

```javascript
// 发送消息示例
{
  "eventName": "playerMove",
  "data": {
    "x": 100,
    "y": 200,
    "speed": 5
  }
}
```

### 预设消息类型

- **Ping**: 连接测试
- **玩家移动**: 玩家位置更新
- **游戏开始**: 游戏状态变更
- **游戏结束**: 游戏结束事件
- **切换武器**: 武器系统
- **播放音效**: 音频控制

## UE 端集成

在 Unreal Engine 中，您需要：

1. 加载包含此 Web 应用的 Web Browser Widget
2. 实现对应的 JavaScript 接口来处理接收到的消息
3. 使用 `ue.interface.broadcast()` 发送消息到 Web 端

### UE 端示例代码

```cpp
// 在 UE 中发送消息到 Web
FString EventName = TEXT("gameState");
FString Data = TEXT("{\"level\": 1, \"score\": 1000}");
FString CallbackId = TEXT("");

// 调用 JavaScript 函数
WebBrowserWidget->ExecuteJavaScript(
    FString::Printf(TEXT("ue.interface.broadcast('%s', '%s', '%s');"), 
    *EventName, *Data, *CallbackId)
);
```

## 技术栈

- **Vue 3**: 前端框架
- **Vite**: 构建工具
- **ue.js**: UE 通信库
- **CSS3**: 样式和动画

## 浏览器支持

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发说明

### 添加新的预设消息

在 `UECommunicationPanel.vue` 中的 `presetMessages` 数组中添加：

```javascript
{
  name: '新消息',
  eventName: 'newEvent',
  data: { key: 'value' }
}
```

### 自定义通信逻辑

修改 `src/utils/ue-communication.js` 中的通信逻辑。

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！