连接SSE

<script setup>
import { ref,onMounted,onUnmounted } from 'vue';
const sse = ref()
const reconnectAttempts = ref(0)
const timer = ref()
onMounted(()=>{
initSSE();
})
onUnmounted(() => {
if (sse.value) {
sse.value.close();
}
// 清除定时器
clearTimeout(timer.value);
});
const initSSE = () => {
sse.value = new EventSource(`http://192.168.16.18:8888/sse/subscribe?userId=1`);
sse.value.onopen = function (e) {
console.log(e, "连接成功");
reconnectAttempts.value = 0; // 重置重连次数
};
sse.value.onmessage = (event) => {
console.log(event.data)
}
sse.value.onerror = (error) => {
console.error("SSE 连接出错：", error);
sse.value.close();
sse.value = null;
// 自动重连逻辑
reconnectAttempts.value++;
const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts.value)); // 计算重连延迟，最大延迟为30秒
console.log(`将在 ${reconnectDelay} 毫秒后尝试重连...`);
// 等待一定时间后重连
setTimeout(() => {
if (!sse.value) {
console.log("尝试重连 SSE...");
initSSE(); // 递归调用重连
}
}, reconnectDelay);
}
}

返回值加入打字机效果

<script>
import { ref,onMounted,onUnmounted } from 'vue';
const sse = ref()
const reconnectAttempts = ref(0)
const contentList = ref([])//对话列表
const fullText = ref("")
const timer = ref()
onMounted(()=>{
initSSE();
})
onUnmounted(() => {
if (sse.value) {
sse.value.close();
}
// 清除定时器
clearTimeout(timer.value);
});
// 打字机效果的方法
const typeWriterEffect = () => {
if (fullText.value.length > 0) {
contentList.value[contentList.value.length - 1].content += fullText.value[0];
fullText.value = fullText.value.slice(1);
// 设置打字速度（例如每 100 毫秒显示一个字符）
timer.value = setTimeout(typeWriterEffect, 100);
if (fullText.value == "") {
//打字机效果结束后关闭加载效果，这里可以自由发挥
contentList.value[contentList.value.length - 1].show = false
}
//滚动到底部的距离
scrollToBottom();
}
};
const initSSE = () => {
sse.value = new EventSource(`http://192.168.16.18:8888/sse/subscribe?userId=1`);
sse.value.onopen = function (e) {
console.log(e, "连接成功");
reconnectAttempts.value = 0; // 重置重连次数
};
sse.value.onmessage = (event) => {
console.log(event.data)
fullText.value += event.data;
// 开始打字机效果
typeWriterEffect();
}
sse.value.onerror = (error) => {
console.error("SSE 连接出错：", error);
sse.value.close();
sse.value = null;
// 自动重连逻辑
reconnectAttempts.value++;
const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts.value)); // 计算重连延迟，最大延迟为30秒
console.log(`将在 ${reconnectDelay} 毫秒后尝试重连...`);
// 等待一定时间后重连
setTimeout(() => {
if (!sse.value) {
console.log("尝试重连 SSE...");
initSSE(); // 递归调用重连
}
}, reconnectDelay);
}
}
</script>

这时候根据SSE发送的数据流界面已经完成了，样式还需要优化（现在是纯文字的界面），下一章介绍样式的优化，展示的代码编辑器样式优化。