更新记录

1.1.1（2025-02-08） 下载此版本

感谢老铁 @184***@qq.com 的指正，修复了参数错误的问题。

1.1.0（2025-01-10） 下载此版本

更新内容：兼容微信小程序

大家好，最近在搞兼容微信小程序，顺便把组件也改了一下。

现在组件兼容：浏览器、微信小程序、安卓、ios 了

1.0.0（2024-11-10） 下载此版本

1.0.0 完成。 支持浏览器、安卓、ios

平台兼容性

sse 客户端组件，支持v2、v3、安卓、ios、浏览器、微信小程序

使用说明

安装 @microsoft/fetch-event-source

本插件依赖 @microsoft/fetch-event-source，使用必须安装

npm i @microsoft/fetch-event-source

导入组件

点击右上角 下载插件并导入HBuilderX

示例代码

<template>
  <ChatSSEClient
      ref="chatSSEClientRef"
      @onOpen="openCore"
      @onError="errorCore"
      @onMessage="messageCore"
      @onFinish="finishCore"
  />
  <button @click="start">开始</button>
  <button @click="stop">停止</button>
  <template v-if="loading">
    <view>{{ openLoading ? "正在连接sse..." : '连接完成！' }}</view>
    <view>{{ loading ? "加载中..." : '' }}</view>
  </template>

  <view>
    {{ responseText }}
  </view>
</template>

<script setup>
import ChatSSEClient from "@/components/ChatSSEClient.vue";
import { ref } from 'vue'

const chatSSEClientRef = ref(null);
const responseText = ref("");
const loading = ref(false);
const openLoading = ref(false);

const openCore = () => {
  openLoading.value = false;
  console.log("open sse");
}
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({
    // 将它换成你的地址
    url: "",
    headers: {
      authorization: "",
    },
    body: {
      "messages":[
        { "role":"user", "content": "你好！" }
      ],
      "stream":true,
      "model":"deepseek-chat",
      "temperature":1,
      "presence_penalty":0,
      "frequency_penalty":0,
      "top_p":1
    },
  })
}
const stop = () => {
  chatSSEClientRef.value.stopChat()
  console.log("stop");
}
</script>

温馨提示

请仔细阅读示例代码。

如果你的程序有问题请先下载我提供的示例项目调试！

本插件只是一个单组件，组件封装了renderjs和@microsoft/fetch-event-source，必须通过本组件这个中间层来操作。

如果想了解原理请看我掘金的文章： 点击前往

常见问题

ios报错：TypeError: Load failed

后端接口处理一下跨域即可解决。