首页 前端知识 vue使用fetchEventSource实现chatgpt打字机效果

vue使用fetchEventSource实现chatgpt打字机效果

2024-04-23 21:04:54 前端知识 前端哥 599 540 我要收藏

需求:后端接口使用sse长连接,前端调用并在页面赋值,从而实现打字机效果。

因为后端要求POST请求,原生fetch只支持GET请求,遂作罢。

安装fetchEventSource

npm install fetchEventSource

页面中使用

import { fetchEventSource } from "@microsoft/fetch-event-source";

         await fetchEventSource("/yourapi", {
                method: "POST",
                headers: {
                    "Content-Type": "text/event-stream",
                },
                openWhenHidden: true,
                body: JSON.stringify({
                // 后端要的数据
                    prompt: data, 
                    history: [],
                    max_token: 2048,
                    temperature: 0,
                    top_p: 0.9,
                }),

                async onmessage(msg) {
                    const { data } = msg;
                    if (data && JSON.parse(data)) {
                        const result = JSON.parse(data);
                        _this.content = result.response;  // 返回的数据赋值到页面
                        const content = document.getElementById("content");
                        // 页面被文字铺满后实现滚动效果
                        content.scrollTop = content.scrollHeight;
                    }
                },

                onerror(err) {
                    throw err;
                },
            });

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5877.html
标签
chatgpt
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!