微信小程序怎么实现类似ChatGPT的流式传输

这篇文章主要介绍“微信小程序怎么实现类似ChatGPT的流式传输”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么实现类似ChatGPT的流式传输”文章能帮助大家解决问题。

小程序上实现流失传输

模拟ChatGPT的效果，实现流式传输，通过处理流数据，实现打字机的效果。

什么是流式传输？

在解决问题之前，我们需要了解什么是流式传输。流式传输指的是将数据分成多个数据流，通过网络传输，以减少网络延迟和提高性能。在某些情况下，流式传输也可以用于将视频流和音频流传输到客户端。流式传输是一种高效的数据传输方式，常用于大文件下载和在线视频播放等场景。

为什么小程序不支持流式传输？

尽管流式传输在某些情况下非常有用，但小程序目前不支持流式传输。主要原因是小程序的架构和限制。

小程序的开发框架提供了一个小程序的开发和调试环境。在这个环境中，小程序的代码和资源都是打包在一个文件中的。这意味着小程序依赖此框架的环境，无法调用浏览器标准的API，需要框架的整体升级和支持。

此外，小程序对网络请求的限制也是一个因素。小程序中的网络请求必须使用微信提供的API，这些API通常只支持完整的请求和响应。这就使得小程序无法使用流式传输。

我的解决方案

• 使用WebSocket协议 , WebSocket是一种网络协议，它提供了双向通信的功能，并且支持流式传输。在小程序中，我们可以使用WebSocket协议来实现流式传输的功能。

• 调整数据格式 , 如果您的应用程序需要传输大量数据，可以将数据分成更小的块，以便小程序可以处理它们。这样可以避免一次性传输过多数据而导致的问题。

• 使用分段下载 , 分段下载是一种在下载大文件时很常用的技术。在小程序中，我们也可以使用这种技术来避免一次性下载大量数据。我们可以将数据分成多个部分，每次下载一个部分，并在所有部分下载完毕后将它们合并起来。

但这些都是常规方案，实现也比较麻烦，把正常的请求复杂化了。抛弃~

常规方案Axios

基础html模式就不列举了，axios更便捷，我很自信这个方案可行性。

重点：

• headers 设置为流失请求

• responseType：stream

request({    url: '/api/prompt',    //请求头需要改为stream模式    headers: {      Accept: 'text/event-stream',    },    //响应类型设置stream    responseType: 'stream',    method: 'POST',    data: {      prompt: prompt,    },  }).then(res => {      console.log(res)  }).catch(err => {    console.log(err)  })

他们又问我要打字机效果，我的方案：接收到ArrayBuffer以后解码数据。

.then((res) => {  const arrayBuffer = res.data;  const uint8Array = new Uint8Array(arrayBuffer);  const textDecoder = new TextDecoder('utf-8');  const text = textDecoder.decode(uint8Array);  for (let i = 0; i < text.length; i++) {    setTimeout(() => {      resultText += text[i];      console.log(resultText);    }, i * 100);  }})

ok，浏览器没问题，小程序调试工具没问题，我依旧自信我的方案

但是，小程序报错了，无法打印流数据，无法支持TextDecoder方法。完犊子，顾问成瞎指挥了。

另辟蹊径：onChunkReceived方案

微信官方文档中提到， wx.request中支持onChunkReceived分段式传输

重点：

• 小程序 wx.request 中开启 enableChunked; text或stream

• 当然，OpenAI接口，也要开启 stream;

• 解码分段内容为string，使用其他方案代替TextDecoder

const requestTask = wx.request({    url: '/api/prompt',    //请求头需要改为stream模式    header: {      "Transfer-Encoding": 'chunked'    },    timeout: 15000,    responseType: 'text',    method: 'POST',    enableChunked: true,    data: {      prompt: prompt,    },  }).then(res => {      console.log(res)  }).catch(err => {    console.log(err)  })

这样，我们就发起了流式传输请求，当然后端也要支持的，后面我会举例子。

当他们执行时，又出问题了，搞不定TextDecoder替代方案。我查了一下，好像有个方案，小不自信了。 使用"TextDecoder"替代库，然后给出建议：

import {TextEncoder, TextDecoder} from "fastestsmallesttextencoderdecoder";const encode = (new TextEncoder).encode;const decode = (new TextDecoder).decode;

等了一天没找我，哼哼，小菜一碟，完工。

这边又来了，大佬你的方法不好使，引入执行又又报错了。

稳住别慌... 试试手写ArrayBuffer转string方案：text-encoding 然后亲自测试，搞不定就把chatgpt-plus关掉。

最终版：

let buffer=''requestTask.onChunkReceived(function (response) {    const arrayBuffer = response.data;    const uint8Array = new Uint8Array(arrayBuffer);    let text = String.fromCharCode.apply(null, uint8Array);    buffer += text;    full_command.value = buffer  })

其实，第二个方案是可行的，只是我也没时间具体看报了什么错误。最终使用了fromCharCode的方法，恰好可以处理，当然还一些过滤和解码，根据业务需要写了。

后端接口配置

后端配置教程比较多，主要是添加请求头，支持分段传输的方式。

public static function prompt($message)    {        $openAi = self::getOpenAI();        header('Access-Control-Allow-Credentials: true');        // 设置响应头信息        header('Transfer-Encoding: chunked');        header('Content-Type: text/plain');        header('Cache-Control: no-cache');        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');        header('Access-Control-Allow-Headers: Content-Type');        header('Connection: keep-alive');        $msg = "";        $openAi->prompt([            'messages' => $message,            'model' => 'gpt-3.5-turbo',            "stream" => true,        ], function ($curl_info, $response) {        //闭包函数处理流            $data = [];            $lines = explode("\n", $response);            foreach ($lines as $line) {                if (!str_contains($line, ':')) {                    continue;                }                [$name, $value] = explode(':', $line, 2);                if ($name == 'data') {                    $data[] = trim($value);                }            }            foreach ($data as $message) {                if ('[DONE]' === $message) {                    echo "0\r\n\r\n";                } else {                    $message = json_decode($message, true);                    $input = $message['choices'][0]['delta']['content'] ?? '';                    $msg .= $input;                    echo dechex(strlen($msg)) . "\r\n" . $msg . "\r\n";                }            }            ob_flush();            flush();            return strlen($response);        });    }

关于“微信小程序怎么实现类似ChatGPT的流式传输”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。