当前位置:首页 > H5 > 正文内容

微信小程序不支持EventSource的解决方案

高老师12个月前 (05-19)H5263

当我们使用微信小程序对接ai功能时一般都需要打字机效果,一般ai接口都是sse协议,但是微信小程序不支持,垃圾东西,阉割了h5标准功能。我们需要给微信小程序模拟支持下。代码如下:

类库如下:

class EventSource {
    constructor(url, retryTime = 0) {
        this.url = url;
        this.retryTime = retryTime;
        this.listeners = {};
        this.requestTask = null
        this.connect()
    }
 
    connect() {
        this.requestTask = wx.request({
            url: this.url,
            enableChunked: true,
            responseType: 'text',
            method: 'GET',
            timeout: 300e3,
            success: res => {
                this.emit('success', res)
                if (this.retryTime > 0) {
                    setTimeout(() => {
                        this.connect()
                    }, this.retryTime)
                }
            },
            fail: () => {
            }
        });
        this.requestTask.onHeadersReceived(res => {
            this.emit('open', res);
        })
        this.requestTask.onChunkReceived(res => this.handleChunk(res))
    }
 
    handleChunk(res) {
		console.log('ok');
        const arrayBuffer = res.data;
        const uint8Array = new Uint8Array(arrayBuffer);
        let data = uni.arrayBufferToBase64(uint8Array)
        data = new Buffer(data, 'base64')
        data = data.toString('utf8')
        const lines = data.split("\n\n")
        lines.forEach(line => {
            if (!line.trim()) {
                return
            }
            const [key, value] = line.trim().split(':');
            if (key === 'data') {
                const data = line.substring(5).trim();
                try {
                    const json = JSON.parse(data);
                    this.emit('message', {
                        data: json
                    })
                } catch (e) {
                    this.emit('error', 'Api.EventSource.ParseError:' + e)
                }
            } else {
                this.emit('error', 'Api.EventSource.ParseFail:' + line)
            }
        })
    }
 
    addEventListener(event, callback) {
        if (!this.listeners[event]) {
            this.listeners[event] = []
        }
        this.listeners[event].push(callback)
    }
 
    emit(event, data) {
        if (this.listeners[event]) {
            this.listeners[event].forEach(callback => {
                callback(data)
            });
        }
    }
 
    close() {
        if (this.requestTask) {
            this.requestTask.abort()
        }
    }
}

module.exports = EventSource;

调用方式参考例子:

const es = new EventSource('http://api.20230611.cn/api/question/aiExplanation?id=' + item.id)
es.addEventListener('open', res => {
	that.showAiExplanation = status;
});
es.addEventListener('message', (event) => {
	console.log('message');
});

虽然支持了微信小程序,但是uniapp是基于webview实现,webview中不支持EventSource,太折腾了所以放弃了sse作为多平台协议的支持,还是websocket支持比较多。

扫描二维码推送至手机访问。

版权声明:本文由高久峰个人博客发布,如需转载请注明出处。

本文链接:https://blog.20230611.cn/post/764.html

分享给朋友:

“微信小程序不支持EventSource的解决方案” 的相关文章

Javascript封装的原生Ajax请求

Javascript封装的原生Ajax请求

由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称)   exam...

javascript停止定时器,	js删除定时器

javascript停止定时器, js删除定时器

    window.setInterval(method,time)方法本身会返回一个资源句柄,使用clearInterval(Intervalid)方法即可清除定时器<script> var num=0; //每隔1秒再控制台输...

tmodjs模板语法

tmodjs模板语法

    TmodJS是一套完整的前端模块框架。    虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。...

阻止表单提交刷新页面

阻止表单提交刷新页面

<form action="save.php" method="post"   target="nm_iframe">      &nbs...

使用js让手机震动,js实现手机震动

使用js让手机震动,js实现手机震动

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head>  ...

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...