ChatGPT 前端流式数据如何处理？本文提供三种方案为你揭开疑惑【websocket、SSE、fetch Stream]

原创

已于 2023-09-27 15:56:26 修改 · 5.4k 阅读

标签

#chatgpt #websocket

收录于

于 2023-09-05 16:09:23 首次发布

本文介绍了作者在部署chatGPT时，针对内容流失问题提供的三种解决方案：WebSocket（推荐）、SSE（不支持小程序）和stream流式请求。作者提供了代码示例以供参考，强调实际应用需调整。

当下chatGPT如此火热,很多开发者都想部署一个自己的gpt站点，本文不细致讨论gpt部署，只是着重总结一下博主在接入gpt时对于内容流失输出的解决方案，【代码质量并不高，感兴趣的小伙伴可以简单参考】

第一种也是我个人比较推荐的方案：websocket

各个平台兼容性也比较友好，且支持小程序【小程序需要使用其内部自动的socket API，详情请参考其官方文档】

//使用WebSocket连接后端socket服务  注意此处wss 可以理解为https  ws为http
socket = new WebSocket("ws://chat.xxx.saybot.net/websocket/" + userStore.uid)

//监听onopen 成功触发表示连接socket服务成功
 socket.onopen = function () {
    console.log("😄您已成功接入websocket服务,开始解决你的问题")
    socket.send("")
 }

//收到消息事件 gpt响应会不断触发onmessage事件，其事件对象中会有流失输出的内容
  socket.onmessage = function (event) {
    try {
      const content = JSON.parse(event.data).content
      console.log('😄gpt 响应内容为'，content)
    } catch (err) {
      switch (event.data) {
        case "[INTERRUPTED]":
        case "[MODEL_TIMEOUT]":
        case "TEMPERATURE_THRESHOLD":
        case "[TOKENS]":
          console.log("😄gpt 响应中断或者超时")
          event.target.close()
          break
        case "[DONE]":