写一个SSE长连接的实例

当然可以！下面是一个使用 Vue.js 来实现 Server-Sent Events (SSE) 长连接的示例代码：

首先，你需要在 Vue 组件中引入 EventSource 对象，它是用于建立 SSE 连接的原生浏览器对象。

<template>
  <div>
    <div v-if="connected">Connected to SSE server!</div>
    <div v-else>Not connected to SSE server.</div>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      connected: false,
      messages: []
    };
  },
  mounted() {
    // 创建 SSE 连接
    const eventSource = new EventSource('http://your-sse-server-url');

    // 监听连接建立事件
    eventSource.onopen = () => {
      this.connected = true;
    };

    // 监听消息事件
    eventSource.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    };

    // 监听连接关闭事件
    eventSource.onclose = () => {
      this.connected = false;
    };
  }
};
</script>

在上面的示例代码中，我们在 `mounted` 钩子函数中创建了一个 EventSource 对象，并通过指定 SSE 服务器的 URL 来建立连接。然后，我们分别监听了连接建立、消息接收和连接关闭等事件，并根据事件的触发来更新相应的数据。

你可以根据自己的需要，修改上述代码以适应你的项目要求。希望能对你有所帮助！