聊聊微信小程序的流式（stream）响应请求

场景：类似ChatGPT的逐字显示效果。

流程：服务端我用Python的flask框架（向外提供API接口）实现，服务部署在replit上，Python调用azure 的chatgpt服务（需要申请），并以流式的形式返回，小程序再调用这个流式接口实现。

我会提供最小能运行的完整代码示例。

我本地的Python版本：3.10.11、Flask版本：2.3.2、openai版本：0.27.8。

python部分：

/main.py：

python 复制代码

from data.chat_completion import ChatCompletion

@app.route("/chat", methods=['POST'])

@log_streaming_request

def love_chat():

  message_list = request.json.get('message_list', [])

  message = []

  message.extend(message_list)

  try:

    response = ChatCompletion().create(message, True)

    def generate():

    for chunk in response:

      if not chunk['id']:

      	continue

      if 'delta' in chunk["choices"][0] and 'content' in chunk['choices'][0]['delta']:

      	yield chunk['choices'][0]['delta']['content']

      return generate()

  except Exception as e:

    print("chat Exception:{}".format(str(e)))

    return Response("异常了，请重试", status=500)


if __name__ == "__main__":

app.run(debug=True, port=5000, host="0.0.0.0")

/chat/chat_completion.py:

ini 复制代码

import openai

import setting

openai.api_key = setting.API_KEY

openai.api_base = setting.API_BASE

openai.api_type = setting.API_TYPE

openai.api_version = "2023-05-15" # 版本对应 2023-05-15、

class ChatCompletion:

  temperature_default = 0.6 # 默认值

  deployment_name = "gpt-35-turbo16k" # 可选 gpt-35（4kb）、gpt-35-turbo16k（16kb，更大的上下文）

  def create(self, message, stream=False, temperature_default=None):

    """

    创建一个流式的响应

    :param message:

    :param stream: 是否以流式的形式响应

    :param temperature_default:

    :return:

    """

    if not temperature_default:

    	temperature_default = self.temperature_default

    return openai.ChatCompletion.create(

      engine=self.deployment_name,

      messages=message,

      # max_tokens=10,

      temperature=temperature_default,

      stream=stream,

    )

/setting.py:

ini 复制代码

API_KEY = "xxxxxxxxxxxxxxxxxxxx"

API_BASE = "https://xxxxx.openai.azure.com/"

API_TYPE = "azure"

到此Python部分结束了。

下面是小程序部分，核心部分，可兼容同步请求：

chat.js：

javascript 复制代码

/**

* 支持流式获取响应内容

* @param {message_list} 消息列表

* @param {success_cb} 请求成功的回调

* @param {err_cb} 请求失败的回调

*/

export const love_chat_stream = (data, config, success_cb = () => {}, err_cb = () => {}) => {

  if (!config.hasOwnProperty('ai_report_chunk')) {

  	config.ai_report_chunk = false // 如果没有传入，则默认不支持流式

  }

  return wx.request({

    url: "填入自己服务器的地址" + '/chat',

    responseType: config.ai_report_chunk ? "arraybuffer" : "text/html",

    method: 'POST',

    enableChunked: config.ai_report_chunk,

    header: {

    	'content-type': 'application/json'

    },

    enableQuic: true,

    enableCache: true,

    data: data,

    timeout: get_request_config().openai_request_time_out,

    success: (res) => {

      if (res.statusCode != 200) {

      	err_cb(config, res.errMsg)

      } else {

      if (!config.ai_report_chunk) {

      	// 非流式

     	 res = res.data

    }

    success_cb(config, res)

    }

    },

    fail: (err) => {

    	err_cb(config, err)

    },

    complete: () => {}

  });

}

效果如下：

这篇文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。

想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。

感谢你的阅读与支持，期待在未来的文章中与你再次相遇！