** egg代码**
// controller/server.ts文件中
'use strict';
const Controller = require('egg').Controller;
const { PassThrough } = require("stream");
class server extends Controller {
async sse(ctx){
let response = {
code: 200,
data: {
id: 1,
name: `今天你笑了吗?`
}
};
ctx.set({
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive"
});
let stream = new PassThrough();
ctx.status = 200;
//模拟持续服务端传值给客户端
const interval = setInterval(() => {
let { id } = response.data;
if (id % 2 === 0) {
stream.write("event: customEvents\n");
}
stream.write(`id: ${id}\n`);
stream.write(`data: ${JSON.stringify(response)}\n`);
stream.write("retry: 1000\n");
stream.write("\n\n");
response.data.id++;
}, 2000);
ctx.body = stream;
//流关闭,客户端主动断开连接
stream.on("close", () => {
console.log("连接断开");
clearInterval(interval);
});
}
}
module.exports = server;
// router.ts文件中
module.exports = app => {
const { router, controller } = app;
router.get('/sse',controller.server.sse)
}
vue代码
<template>
<div>SSE</div>
<div>{{id}}遍{{name}}</div>
<el-button @click="close">关闭</el-button>
</template>
<script setup lang="ts">
import { ref} from 'vue'
let id=ref<number>()
let name=ref<string>()
const event = new EventSource('http://127.0.0.1:7001/sse');
event.addEventListener('open', e => {
console.log('open:', e);
});
event.addEventListener('message', e => {
const {data}=JSON.parse(e.data)
id.value=data.id
name.value=data.name
});
const close=()=>{
event.close();
}
</script>
<style scoped lang="less">
</style>