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") {
    // 假设你的服务器端点为 /sse
    eventSource = 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>