AI零代码应用生成平台（功能扩展）

Boring

2025-08-10 11:48

阅读2502

Boring

2025-08-10 11:48

阅读 2502

最近跟鱼皮学AI零代码应用生成平台，一方面想分享一下自己实现的功能，另一方面想让大家帮忙看看，我实现的功能里有没有什么bug，当然还有最重要的让大家帮我点点star。

项目地址

提交记录有点丑陋，请见谅。GitHub地址 Gitee地址

🌟 拓展功能特性

功能特性对比

功能特性	传统AI代码生成平台	AI Code平台
实时协作	❌ 不支持	✅ WebSocket实时同步
多人查看生成过程	❌ 不支持	✅ 实时流式推送
团队权限管理	⭕ 基础功能	✅ 完整权限体系
在线状态显示	❌ 不支持	✅ 实时在线用户
编辑冲突处理	❌ 无机制	✅ 编辑锁定机制
代码预览	✅ 支持	✅ 实时预览
自动应用命名	❌ 不支持	✅ AI智能生成应用名称
虚拟线程优化	❌ 不支持	✅ 高性能异步处理

主要是实时同步比较复杂一些，重点聊聊。其他的生成应用名称，删除应用时删除ai生成的文件，都可以直接用curosr生成，但是像这种前后端交互性比较强的，还是特别看提示词的，提示词写不好就达不到自己想要的效果。

实时同步

这个项目的实时同步功能是跟着鱼皮的鱼图库项目写的，虽然我没学过这个项目，但是看鱼图库的文档感觉操作特别像，就是这两个项目使用 WebSocket 主要的区别就是不同消息类型的处理不同，其他都是换汤不换药（当时的迷茫直接跳过）。

定义消息类型

想实现的效果是当用户A在跟ai对话时，其他用户无法发送消息。鱼图库也是当用户A在操作图片时，其他用户无法操作。

▼
java
复制代码
//ai code
INFO("发送通知", "INFO"),
ERROR("发送错误", "ERROR"),
USER_ENTER_EDIT("用户进入对话状态", "USER_ENTER_EDIT"),
USER_EXIT_EDIT("用户退出对话状态", "USER_EXIT_EDIT"),
AI_EDIT_ACTION("ai执行对话操作", "AI_EDIT_ACTION");

//yu picture
INFO("发送通知", "INFO"),
ERROR("发送错误", "ERROR"),
ENTER_EDIT("进入编辑状态", "ENTER_EDIT"),
EXIT_EDIT("退出编辑状态", "EXIT_EDIT"),
EDIT_ACTION("执行编辑操作", "EDIT_ACTION");

协作流程

用户进入编辑: 当用户开始与AI对话时，系统通过WebSocket广播USER_ENTER_EDIT消息
实时内容同步: AI生成的每一段内容都会通过AI_EDIT_ACTION消息实时推送给团队其他成员
编辑结束通知: 代码生成完成后发送USER_EXIT_EDIT消息，其他成员可看到最新生成的网页效果

WebSocket实时协作时序图

AI 生成的时序图

▼
mermaid
复制代码
sequenceDiagram
    participant A as 用户A
    participant B as 用户B
    participant WS as WebSocket服务器
    participant AI as AI服务
    participant VT as 虚拟线程

    A->>WS: 连接WebSocket (appId=123)
    B->>WS: 连接WebSocket (appId=123)
    WS->>A: 发送INFO消息 (在线用户列表)
    WS->>B: 发送INFO消息 (在线用户列表)

    Note over A,AI: 用户A开始AI对话

    A->>WS: 发送USER_ENTER_EDIT消息
    WS->>B: 广播USER_ENTER_EDIT (A开始编辑)
    A->>AI: 发起SSE对话请求
    
    AI->>AI: 智能分析生成类型
    AI->>AI: 生成应用名称
    
    loop AI流式生成内容
        AI->>A: 返回生成内容片段
        A->>WS: 发送AI_EDIT_ACTION消息
        WS->>B: 广播AI_EDIT_ACTION (实时内容)
    end

    AI->>A: 生成完成
    A->>WS: 发送USER_EXIT_EDIT消息
    WS->>B: 广播USER_EXIT_EDIT (A结束编辑)
    
    Note over A,VT: 部署应用
    A->>VT: 异步生成截图
    A->>VT: 异步构建Vue项目
    VT->>VT: 上传截图到COS
    VT->>VT: 执行npm构建
    
    Note over A,B: 用户B可以看到最终生成的网页效果和截图封面

疑问

测试时发现实现的效果没有问题，但是页面有时会多打印相同的信息，检查了前端代码没有重复打印的代码，也没排查出来就很奇怪
写这个功能的时候就直接跟着鱼图库走了，没有考虑过是否要使用Disruptor框架，现在想想目前这个项目使用该框架，是不是因为“多个客户端使用的是同一个线程，AI 回复时间长，可能会导致请求线程阻塞，请求和处理是同一线程，最终导致Tomcat请求数耗尽。这时我们就用Disruptor框架可以专门开一个线程处理请求”

项目效果图

补充：最近yes哥，怎么一个星期才一播，那我请问，粉丝晚上的乐趣哪来？

问答助学