app/pages/chat/components/eventSource.vue

<!--
 * @Author: HTangtang 1539880046@qq.com
 * @Date: 2025-01-21 14:41:20
 * @LastEditors: HTangtang 1539880046@qq.com
 * @LastEditTime: 2025-03-06 17:49:40
 * @FilePath: \dam_app_project\pages\smartAi\components\eventSource.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view id="event-source" :props="mergeProps" :change:props="eventSource.renderPropsChange" v-show="false">
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isSend: false
    }
  },
  computed: {
    // 合并传入renderjs的数据
    mergeProps({ url, options, isSend }) {
      return {
        url,
        options,
        isSend
      };
    },
  },
  methods: {
    // 发送
    send() {
      this.isSend = true;
      this.$nextTick(() => {
        this.isSend = false;
      });
    },
    // 处理renderjs发回的数据
    emits(e) {
      this.$emit("callback", { ...e });
    },
  },
};
</script>

<script module="eventSource" lang="renderjs">
import { fetchEventSource } from "@microsoft/fetch-event-source";
export default {
	methods: {
		// 传入数据变更
    renderPropsChange(nVal) {
      const { url, isSend } = nVal || {};
      if (!isSend) return;
      if (!url) return this.handleEmitData({ type: "tip", msg: "URL cannot be empty." });
      this.$nextTick(() => {
        this.handleSSE(nVal);
      });
    },
		// 发送数据到service层
		handleEmitData(data = {}) {
			this.$ownerInstance.callMethod('emits', data);
		},
    // 处理SSE
		 handleSSE(opts = {}) {
      const that = this;
      // 检查浏览器是否支持SSE
			if (!('EventSource' in window)) return this.handleEmitData({ type: "tip", msg: "The current device does not support EventSource." });
      const { url, options = {} } = opts || {};
      // console.log("options", JSON.stringify(options));
      fetchEventSource(url, {
        ...options,
       async onopen() {
          that.handleEmitData({ type: "onopen", msg: "EventSource onopen." });
        },
        onmessage(res) {
          //  console.log(res,'resres')
          that.handleEmitData({ type: "onmessage", msg: "EventSource onmessage.", data: res.data });
        },
        onclose() {
          that.handleEmitData({ type: "onclose", msg: "EventSource onclose." });
        },
        onerror(error) {
          that.handleEmitData({ type: "onerror", msg: "EventSource onerror.", data: JSON.stringify(error) });
        }
      });
		}
	}
}
</script>