Uniapp仿ChatGPT Stream流式输出（非Websocket）

前言

最近写一个chagpt小程序，流式输出可以使用websocket也可以使用stream来实现，这里就不折腾websocket的了，我发现uniapp实现流式输出的方式挺多的，主要是有些小程序还不兼容，花了点时间研究了一下。

EventSource

EventSource也称为SSE（Server-Sent Events），是服务器推送的一个网络事件接口，一个EventSource会对http服务开启一个持久化链接，它发送的事件格式是‘text/stream’，开启EventSource事件后，它会一直保持开启状态，直到被要求关闭

SpringBoot实现SSE

@GetMapping("/sse")
public SseEmitter handleSse() {
    SseEmitter emitter = new SseEmitter();
    String data = "testStream";
    try {
        emitter.send(SseEmitter.event()
                     .id("[DATA]")
                     .data("hello")
                     .reconnectTime(3000));
        emitter.send(SseEmitter.event()
                     .id("[DATA]")
                     .data("你好，世界。")
                     .reconnectTime(3000));
        emitter.send(SseEmitter.event()
                     .id("[DONE]")
                     .data("done")
                     .reconnectTime(3000));
        emitter.send("啊啊啊");
    } catch (IOException e) {
        emitter.completeWithError(e);
    }

    emitter.complete();
    return emitter;
}

XHR方式

uniapp自带的uni.request()不支持stream方式，所以可以使用XHR来实现，但是小程序又不支持XHR

const requestChat = (msg)=>{
    // 在页面中创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest()
    // 设置 XMLHttpRequest 对象
    xhr.open('GET', 'http://localhost:8090/chat?msg=' + msg)
    xhr.responseType = 'text'
    xhr.timeout = 0
    const msgNum = messageList.value.length;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.LOADING) {
            // 处理 HTTP 数据块
            console.log(xhr.responseText)
        }
    }
    xhr.send()
}

EventSource方式

uniapp中也可以直接使用EventSource来实现流式输出，可惜小程序也不支持（难顶）

const chatStream = () => {
    const es = new EventSource("http://localhost:8090/sse")
    es.onmessage = function(event) {
        console.log(event)
        if (event.lastEventId=="[DONE]") {
            console.log(event.data);
            return es.close()
        }
        console.log(event.data);
    };
}

Transfer-Encoding Chunk

uniapp中使用uni.request()，配置enableChunked: true即可

const requestTask = uni.request({
    url: 'http://localhost:8090/sse',
    timeout: 15000,
    responseType: 'text',
    method: 'GET',
    enableChunked: true,  //配置这里
    data: {},
    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)
})

由于接收到的数据是arraybuffer，所以我们要转换为字符串类型，但是编码会出现一点问题，上面这段代码使用TextDecoder来转换编码，但是小程序又不支持TextDecoder。。。

再换一种转换方式

requestTask.onChunkReceived(function(res) {
    const uint8Array = new Uint8Array(res.data);
    let text = String.fromCharCode.apply(null, uint8Array);
    text = decodeURIComponent(escape(text));
    console.log(text);
})

这样就可以在小程序中把Arraybuffer转换为字符串了

还有许多方式，比如调用第三方库来代替TextDecoder，我就不去尝试了

注意：

1.enableChunked: true流式响应开关，会自动在header中加入transfer-encoding chunked

2.arraybuffer转字符串问题，有TextDecoder就很好处理，没有也可以参照我上面的示例。

参考文章：

小程序如何实现类似ChatGPT的流式传输

微信小程序除了WebSocket其他思路实现流传输文字（打字机）效果

微信小程序ChatGpt流式响应

在微信小程序中如何支持使用流模式（stream），打造ChatGPT实时回复机器人，最详细讲解。