要解决这个问题,首先需要确保服务器发送事件(SSE)的代码正确。以下是一个简单的服务器端代码示例,使用Node.js和Express框架:
const express = require('express');
const app = express();
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();
// 假设你有一个事件源,用于发送事件和数据
const eventSource = createEventSource();
// 监听事件源的事件,并发送给客户端
eventSource.on('event', (event) => {
res.write(`event: ${event.name}\n`);
res.write(`data: ${JSON.stringify(event.data)}\n\n`);
});
// 当客户端关闭连接时,关闭事件源
req.on('close', () => {
eventSource.close();
});
});
// 创建一个事件源的示例函数
function createEventSource() {
const eventEmitter = new EventEmitter();
// 模拟事件触发
setTimeout(() => {
eventEmitter.emit('event', { name: 'eventName', data: 'eventData' });
}, 1000);
return eventEmitter;
}
app.listen(3000, () => {
console.log('Server started on port 3000');
});
接下来,需要在Angular 7中设置客户端代码以接收服务器发送的事件和数据。以下是一个简单的Angular组件示例:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-event-listener',
template: `
Event Listener
- {{ event }}
`
})
export class EventListenerComponent implements OnInit {
events: string[] = [];
ngOnInit() {
const eventSource = new EventSource('/events');
eventSource.addEventListener('eventName', (event: any) => {
this.events.push(event.data);
});
}
}
在上面的示例中,它创建了一个EventSource
对象来监听服务器发送的事件。当接收到名为"eventName"的事件时,它将事件数据添加到events
数组中,然后在模板中显示出来。
确保在你的Angular项目中导入了EventSource
类,可以使用以下导入语句:
import { EventSource } from 'eventsource';
最后,将EventListenerComponent
添加到你的Angular应用的模块中,以便能够在页面上显示出来。
这就是如何在Angular 7中接收服务器发送的事件和数据的解决方法。请根据你的实际需求进行适当的修改和调整。