点击右上角 下载插件并导入HBuilderX
uniapp插件地址:https://ext.dcloud.net.cn/plugin?id=20971
或者你可以参考我的示例
<template>
<button @click="start">开始</button>
<button @click="stop">停止</button>
<template v-if="loading">
<view>{{ openLoading ? "正在连接sse..." : '连接完成!' }}</view>
<view>{{ loading ? "加载中..." : '' }}</view>
</template>
<view>
{{ responseText }}
</view>
<gao-ChatSSEClient
ref="chatSSEClientRef"
@onOpen="openCore"
@onError="errorCore"
@onMessage="messageCore"
@onFinish="finishCore"
/>
</template>
<script setup>
import { ref } from 'vue'
const chatSSEClientRef = ref(null);
const responseText = ref("");
const loading = ref(false);
const openLoading = ref(false);
const openCore = (response) => {
openLoading.value = false;
console.log("open sse:", response);
}
const errorCore = (err) => {
console.log("error sse:", err);
}
const messageCore = (msg) => {
console.log("message sse:", msg);
responseText.value += `${msg}\n`
}
const finishCore = () => {
console.log("finish sse")
loading.value = false;
}
const start = () => {
if (loading.value) return;
openLoading.value = true;
loading.value = true;
responseText.value = "";
chatSSEClientRef.value.startChat({
/**
* 将它换成你的地址
* 注意:
* 如果使用 sse-server.js 要在手机端使用的话,请确保你的手机和电脑处在一个局域网下并且是正常的ip地址
*/
url: import.meta.env.VITE_CHAT_URL || 'http://localhost:3000/sse',
// 请求头
headers: {
Authorization: import.meta.env.VITE_CHAT_AUTHORIZATION,
},
// 默认为 post
method: 'post',
body: {
"stream":true,
"model": "deepseek-chat",
"messages": [
{"role": "system", "content": "你是来自艺咖科技的数字员工,你的名字叫小咖。"}]
}
})
}
const stop = () => {
chatSSEClientRef.value.stopChat()
console.log("stop");
}
</script>
示例项目根目录的sse-server.js
文件提供了一个简单的sse测试服务,使用 node sse-server.js
运行
提出问题之前请先确保你的接口没有问题
请仔细阅读我提供的示例代码。
如果你的程序有问题请先下载我提供的示例项目调试!
如果想了解原理请看我掘金的文章: 点击前往
本插件依赖于 fetch-event-source
库,将编辑后的js集成,因为我修改了原来库解析的逻辑,使其更适用于中国宝宝体质。
如果这个组件解决了你的问题,麻烦去github 帮我点个赞,谢谢大家
有新需求或者bug可以在github上提issues,或者加我q 1933669775
后端接口处理一下跨域即可解决。