sannongzixunwang_web/pages/login.vue

<!-- <template>
  <div class="login">
    <h1></h1>

  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
// import { EventSource } from 'eventsource'
import EventSource from 'eventsource';

// 创建 EventSource 实例，订阅事件流
// const eventSource = new EventSource('http://192.168.126.42/gap/nodes');
// const EventSource = require('eventsource');
// var EventSource = {};
// var myCustomVariable = {};
const eventSource = new EventSource('http://192.168.1.201:9501/collector/zhipu');


const express = require('express');
const app = express();

app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');

  // 这里可以编写逻辑来持续推送事件数据，例如
  const interval = setInterval(() => {
    res.write('data: Some data here\n\n');
  }, 1000);

  req.on('close', () => {
    clearInterval(interval);
    res.end();
  });

});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

onUnmounted(() => {
  eventSource.close();
});

// 页面加载时
onMounted(() => {
  // getTableData();
  // 创建 EventSource 实例，订阅事件流
  eventSource.onmessage = (event) => {

    console.log(event);

    // 处理收到的数据
    console.log(JSON.parse(event.data));
  };
  eventSource.onerror = (event) => {
    // 处理错误
  };
});

</script> -->


<!-- 
<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const messages = ref([]);

    const eventSource = axios.create({
      baseURL: 'http://192.168.1.201:9501',
      headers: { 'Content-Type': 'text/event-stream' }
    });

    const setupEventSource = () => {
      const source = new EventSource(eventSource.getUri({ path: '/collector/zhipu' }));

      source.onmessage = (event) => {
        const data = JSON.parse(event.data);
        messages.value.push(data.message);
      };

      source.onerror = (error) => {
        console.error(error);
      };
    };

    setupEventSource();

    return { messages };
  }
};
</script> -->



<!-- <template>
  <div>
    <button @click="startEventSource">开始接收事件</button>
    <button @click="stopEventSource">停止接收事件</button>
    <div v-for="event in events" :key="event.id">
      {{ event.data }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'EventSourceExample',
  data() {
    return {
      events: [],
      eventSource: null
    };
  },
  methods: {
    startEventSource() {
      if (!this.eventSource) {
        this.eventSource = new EventSource('http://192.168.1.201:9501/collector/zhipu');
        this.eventSource.onmessage = this.handleMessage;
        this.eventSource.onerror = this.handleError;
      }
    },
    stopEventSource() {
      if (this.eventSource) {
        this.eventSource.close();
        this.eventSource = null;
      }
    },
    handleMessage(event) {
      // 处理接收到的消息
      console.log('收到消息:', event.data);
      this.events.push({ id: this.events.length, data: event.data });
    },
    handleError(event) {
      // 处理错误
      console.error('EventSource 错误:', event);
      this.stopEventSource();
    }
  },
  beforeDestroy() {
    // 组件销毁前停止 EventSource
    this.stopEventSource();
  }
};
</script> -->

<template>
  <div>
    <h2>事件流数据</h2>
    <ul>
      <li v-for="(item, index) in dataStream" :key="index">{{ item }}</li>
    </ul>
    <button @click="startStream">启动事件流</button>
    <button @click="stopStream">停止事件流</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataStream: [], // 用于存储从事件流接收的数据
      eventSource: null, // 保存 EventSource 实例
    };
  },
  methods: {
    // 启动事件流
    startStream() {
      if (this.eventSource) {
        console.log("事件流已经启动！");
        return;
      }

      // 连接到 PHP SSE 后端接口
      // const apiUrl = "http://192.168.1.201:8989/";
      const apiUrl = "http://192.168.1.201:9501/stream";
      this.eventSource = new EventSource(apiUrl);

      // 监听普通消息
      this.eventSource.onmessage = (event) => {
        console.log(event);

        console.log("收到事件流数据:", event.data);
        this.dataStream.push(JSON.parse(event.data)); // 将数据存储到 dataStream 中
      };

      // 监听自定义事件（如关闭事件）
      this.eventSource.addEventListener("close", (event) => {
        console.log("事件流关闭:", event.data);
        this.stopStream(); // 停止事件流
      });

      // 监听错误事件
      this.eventSource.onerror = (error) => {
        console.error("事件流错误:", error);
        this.stopStream(); // 遇到错误时停止事件流
      };
    },

    // 停止事件流
    stopStream() {
      if (this.eventSource) {
        this.eventSource.close(); // 关闭事件流
        this.eventSource = null;
        console.log("事件流已停止");
      }
    },
  },
  beforeDestroy() {
    // 在组件销毁前关闭事件流
    this.stopStream();
  },
};
</script>

<style scoped>
h2 {
  color: #333;
}

button {
  margin: 5px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>