通义千问AI(流式输出)

一. 前端代码

1. 前端编写发送按钮

<button onclick="send()" class="chat-send-btn">Send</button>

2. 编写JS代码

function send() {

    diss();


    let message = $('#message').val();
    if (!message) {
        return;
    }
    $('#messages').append("<div class='msg-received msg-sent'><div class='msg-image' style='float: right'><img src='https://luxun20021115.oss-cn-beijing.aliyuncs.com/.jpeg'></div><div class='msg-content'><p>现在</p><p class='msg'>" + message + "</p></div></div>");
    messageInit();
    $('#message').val('');
    let count = 0;

   

    $.ajax({
        type: "POST",
        url: "message/query",
        data: {
            content: message,
        },
        dataType: "json",
        success: function (data) {
            if (data['code'] === 'SUCCESS') {
                var messageId = generateUniqueId(); // 为消息生成一个唯一ID

                // 创建一个带有消息唯一ID的新 <div> 元素
                var messageDiv = $("<div>").addClass("msg-received").attr("id", messageId);

                // 将消息内容附加到新的 <div> 元素上
                messageDiv.append("<div class=\"msg-image\">\n" +
                    "                      <img src=\"assets/images/team/user-2.jpg\" alt=\"image\">\n" +
                    "                   </div>\n" +
                    "                   <div class=\"msg-content\">\n" +
                    "                      <p>现在</p>\n" +
                    "                      <p id='oppo' class=\"msg\"></p>\n" + // 空的 <p> 元素用于逐字输出文字
                    "                   </div>");

                // 将新的 <div> 元素附加到消息容器中
                $('#messages').append(messageDiv);

                // 开始逐字输出消息内容
                typeMessage(data['message'], 0, messageId);

            }
        }
    });


}

3. diss方法

/**
 * 隐藏首次消息框 ai医生
 */
function diss(){

    document.getElementById("dissmess").style.display="none";
}

4. 逐字输出字数

function typeMessage(message, index, messageId) {
        // 获取要添加文字的 <p> 元素
        var messageParagraph = $('#' + messageId + ' .msg');

        // 检查是否已经添加完所有文字
        if (index < message.length) {
            // 逐字添加文字
            messageParagraph.text(message.substring(0, index + 1));

            // 使用定时器延迟添加下一个文字
            setTimeout(function () {
                typeMessage(message, index + 1, messageId);
            }, 80); // 调整添加文字的速度，这里是每 100 毫秒添加一个文字
        }
    }

5. 生成消息唯一ID

// 用于为每条消息生成唯一ID的函数
    function generateUniqueId() {
        // 生成一个随机数，并附加时间戳以确保唯一性
        return "msg-" + Math.random().toString(36).substr(2, 9) + "-" + new Date().getTime();
    }

}

6. 前端完整代码

/**
 * 隐藏首次消息框 al医生
 */
function diss(){

    document.getElementById("dissmess").style.display="none";
}



/**
 * 发送消息
 */
function send() {

    diss();


    let message = $('#message').val();
    if (!message) {
        return;
    }
    $('#messages').append("<div class='msg-received msg-sent'><div class='msg-image' style='float: right'><img src='https://luxun20021115.oss-cn-beijing.aliyuncs.com/.jpeg'></div><div class='msg-content'><p>现在</p><p class='msg'>" + message + "</p></div></div>");
    messageInit();
    $('#message').val('');
    let count = 0;

    function typeMessage(message, index, messageId) {
        // 获取要添加文字的 <p> 元素
        var messageParagraph = $('#' + messageId + ' .msg');

        // 检查是否已经添加完所有文字
        if (index < message.length) {
            // 逐字添加文字
            messageParagraph.text(message.substring(0, index + 1));

            // 使用定时器延迟添加下一个文字
            setTimeout(function () {
                typeMessage(message, index + 1, messageId);
            }, 80); // 调整添加文字的速度，这里是每 100 毫秒添加一个文字
        }
    }

    $.ajax({
        type: "POST",
        url: "message/query",
        data: {
            content: message,
        },
        dataType: "json",
        success: function (data) {
            if (data['code'] === 'SUCCESS') {
                var messageId = generateUniqueId(); // 为消息生成一个唯一ID

                // 创建一个带有消息唯一ID的新 <div> 元素
                var messageDiv = $("<div>").addClass("msg-received").attr("id", messageId);

                // 将消息内容附加到新的 <div> 元素上
                messageDiv.append("<div class=\"msg-image\">\n" +
                    "                      <img src=\"assets/images/team/user-2.jpg\" alt=\"image\">\n" +
                    "                   </div>\n" +
                    "                   <div class=\"msg-content\">\n" +
                    "                      <p>现在</p>\n" +
                    "                      <p id='oppo' class=\"msg\"></p>\n" + // 空的 <p> 元素用于逐字输出文字
                    "                   </div>");

                // 将新的 <div> 元素附加到消息容器中
                $('#messages').append(messageDiv);

                // 开始逐字输出消息内容
                typeMessage(data['message'], 0, messageId);

            }
        }
    });

// 用于为每条消息生成唯一ID的函数
    function generateUniqueId() {
        // 生成一个随机数，并附加时间戳以确保唯一性
        return "msg-" + Math.random().toString(36).substr(2, 9) + "-" + new Date().getTime();
    }

}

二. 后端代码

1. controller层

@PostMapping("/query")
    public RespResult query(String content) {
        String result = streamQwen.testStreamCall(content);
        return RespResult.success(result);

    }

2. service层

@Service
public class StreamQwen {

    public String testStreamCall(String content) {
        Constants.apiKey = "sk-36e35b588caa43d29a71905c19d";//换成自己的
        Conversation conversation = new Conversation();
        String prompt = "请以智慧医生的口吻回答:" + content;
        ConversationParam param = ConversationParam
                .builder()
                .model(Conversation.Models.QWEN_TURBO)
                .prompt(prompt)
                .build();
        try {
            Flowable<ConversationResult> result = conversation.streamCall(param);
            List<String> tests = new ArrayList<>();
            result.blockingForEach(msg -> {
                String text = msg.getOutput().getText();
                tests.add(text);
            });
            String s = tests.get(tests.size() - 1);
            return s;
        } catch (NoApiKeyException e) {
            throw new RuntimeException(e);
        } catch (InputRequiredException e) {
            throw new RuntimeException(e);
        }
    }
}