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

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

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

//使用WebSocket连接后端socket服务  注意此处wss 可以理解为https  ws为httpsocket = 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]":          console.log("😄gpt 响应结束了")          event.target.close()          break        default:          console.log("😄message error", err)          break      }    }  }  //连接关闭事件  socket.onclose = function (event) {    console.log("😄您已断开")    }  //发生了错误事件  socket.onerror = function (e) {    console.log(""连接错误，请联系开发者")  }

 响应数据如下：

第二种就是SSE方案，

SSE方案和websocket类似,但其存在一个比较大的”遗憾“就是不支持小程序

npm  i event-source-polyfill    //首先需要下载改库到项目                

const eventSource = new EventSourcePolyfill("http:/xxxxxx/createSse", {    headers: {      uid: userStore.uid,    //此处可以携带你需要的headers      token: localStorage.getItem("accessToken")    }  })eventSource.onopen = event => {    console.log("SSE 连接成功, 开始请求数据") } eventSource.onmessage = async event => {    const { data, lastEventId } = event     switch (lastEventId) {      case "[INTERRUPTED]":      case "[MODEL_TIMEOUT]":      case "TEMPERATURE_THRESHOLD":         console.log("😄gpt  回复超时或中断")        event.target.close()        beak      case "[TOKENS]":      case "[DONE]":       console.log("😄gpt  回复完毕")        event.target.close()        break      default:        const content = JSON.parse(data).content        console.log("😄gpt 回复："，content)        break    }  } eventSource.onerror = event => {   console.log("😄gpt onerror ："，event)  }

 解析输出数据如下：

第三种方案就是strem流式方案

通过fetch 请求，获取stream流式数据，相对比较麻烦不推荐

export const postMessage = async data => {  const res = await fetch("http://xxxxx/talkByStream", {    method: "POST",    headers: {      "Content-Type": "application/json",      token: userStore.token    },    body: JSON.stringify(data)  })   if (res.status && res.status !== 200) {    console.log('error',res)  }  return res?.body?.getReader(); //getReader()可以让调用者更方便字符内容的处理}

调用fetch请求const reader = await postMessage({    conversation: messageListToConversation(messageList.value),    userMessage: { role: "user", content },    temperature: 0.9}) reader.read().then(async ({ value, done }) => {    if (done) {      return    }    let text = new TextDecoder().decode(value)    const responseStatus = text.match(REGEXP_FINISH_STATUS)    const matchs = text.match(REGEXP_CONTENT_ARR)    for (let i = 0; i < matchs?. length; i++) {      let [, content] = matchs[i].match(REGEXP_CONTENT)      content = content.replace(///n/g, "/n")      await sleep(90) //睡眠函数 console.log(content )    }  } 

以上方案仅供参考，只是一个基础demo,实际使用需要调整，只是为大家提供一种思路，谢谢