有没有懂SSE的大佬
我有一个webflux接口,后端正常运行,前端使用eventSource接收,打断点eventSource.onmessage无法进入,
后端代码
@GetMapping(value = "/webflux", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> streamEvents() {
return Flux.interval(Duration.ofSeconds(1))
.map(sequence -> "data: Message " + sequence + "\n\n");
}
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EventSource Stream Example</title>
</head>
<body>
<h1>Real-time Updates</h1>
<div id="messages"></div>
<script>
// 创建 EventSource 实例,连接到 WebFlux 接口
const eventSource = new EventSource('http://127.0.0.1:8090/test/webflux');
// 当接收到消息时,将其渲染到页面
eventSource.onmessage = function(event) {
const messageElement = document.createElement('div');
messageElement.textContent = event.data;
document.getElementById('messages').appendChild(messageElement);
};
// 错误处理
eventSource.onerror = function(event) {
console.error("EventSource failed: ", event);
// 在页面上显示错误消息
const errorElement = document.createElement('div');
errorElement.style.color = 'red';
errorElement.textContent = 'An error occurred, check the console for details.';
document.getElementById('messages').appendChild(errorElement);
};
</script>
</body>
</html>
来自AI:
/webflux
路径,在前端代码中你使用了/test/webflux
路径。请确保这两个路径是匹配的。onerror
事件处理程序,用于处理EventSource失败。如果存在任何连接或其他错误,它将在控制台中显示错误信息。通过查看控制台输出,你可以获得更多的调试信息。/webflux
接口的网络请求。确认请求是否成功,并查看响应是否正确。如果请求失败或响应不正确,可能是后端接口的问题。webflux不熟悉,不过你这个前端代码没啥问题.要不你弄个node服务端,对比下看看浏览器的终端和网络信息有啥区别
const express = require('express');
const app = express();
const path = require('path');
var sequence = 0;
app.use(express.static(path.join(__dirname, 'pages')));
app.get('/webflux', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
setInterval(() => {
res.write(`data: ${JSON.stringify({ message: 'Hello, World!' })}\n\n`);
res.write(`data: Message ${sequence}\n\n`);
sequence += 1;
}, 1000);
});
app.listen(8090, () => {
console.log('Server listening on port 8090');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EventSource Stream Example</title>
</head>
<body>
<h1>Real-time Updates</h1>
<div id="messages"></div>
<script>
// 创建 EventSource 实例,连接到 WebFlux 接口
const eventSource = new EventSource('http://127.0.0.1:8090/webflux');
// 当接收到消息时,将其渲染到页面
eventSource.onmessage = function(event) {
const messageElement = document.createElement('div');
messageElement.textContent = event.data;
document.getElementById('messages').appendChild(messageElement);
};
// 错误处理
eventSource.onerror = function(event) {
console.error("EventSource failed: ", event);
// 在页面上显示错误消息
const errorElement = document.createElement('div');
errorElement.style.color = 'red';
errorElement.textContent = 'An error occurred, check the console for details.';
document.getElementById('messages').appendChild(errorElement);
};
</script>
</body>
</html>