在本文中，我将介绍如何从Angular应用程序中订阅server sent events。
服务器发送的事件允许服务器通过向他们推动消息将数据发送给客户端。
从运行的Angular应用程序开始，然后假设我们使用mercure作为后端，让我们添加所有需要订阅SSE主题的所有内容。
创建模型
export interface User {
name: string;
id: string;
}
export interface Topic {
getTopic(user: User): string;
}
export class PaymentTopic implements Topic{
getTopic(user: User): string {
return 'https://topics.domain.com/' + user.id + '/payments';
}
}
上面我们可以看到三个模型：
- 接口用户：保留用户数据
- 接口主题：声明 gettopic 方法
- 类Paymaintic ：实现主题接口（表示要订阅的主题）。
PaymandTopic返回带有用户ID的主题URL。它将允许我们仅订阅用户的付款。
创建服务以订阅主题
export interface MessageData {
status: string;
message: string;
}
export class SseService {
constructor() { }
createEventSource(user: User, topic: Topic): Observable<MessageData> {
const topicUri = topic.getTopic(user);
const eventSource = new EventSource(environment.sse_url + '?topic=' + topicUri);
return new Observable(observer => {
eventSource.onmessage = event => {
const messageData: MessageData = JSON.parse(event.data);
observer.next(messageData);
};
});
}
}
方法 createEventsource 接收用户和一个主题（任何实现主题接口的类），并使用EventSource订阅。它将返回可观察到的可观察的，该可观察不断收听onMessage Eventsource事件并通知收到的消息给订阅的元素。
创建组件并使用服务
export class SseComponent implements OnInit {
constructor(private sseService: SseService) { }
ngOnInit(): void {
const user: User = {
id: '65PRG6RD0C87KAQV8RS8H5HHBR',
name: 'Jose'
};
const topic = new PaymentTopic();
this.sseService.createEventSource(user, topic).subscribe(
(e: MessageData) => {
console.log('Message received: ' + e.message);
}
);
}
}
正如我们所看到的，SSECOMPONENT注入SSESERVICE，并使用它来订阅付款主题。当服务器将消息推向主题时，它将在浏览器控制台上记录。