实现SSE时遭遇onmessage类型错误，求解决方案

安全阿岳

2026-7-17

解决Angular中SSE EventSourcePolyfill的onmessage类型不兼容问题

问题根源

event-source-polyfill库内部定义了独立的MessageEvent接口，与浏览器全局的MessageEvent结构不一致，导致回调函数参数类型匹配失败。

解决方案

直接使用event-source-polyfill提供的MessageEvent类型，替换全局类型引用即可：

导入polyfill的MessageEvent类型
在代码顶部添加从event-source-polyfill导入MessageEvent的语句。
统一回调与Observable的泛型类型
将回调函数的参数类型、Observable的泛型都替换为polyfill的MessageEvent。

修改后的完整代码

import {Injectable} from "@angular/core";
import {Observable} from "rxjs";
import {AService} from "./a.service";
import {EventSourcePolyfill, MessageEvent} from "event-source-polyfill"; // 导入库的MessageEvent类型

@Injectable({
    providedIn: "root",
})
export class SseService {
    private eventSource!: EventSourcePolyfill | null;

    public constructor(private aService: AService) {}

    public getServerSentEvent(url: string): Observable<MessageEvent> {
        const token = this.aService.config.authorization;
        const headers = {Authorization: `Bearer ${token}`};

        return new Observable<MessageEvent>((observer) => {
            this.eventSource = new EventSourcePolyfill(url, {
                withCredentials: false,
                headers,
            });

            this.eventSource.onmessage = (event: MessageEvent): void => {
                observer.next(event);
            };

            this.eventSource.onerror = (error): void => {
                observer.error(error);
            };

            return () => {
                this.eventSource?.close();
            };
        });
    }

    public closeEventSource(): void {
        if (this.eventSource) {
            this.eventSource.close();
            this.eventSource = null;
        }
    }
}