从 SSE Spring Boot 后端接收数据

Question

我有我的 Spring Boot Webflux 控制器的下一个代码

@GetMapping(path = "/importer-sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<ServerSentEvent<String>> streamEvents() {
    return Flux.interval(Duration.ofSeconds(5))
            .map(sequence -> ServerSentEvent.<String>builder()
                    .id(String.valueOf(sequence))
                    .event("periodic-event")
                    .data("SSE - " + LocalTime.now().toString())
                    .build());
}

当我到达这个端点时，数据正确显示，每 5 秒 1 获取当前日期 但我想从 FE 听这个 SSE 并显示数据 这是 Vue js 3 代码

`const app = {
    data() {
        return {
            data: '',
        }
    },
    methods: {
        mounted() {
            const source = new EventSource("http://localhost:8080/importer-sse");
            source.onmessage = (msg) => {
                this.$set(this, 'data', msg.data);
            }
            source.onmessage = (msg) => {
                console.log(msg.data);
                this.$set(this, 'data', msg.data);
            }
        }
    },
    mounted() {
        this.mounted();
    }
};
Vue.createApp(app).mount('#app');

const source = new EventSource("http://localhost:8080/importer-sse");
source.onmessage = function(msg) {
    console.log(msg)
}
source.onopen = function(msg) {
    console.log(msg)
}`

我在 div 中显示只写

{{data}}

，id

app

我的意思是，Vue 在那里不是必需的，但仍然如此。 屏幕和控制台中也没有任何显示。

因为代码中有我试图添加一些控制台消息，但正如我所说，那里什么也没有。 但我尝试添加这样的代码：

source.onopen = function(msg) { console.log(msg) }

还有一条正确的消息。

我尝试使用库

vue-sse

，但我在导入它时遇到了一些麻烦。 什么是问题？非常感谢任何帮助。