首页 新闻 会员 周边 捐助

webflux接口前端接收问题

0
悬赏园豆:100 [待解决问题] 浏览: 194次

有没有懂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>

流光之中的主页 流光之中 | 初学一级 | 园豆:104
提问于:2024-08-27 09:57
< > 人人可用的开源BI工具
分享
所有回答(2)
0

来自AI:

  1. 确保后端接口的URL是正确的。你的后端接口使用/webflux路径,在前端代码中你使用了/test/webflux路径。请确保这两个路径是匹配的。
  2. 检查浏览器控制台是否有错误信息。在前端代码中,你有一个onerror事件处理程序,用于处理EventSource失败。如果存在任何连接或其他错误,它将在控制台中显示错误信息。通过查看控制台输出,你可以获得更多的调试信息。
  3. 检查网络请求是否成功。在浏览器的网络面板中,你可以查看到对/webflux接口的网络请求。确认请求是否成功,并查看响应是否正确。如果请求失败或响应不正确,可能是后端接口的问题。
  4. 确保浏览器支持Server-Sent Events(SSE)。大多数现代浏览器都支持SSE,但确保你的浏览器是最新版本,并且支持该特性。你可以在浏览器的兼容性文档中查找相关信息。
Technologyforgood | 园豆:7872 (大侠五级) | 2024-08-28 07:55
0

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>
www378660084 | 园豆:1342 (小虾三级) | 2024-08-28 17:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top