|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Title</title>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
eventSource: null,
|
|
|
stateData: null,
|
|
|
list: [],
|
|
|
connectStatus: false,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
},
|
|
|
methods: {
|
|
|
startConnectHandler() {
|
|
|
let url = "http://127.0.0.1:3000/sse/ai/question/push?title=请你介绍一下SSE？";
|
|
|
|
|
|
// 表示与服务器建立连接的 URL。必填。
|
|
|
const sseObj = new EventSource(url);
|
|
|
this.eventSource = sseObj;
|
|
|
console.log('状态', sseObj, this.eventSource)
|
|
|
|
|
|
if (sseObj.readyState === 0) {
|
|
|
this.connectStatus = true
|
|
|
//sseObj.readyState === EventSource.CONNECTING 也可以判断正在连接服务器
|
|
|
console.log('0:"正在连接服务器...');
|
|
|
}
|
|
|
|
|
|
sseObj.onopen = (e) => {
|
|
|
if (sseObj.readyState === 1) {
|
|
|
// sseObj.readyState === EventSource.OPEN 也可以判断连接成功
|
|
|
let data = `SSE 连接成功，状态${sseObj.readyState}, 对象${e}`;
|
|
|
this.stateData = data;
|
|
|
console.log("1:SSE 连接成功");
|
|
|
}
|
|
|
};
|
|
|
// 接收消息，这个事件需要和后端保持一致哈
|
|
|
// 后端的事件名称：sseEvent
|
|
|
sseObj.addEventListener("sseEvent", (event) => {
|
|
|
const data = JSON.parse(event.data);
|
|
|
//如果最后推送的是 'contDnd',说明推送已经完了。此时关闭连接
|
|
|
if (data.content === 'contDnd') {
|
|
|
this.endConnectHandler()
|
|
|
} else {
|
|
|
this.list.push(data.content);
|
|
|
}
|
|
|
console.log("这次消息推送的内容event:", data.content);
|
|
|
});
|
|
|
sseObj.onerror = (e) => {
|
|
|
console.log("error", e);
|
|
|
};
|
|
|
},
|
|
|
endConnectHandler() {
|
|
|
if (this.eventSource) {
|
|
|
this.connectStatus = false
|
|
|
this.eventSource.close();
|
|
|
if (this.eventSource.readyState === 2) {
|
|
|
// sseObj.readyState === EventSource.CLOSED 也可以判断连接已经关闭
|
|
|
console.log('2连接已经关闭。', this.eventSource, this.eventSource.readyState);
|
|
|
}
|
|
|
console.log("end");
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.chat-box {
|
|
|
padding-left: 20px;
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
margin-right: 20px;
|
|
|
padding: 6px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<template>
|
|
|
<div class="chat-box">
|
|
|
<button @click="startConnectHandler" :disabled="connectStatus">建立连接</button>
|
|
|
<button @click="endConnectHandler">关闭连接</button>
|
|
|
<h2>
|
|
|
<p>连接状态{{ this.eventSource && this.eventSource.readyState }}</p>
|
|
|
</h2>
|
|
|
<h2>下面就是返回来的数据</h2>
|
|
|
<div>
|
|
|
<div v-for="(item, index) in list" :key="index">
|
|
|
{{ item }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</body>
|
|
|
</html> |