Server-Sent Events (SSE) 服务端单项实时给前端推送消息

 Server-Sent Events (SSE) 是一种允许服务器向浏览器推送更新的技术。使用 SSE，你可以设置一个持久连接，服务器可以通过这个连接向客户端发送数据更新，而不需要客户端不断地轮询服务器。

<template><div><!-- 展示从服务器收到的消息 --><ul><li v-for="(message, index) in messages" :key="index">{{ message }}</li></ul></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';const messages = ref([]);
let eventSource = null;const initSse = () => {if (typeof(EventSource) !== "undefined") {// 假设你的服务器端点为 /sseeventSource = new EventSource("/sse");eventSource.onmessage = (event) => {const newMessage = JSON.parse(event.data);messages.value.push(newMessage);};eventSource.onerror = () => {console.log("EventSource failed.");eventSource.close();};} else {console.log("Your browser does not support Server-Sent Events.");}
};onMounted(() => {initSse();
});onBeforeUnmount(() => {if (eventSource) {eventSource.close();}
});
</script>