uni-app request请求如何接收text/event-stream数据类型

发布于 1周前 作者 caililin 来自 Uni-App

uni-app request请求如何接收text/event-stream数据类型

请求的content-type为text/event-stream,即SSE

请求的content-type为text/event-stream,即SSE,他有个好处是通过服务端持续向前端发送数据,而不是类似传统请求一次性把结果返回,数据量太大时一次性返回数据体验很差,用户要等待很久,sse可以一段段的传输过来,即时响应,数据传输完毕代表完成此次请求。我已经通过js的fetch请求实现了,但是uniapp不支持fetch,有会的大佬,能帮帮我吗?

13 回复

没有解决,哈哈哈

回复 1***@qq.com: 同文,无解吗老哥

app为啥不支持呢???.
…这…这…

不支持,小程序官方不准备支持了

同问,看来得用websocket

什么时候支持啊

可以支持二进制,看看后端能不能改个格式

可以支持二进制,看看后端能不能改个格式 这个具体如何处理 可以分享下

求分享,二进制也不响应

格式是分块获取的,其实还是一次性返回的

这个问题没有解决方案了吗,app要用

在uni-app中处理text/event-stream(Server-Sent Events, SSE)数据类型,你需要使用uni.request进行一些特殊的处理,因为uni-app的uni.request接口本身并不直接支持SSE。然而,你可以通过WebSocket或者原生的XMLHttpRequest来实现SSE功能。

由于WebSocket提供了双向通信的能力,通常用于需要实时数据更新的场景,但如果你特定需要SSE,可以通过原生的XMLHttpRequest来模拟。

以下是一个使用原生XMLHttpRequest在uni-app中接收text/event-stream数据的示例代码:

// 在页面的onLoad或者mounted生命周期中初始化SSE
onLoad() {
    this.initSSE();
},

methods: {
    initSSE() {
        if (typeof window !== 'undefined' && window.XMLHttpRequest) {
            const xhr = new XMLHttpRequest();
            const url = 'https://your-sse-endpoint'; // 替换为你的SSE服务地址

            xhr.open('GET', url, true);
            xhr.responseType = 'text';

            xhr.onreadystatechange = () => {
                if (xhr.readyState === 3) { // LOADING
                    let responseText = xhr.responseText;
                    const lines = responseText.split('\n');
                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i];
                        if (line) {
                            try {
                                const eventData = JSON.parse(line);
                                console.log('Received event:', eventData);
                                // 在这里处理你的事件数据
                            } catch (error) {
                                console.error('Error parsing SSE line:', line, error);
                            }
                        }
                    }
                } else if (xhr.readyState === 4) { // DONE
                    if (xhr.status !== 200) {
                        console.error('SSE connection closed with status:', xhr.status);
                    }
                    // 可以选择重新连接SSE
                    // this.initSSE();
                }
            };

            xhr.send();
        } else {
            console.error('SSE is not supported in this environment');
        }
    }
}

注意事项:

  1. 上述代码依赖于浏览器环境,因此仅在H5平台有效。如果你需要在小程序中使用SSE,你可能需要考虑使用WebSocket或者其他轮询机制。
  2. responseText包含了所有从服务器接收到的数据,你需要自己处理换行符分割数据行。
  3. SSE通常用于推送实时数据,如股票价格、新闻更新等。如果你的应用需要双向通信,WebSocket可能是更好的选择。
  4. 在生产环境中,记得处理网络错误和重连逻辑,以确保连接的稳定性。
回到顶部