node+vue 调用chatgpt 实现流式响应聊天

最近工作中遇到的开发需求 记录一下 node后端+vue前端项目调用流式响应接口 实现实时聊天效果

后端代码

public async chatTest() {
    const axios = require('axios');
    let { ctx } = this;
    const params = ctx.request.body;
    const remoteUrl = '接口地址' ;

    const response = await axios({
        method: 'post',
        url: remoteUrl,
        data: params,
        headers: {
            'Content-Type': 'application/json',
            'Cookie': ctx.request.headers.cookie
        },
        responseType: 'stream', // 指定响应类型为流  
    });
    ctx.body = response.data;
}

前端代码

        const postData = {  
            相关参数
        };  
  
        // 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();
        // 设置请求的 URL
        xhr.open('POST', `对应后端地址`);
        // 设置响应类型为 text/event-stream
        //xhr.setRequestHeader('Content-Type', 'text/event-stream');
        xhr.setRequestHeader("Content-Type", "application/json"); 
        var params = JSON.stringify(postData);  
        
        
        // 监听 readyStateChange 事件
        xhr.onreadystatechange = () => {
            self.inProgress = true;
            // 如果 readyState 是 3，表示正在接收数据
            if (xhr.readyState === 3) {
                /*
                        这里实时返回数据   可对返回的数据进行处理显示在页面上  以此来实现显示实时输入的效果   返回数据一般是多个json字符串链接在一起   
                        {xx:aa,yy:aa}{xx:bb,yy:bb}
                */
                
            }
            // 如果 readyState 是 4，表示完成请求
            if (xhr.readyState === 4 ) {
               
                if (xhr.status === 200) {
                    /*
                    这里是请求完成后一次性返回所有的结果    避免实时接收数据时缺少字符
                    */
                }
                    
               
            }
        }
        // 发送请求
        xhr.send(params);
    },
    
    

开发中遇到的其它问题 接口返回的数据解析后 里面会存在\n\n这种字符代表换行 但elementui中直接v-html 换行不生效 可添加 style="white-space: pre-line; "