更新记录

v1.0.0（2026-11-13） 下载此版本

H5 已用本地 SSE 服务验证逐段输出、多轮上下文、停止和重试，5 项自动测试通过

平台兼容性

UniChat 流式对话插件使用说明

UniChat 是一个面向 uni-app Vue 3 的聊天组件。它通过 POST 读取 SSE 响应，边接收边显示回复，支持多轮对话、停止生成、重新生成、复制和清空会话。插件 ID 为 lxm-streamchat，当前版本为 1.0.0。

安装

1. 在插件市场点击「使用 HBuilderX 导入插件」，或解压插件包，把 lxm-streamchat 文件夹复制到项目根目录的 uni_modules 下。
2. 确认组件路径为 uni_modules/lxm-streamchat/components/lxm-streamchat/lxm-streamchat.vue。使用项目默认的 easycom 配置即可直接写 <lxm-streamchat />，无需安装 npm 依赖。
3. 将下方任一示例放入已注册的 Vue 3 页面。给组件外层容器设置明确的高度，聊天记录区才能在容器内滚动。

快速体验（无需后端）

运行下面的页面，点击「你好」或输入一条消息。文字会逐段显示，生成过程中可以点击输入框旁的按钮停止。

<template>
  <view style="height: 75vh; display: flex; flex-direction: column">
    <lxm-streamchat :stream="demoStream" :suggestions="['你好']" />
  </view>
</template>

<script setup>
function demoStream({ messages, onDelta, onFinish }) {
  const lastMessage = messages[messages.length - 1]
  const parts = ['你刚才说了：', lastMessage.content, '\n\n这是一条本地流式回复。']
  const timer = setInterval(() => {
    onDelta(parts.shift())
    if (!parts.length) onFinish()
  }, 400)
  return () => clearInterval(timer)
}
</script>

如果你下载了完整示例工程，也可以运行 npm ci 和 npm run dev:h5。示例页默认使用本地演示。要验证真实 HTTP 分块，在另一个终端运行 npm run mock:sse，然后点击页面顶部的「本地演示」，把接口地址填为 http://127.0.0.1:8787/api/chat。

接入自己的 SSE 后端

把 endpoint 替换成业务后端的完整地址。如果接口要求前端传模型名，使用 request-data。如果接口需要鉴权，使用 headers 传业务会话令牌，模型供应商的 API 密钥应保存在业务后端。

<template>
  <view style="height: 75vh; display: flex; flex-direction: column">
    <lxm-streamchat
      endpoint="https://example.com/api/chat"
      :suggestions="['你好', '介绍一下流式对话']"
      @finish="onFinish"
      @error="onError"
    />
  </view>
</template>

<script setup>
function onFinish({ content }) {
  console.log('收到回复', content)
}

function onError({ message }) {
  console.error('生成失败', message)
}
</script>

例如，已有 sessionToken 和 modelName 时，可以加上 :headers="{ Authorization: 'Bearer ' + sessionToken }" 和 :request-data="{ model: modelName }"。

请求格式

组件发送 JSON 格式的 POST 请求，默认请求头为 Content-Type: application/json 和 Accept: text/event-stream。messages 和 stream: true 由组件生成。配置 system-prompt 后，系统消息会出现在数组首位。多轮请求会携带此前的用户消息和已完成的助手回复。停止或出错时的部分回复保留在界面中。

{
  "messages": [
    { "role": "user", "content": "你好" }
  ],
  "stream": true
}

响应格式

服务端返回 HTTP 2xx 和 Content-Type: text/event-stream; charset=utf-8，生成一段就写出一条事件。下面分别展示 OpenAI Chat Completions 格式和简化 JSON 格式。两种格式都只传本次新增的文本，组件会把增量追加到当前回复。

data: {"choices":[{"delta":{"content":"你好"}}]}

data: {"delta":"，有什么可以帮你？"}

data: [DONE]

每条事件以空行结束，例如 data: [DONE]\n\n。正常结束时发送 data: [DONE] 或 event: done，随后关闭响应。若后端约定以正常关闭响应表示完成，可设置 :require-done="false"。业务错误可以用 data: {"error":{"message":"请求次数已达上限"}} 返回，也可以发送带 data 的 event: error。

属性

事件、方法与插槽

为组件添加 ref="chat"。在 <script setup> 中从 vue 导入 ref，用 const chat = ref(null) 声明引用。组件挂载后即可调用 chat.value?.send('你好') 等实例方法。

消息状态包括 streaming、done、stopped、error。消息保存在组件实例中，需要保留历史时，可在 finish 等事件中读取快照并交给业务层保存。

#welcome 可替换空会话的欢迎内容。#footer 显示在输入框下方，适合放输入提示或使用说明。

自定义流式适配器

传入 :stream="myStream" 时，组件优先使用适配器。上面的 demoStream 就是一个可运行的适配器。适配器收到 messages、onDelta、onFinish 和 onError，应同步返回取消函数。每次收到新文本时调用 onDelta(文本增量)，成功后调用 onFinish()，出错时调用 onError(error)。组件会在结束、出错、停止、清空和卸载时调用取消函数，用它关闭请求、定时器或其他资源。

平台与常见问题

插件安装规范见 DCloud uni_modules 文档。