vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目接收SSL数据流,vue接入AI实现一行一行输出

vue项目接收SSL数据流,vue接入AI实现一行一行输出的方式

作者:斌味代码

文章介绍了如何安装和使用fetch-event-source插件,实现数据一行一行输出,并分享了个人经验,希望对大家有所帮助

1.安装fetch-event-source插件

npm install @microsoft/fetch-event-source

2.使用方法

如下所示:

fetchEventSource('https://spark-api-open.xf-yun.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                "Authorization": "Bearer apikey",
            },
            body: JSON.stringify(form),
            openWhenHidden: true,
            onopen(ops) {
                // console.log(ops);
            },
            onmessage(res) {
                // eventSource.close();
                if (res.data == '[DONE]') {
                    data.disabledSend = false;
                } else {
                    let resdata = JSON.parse(res.data);
                    textS+= resdata.choices[0].delta.content;
                    data.messages[msglen + 1] = { sender: 'admin', text: textS, msglen };
                    // console.log(data.messages)
                }
            },
            onerror(err) {
                throw Error(err);
            }
});

最后自行调整输出样式,就能实现数据一行一行输出了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文