【AI角色扮演游戏平台】记录开发过程中遇见的问题

活动：Day 0计划孵化手册

指路地址：https://mp.weixin.qq.com/s/hWcif-sVEj7ILRRKsOp_7

要求：打造一个角色扮演AI对话平台，让用户能够与自己喜欢的虚拟角色进行沉浸式对话。AI将根据角色的性格设定、背景故事做出符合人设的回复，带来独特的交互及体验。

成果展示：

方法：zulu插件生成代码的基础框架，后续进行修改

遇到的问题

(1)localhost跳转失败，后来发现是端口占用

(2)通过源码工具发现数据没有成功响应，前后端没有进行交互

(3)没有实现角色绑定，跳转到真正的人物界面时，图片参数传递未成功

（点击第二，三个角色也是这个交互界面，代码设定为跳转失败则使用第一个角色头像作为默认设置）

人物头像为空，因为未实现绑定和正确跳转。

关于大模型的流式回复，前后端交互流程

前端：用户在 ChatView.vue 发送消息 → chatApi.ts 发起 SSE 请求 → 前端监听 SSE 数据流，在 ChatView.vue 中逐字拼接消息并渲染，实现 "打字机" 效果 → chatStore.ts 维护流式消息状态，保证界面响应式更新。

后端：chat.controller.ts 接收请求 → chat.service.ts 调用大模型 API → 大模型返回流式响应 → 后端通过 SSE 逐段推送给前端 → 同时将对话历史存入数据库。

流式回复介绍：

流式回复（Streaming Response）是服务端不一次性返回完整数据，而是将内容分批次、持续推送给客户端的通信方式，客户端可实时接收并渲染/处理数据，无需等待全量响应，典型场景如AI对话逐字输出、实时日志、股票行情推送等。

SSE与WebSocket选择：

AI流式对话是SSE(Server-Sent Events)的高频用法：服务端生成一句回答时，每生成一个分句/文字就推一次数据，前端通过 EventSource 实时接收并拼接展示，实现"逐字输出"的体验，开发量远低于WebSocket方案。

方案选择：

1. 选SSE：仅需服务端单向推数据（如流式AI回复、实时通知、日志推送），追求开发快、部署简单，无需客户端主动发消息的场景；

2. 选WebSocket：需要客户端与服务端双向实时交互（如聊天软件、在线游戏、协同编辑、实时风控），或需传输二进制数据、高并发连接的场景。