参考网址 https://www.cnblogs.com/HTLucky/p/17326459.html
新建文件 httpsseClient.js
// 'use strict';
import { fetchEventSource } from "@microsoft/fetch-event-source";
import { reactive } from "vue";
let eventSource = null;
const sseClientMsg = reactive({
data: "",
});
const createSSClient = (callback = null) => {
// createSSClientGet();
createSSClientPost(callback);
};
const createSSClientGet = (callback = null) => {
if (window.EventSource) {
// 根据环境的不同，变更url
const url = "http://139.155.59.51:48080";
const curMessage = "";
eventSource = new EventSource(`${url}/see_test`, { msg: curMessage });
eventSource.onmessage = (e) => {
const message = JSON.parse(e.data);
//messages.push(message);
console.log("已接受到消息:", e.data);
};
eventSource.onerror = (event) => {
that.eventSource.close();
};
//处理服务器响应报文中的自定义事件
eventSource.addEventListener("close", function (e) {
that.eventSource.close();
});
} else {
console.log("你的浏览器不支持SSE~");
}
};
// await post方式
const createSSClientPost = (callback = null) => {
fetchEventSource("http://139.155.59.51:48080/sse_test", {
method: "POST",
headers: {
"Content-Type": "text/event-stream",
},
openWhenHidden: true,
body: JSON.stringify({
// 后端要的数据
prompt: "",
history: [],
max_token: 2048,
temperature: 0,
top_p: 0.9,
}),
async onmessage(msg) {
const { data } = msg;
if (data && JSON.parse(data)) {
if (callback) {
callback(data);
}
}
},
onerror(err) {
throw err;
},
});
};
export { createSSClient };
vue中调用方式
import { createSSClient } from "./js/httpsseClient.js";
const createSSClientOper = () => {
sseClent.reciveData = "";
createSSClient((msg) => {
const result = JSON.parse(msg);
const contentMsg = result.message; // 返回的数据赋值到页面
sseClent.reciveData = `${sseClent.reciveData}<br/> ${contentMsg}`;
const content = document.getElementById("content");
// 页面被文字铺满后实现滚动效果
content.scrollTop = content.scrollHeight;
});
};
