微信小程序和H5端对接dify ai接口

微信小程序和H5端对接dify ai接口

用的uniapp开发的

H5端是基于SSE协议开发的

要安装

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

/*#ifdef H5*/
                const eventSource = new fetchEventSource('/v1/chat-messages', {
                    method: 'POST',
                    headers: {
                        'Authorization': 'Bearer app-xxx',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        inputs: {},
                        query: message, // 替换为实际的查询内容
                        response_mode: 'streaming', // 启用流式响应
                        conversation_id: that.conversationId,
                        user: "abc-123"
                    }),
                    onopen(response) {
                        // 建立连接
                        console.log(response, "open");
                        if (response.ok) {
                            console.log("成功建立连接");
                        } else {
                            throw new Error(JSON.stringify(response));
                        }
                    },
                    onmessage(event) {
                        try {
                            const jsonData = JSON.parse(event.data);
                            if (jsonData.event === "message") {
                                //that.loading = false; // 隐藏加载图标
                                that.conversationId = jsonData.conversation_id;
                                // 如果返回的答案中有新的文字，逐字显示
                                if (jsonData.answer) {
                                    // 追加接收到的新文字
                                    that.displayedText += jsonData.answer;
                                    // 继续显示新的文字
                                    //that.startTyping(jsonData.message_id);
                                }
                            }
                            console.log("that.displayedText", that.displayedText);

                            if (jsonData.event === "message_end") {
                                that.loading = false; // 隐藏加载图标
                                that.arr.push({
                                    answer: that.displayedText,
                                    message_id: jsonData.message_id,
                                });
                                that.displayedText = "";
                                console.log("that.arr", that.arr);
                            }
                        } catch (error) {
                            console.error("数据解析错误:", error);
                        }
                    },
                    onclose() {
                        console.log("关闭链接");
                    },
                    onerror(err) {
                        console.error("发生错误", err);
                        throw err;
                    },
                    openWhenHidden: true, // 实时通知
                });
                /*#endif*/

                /*#ifdef MP-WEIXIN*/
                // 微信小程序端执行的逻辑

                const requestTask = uni.request({
                    url: '/v1/chat-messages',
                    timeout: 15000,
                    responseType: 'text',
                    method: 'POST',
                    header: {
                        'Authorization': 'Bearer app-xxx',
                        'Content-Type': 'application/json',
                    },
                    enableChunked: true, //配置这里
                    data: JSON.stringify({
                        inputs: {},
                        query: message, // 替换为实际的查询内容
                        response_mode: 'streaming', // 启用流式响应
                        conversation_id: that.conversationId,
                        user: "abc-123"
                    }),
                    success: response => {
                        console.log(response)
                    },
                    fail: error => {}
                })
                requestTask.onHeadersReceived(function(res) {
                    console.log(res.header);
                });
                // 这里监听消息
                requestTask.onChunkReceived(function(res) {
                    let decoder = new TextDecoder('utf-8')
                    let text = decoder.decode(new Uint8Array(res.data))
                    console.log(text)
                    try {
                        // 使用正则表达式去除前缀 "data: "
                        const jsonString = text.replace(/^data:\s*/, '');
                        const jsonData = JSON.parse(jsonString);
                        if (jsonData.event === "message") {
                            //that.loading = false; // 隐藏加载图标
                            that.conversationId = jsonData.conversation_id;
                            // 如果返回的答案中有新的文字，逐字显示
                            if (jsonData.answer) {
                                // 追加接收到的新文字
                                that.displayedText += jsonData.answer;
                                // 继续显示新的文字
                                //that.startTyping(jsonData.message_id);
                            }
                        }
                        console.log("that.displayedText", that.displayedText);

                        if (jsonData.event === "message_end") {
                            that.loading = false; // 隐藏加载图标
                            that.arr.push({
                                answer: that.displayedText,
                                message_id: jsonData.message_id,
                            });
                            that.displayedText = "";
                            console.log("that.arr", that.arr);
                        }
                    } catch (error) {
                        console.error("数据解析错误:", error);
                    }

                })
                /*#endif*/