Vue3实现SSE连接的实现示例
更新时间：2025年09月04日 09:38:15 作者：自信的飞
SSE是一种允许服务器向浏览器推送事件的技术,与WebSocket不同,SSE 是单向的,本文就来介绍了Vue3实现SSE连接的实现示例,具有一定的参考价值,感兴趣都可以了解一下
在现代 web 开发中，Server-Sent Events (SSE) 是一种轻量级的技术，允许服务器通过 HTTP 持久连接向客户端推送实时更新。在本文中，我们将探讨如何在 Vue 3 应用中实现 SSE 连接，并处理接收到的消息。
什么是 SSE？
SSE 是一种允许服务器向浏览器推送事件的技术。与 WebSocket 不同，SSE 是单向的：服务器可以向客户端发送数据，而客户端不能直接向服务器发送数据。SSE 适用于需要实时更新的应用，比如聊天应用、通知系统和实时数据监控。
核心代码示例：
let retryCount = 0;
const maxRetries = 5; // 最大重试次数
const maxRetryDelay = 30000; // 最大重连时间，30秒
// 当前用户身份
const username = ref("");
// 初始化 SSE 连接
let eventSource: EventSource;
const initializeSSE = () => {
// 连接SSE
// 定义SSE链接参数
let url =
import.meta.env.VITE_BASE_API +
"/notification/socket_connection?username=" +
encodeURIComponent(username.value);
// 监听连接打开事件
eventSource = new EventSource(url);
eventSource.onopen = () => {
console.log("建立 SSE 连接成功");
};
// 监听消息事件
eventSource.onmessage = event => {
// 收到消息
chunk.value = JSON.parse(event.data);
console.log("收到的类型：", chunk.value.notice_type, 222);
// 根据 notice_type 处理不同的通知类型
switch (chunk.value.notice_type) {
case 0:
userThumNotification();
break;
case 1:
userStarNotification();
break;
case 2:
userComNotification();
break;
case 3:
systemNotice();
break;
case 4:
managerNotice();
break;
case 5:
// 暂时搁置,用其他方法代替
if (storedRole.value !== "user") {
reportEmail();
}
break;
default:
console.warn("未知通知类型：", chunk.value.notice_type);
}
showNotify();
};
// 监听错误事件
eventSource.onerror = () => {
console.error("SSE 连接发生错误，尝试重连...");
eventSource.close(); // 关闭当前连接
handleReconnect(); // 尝试重连
};
};
const handleReconnect = () => {
if (username.value !== "") {
console.log("连接已关闭, 尝试重新连接");
if (retryCount < maxRetries) {
retryCount++;
const retryDelay = Math.min(
1000 * Math.pow(2, retryCount),
maxRetryDelay
); // 计算重连延迟
setTimeout(initializeSSE, retryDelay);
} else {
showToast("网络连接不稳定，请检查网络或重新登录。");
console.log("已达到最大重试次数，停止重连。");
}
}
};
举例:全局状态管理消息总数
假设我们有三种通知类型:
点赞、评论、收藏
在userStore中进行全局状态管理,动态更新消息数量:
import { defineStore } from "pinia";
import { ref, computed } from "vue";
import { getManagerNotification } from "@/api/user";
import { getreportEmail } from "@/api/user";
import { getSystemNotification } from "@/api/user";
import {
getUserThumNotification,
getUserComNotification,
getUserStarNotification
} from "@/api/user";
import { showToast } from "vant";
// import { showNotify } from "vant";
//用户信息管理
export const useInformation = defineStore(
"notication",
() => {
let retryCount = 0;
const maxRetries = 5; // 最大重试次数
const maxRetryDelay = 30000; // 最大重连时间，30秒
// 是否显示SSE弹框
const noticeShow = ref(false);
// 接收到的SSE消息
const chunk = ref();
// 当前用户身份
const username = ref("");
const storedRole = ref("");
// 系统最新一条通知
const systemData = ref({});
// 管理员最新一条通知
const managerData = ref({});
// 用户未读消息
const thumb = ref(0);
const comment = ref(0);
const star = ref(0);
// 管理员未读消息数
const manager_count = ref(0);
// 系统未读消息数
const system_count = ref(0);
// 邮箱未读消息数
const email_count = ref(0);
// 互动通知
// 默认活跃的tab栏
const activeTab = ref(0);
// 总数
// 使用计算属性动态获取 total
const total = computed(() => {
return (
thumb.value +
comment.value +
star.value +
manager_count.value +
system_count.value
);
});
// 通用的获取未读通知数量的函数
const fetchNotificationCount = async (fetchFunction, refData, refCount) => {
try {
const res = await fetchFunction({ page: 1, limit: 1 });
if (refData != null) {
refData.value = res.data;
}
refCount.value = res.data.unread_count;
} catch (error) {
console.error("获取通知时发生错误：", error);
}
};
// 获取系统消息
const systemNotice = () => {
fetchNotificationCount(getSystemNotification, systemData, system_count);
console.log(system_count.value);
};
// 获取管理员消息
const managerNotice = () => {
fetchNotificationCount(
getManagerNotification,
managerData,
manager_count
);
};
// 获取点赞通知的未读消息数量
const userThumNotification = () => {
fetchNotificationCount(getUserThumNotification, null, thumb);
};
// 获取评论通知的未读消息数量
const userComNotification = () => {
fetchNotificationCount(getUserComNotification, null, comment);
};
// 获取收藏通知的未读消息数量
const userStarNotification = () => {
fetchNotificationCount(getUserStarNotification, null, star);
};
// 获取举报邮箱消息
const reportEmail = async () => {
fetchNotificationCount(getreportEmail, null, email_count);
};
// 获取页面消息
const userNotice = async () => {
await Promise.all([
userThumNotification(),
userComNotification(),
userStarNotification()
]);
};
// 初始化函数
const initNotifications = () => {
console.log(username, "哈哈哈红红火火恍恍惚惚");
systemNotice();
managerNotice();
userNotice();
if (storedRole.value !== "user") {
reportEmail();
}
// 打印 total，确保它是最新的
console.log("Total after initialization:", total.value);
};
const showNotify = () => {
noticeShow.value = true;
setTimeout(() => {
noticeShow.value = false;
}, 3000);
};
// 初始化 SSE 连接
let eventSource: EventSource;
const initializeSSE = () => {
// 连接SSE
// 定义SSE链接参数
let url =
import.meta.env.VITE_BASE_API +
"/notification/socket_connection?username=" +
encodeURIComponent(username.value);
// 监听连接打开事件
eventSource = new EventSource(url);
eventSource.onopen = () => {
console.log("建立 SSE 连接成功");
};
// 监听消息事件
eventSource.onmessage = event => {
// 收到消息
chunk.value = JSON.parse(event.data);
console.log("收到的类型：", chunk.value.notice_type, 222);
// 根据 notice_type 处理不同的通知类型
switch (chunk.value.notice_type) {
case 0:
userThumNotification();
break;
case 1:
userStarNotification();
break;
case 2:
userComNotification();
break;
case 3:
systemNotice();
break;
case 4:
managerNotice();
break;
case 5:
// 暂时搁置,用其他方法代替
if (storedRole.value !== "user") {
reportEmail();
}
break;
default:
console.warn("未知通知类型：", chunk.value.notice_type);
}
showNotify();
};
// 监听错误事件
eventSource.onerror = () => {
console.error("SSE 连接发生错误，尝试重连...");
eventSource.close(); // 关闭当前连接
handleReconnect(); // 尝试重连
};
};
const handleReconnect = () => {
if (username.value !== "") {
console.log("连接已关闭, 尝试重新连接");
if (retryCount < maxRetries) {
retryCount++;
const retryDelay = Math.min(
1000 * Math.pow(2, retryCount),
maxRetryDelay
); // 计算重连延迟
setTimeout(initializeSSE, retryDelay);
} else {
showToast("网络连接不稳定，请检查网络或重新登录。");
console.log("已达到最大重试次数，停止重连。");
}
}
};
// 关闭 SSE 连接
const closeConnection = () => {
eventSource.close();
console.log("SSE 连接已手动关闭");
};
// 重置
const removeNotification = () => {
systemData.value = {};
managerData.value = {};
thumb.value = 0;
star.value = 0;
manager_count.value = 0;
system_count.value = 0;
email_count.value = 0;
activeTab.value = 0;
};
return {
username,
storedRole,
systemData,
managerData,
manager_count,
system_count,
email_count,
thumb,
comment,
star,
total,
activeTab,
noticeShow,
chunk,
systemNotice,
managerNotice,
userThumNotification,
userComNotification,
userStarNotification,
reportEmail,
closeConnection,
removeNotification,
initializeSSE,
initNotifications
};
},
{
persist: true
}
);
到此这篇关于Vue3实现SSE连接的实现示例的文章就介绍到这了,更多相关Vue3 SSE连接内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本文主要介绍了vue中传参params和data的区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue3.x的版本中build后dist文件中出现legacy的js文件问题
这篇文章主要介绍了Vue3.x的版本中build后dist文件中出现legacy的js文件问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了纯JS+Vue和canvas实现一个仪表盘方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue route介绍、基本使用、嵌套路由,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了微信小程序用户盒子、宫格列表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue将data恢复到初始状态 && 重新渲染组件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
Vue3 ＜script setup lang=“ts“＞ 的基本使用
<script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖，本文主要讲解<script setup> 与 TypeScript 的基本使用，感兴趣的朋友跟随小编一起看看吧2022-12-12
本文主要介绍了vue处理get/post的http请求的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论