|
|
@@ -1,16 +1,246 @@
|
|
|
-<template>
|
|
|
- <!-- 登录页面 -->
|
|
|
+<!-- <template>
|
|
|
<div class="login">
|
|
|
- <h1>登录</h1>
|
|
|
+ <h1></h1>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { setToken } from '@/store/useCookieStore'
|
|
|
+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;
|
|
|
+}
|
|
|
|
|
|
-//存储token
|
|
|
-let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJwaHBlcjY2Ni9qd3QiLCJ1aWQiOjY1LCJ1c2VyX25hbWUiOiIxMSIsInJvbGVfaWQiOjAsIm1vYmlsZSI6IjE1ODY2NjY2NjY1IiwiZW1haWwiOiIxMjNlQHFxLmNvbSIsInJvbmdfdG9rZW4iOiIiLCJsZXZlbF9pZCI6MSwiand0X3NjZW5lIjoiZGVmYXVsdCIsImp0aSI6ImRlZmF1bHRfNjcxNjBlYmMxOTJlZTUuODQyNDQzODUiLCJpYXQiOjE3Mjk0OTg4MTIsIm5iZiI6MTcyOTQ5ODgxMiwiZXhwIjoxNzMyMDkwODEyfQ.Xu_TpUc75iE4h7iPRe5J_gQ8_rRPBHvFINCQR2pEuKk"
|
|
|
-setToken(token)
|
|
|
+button {
|
|
|
+ margin: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #007bff;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
|
|
|
-</script>
|
|
|
+button:hover {
|
|
|
+ background-color: #0056b3;
|
|
|
+}
|
|
|
+</style>
|
Jing