feat: stream流响应

next.config.js

@@ -6,17 +6,7 @@ const isDev = process.env.NODE_ENV === 'development';
 const nextConfig = {
   output: 'standalone',
   reactStrictMode: false,
-  compress: true,
+  compress: true
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'docgpt-1301319986.cos.ap-shanghai.myqcloud.com',
-        port: '',
-        pathname: '/**'
-      }
-    ]
-  }
 };
 
 module.exports = nextConfig;

package.json

@@ -23,6 +23,7 @@
     "axios": "^1.3.3",
     "crypto": "^1.0.1",
     "dayjs": "^1.11.7",
+    "eventsource-parser": "^0.1.0",
     "formidable": "^2.1.1",
     "framer-motion": "^9.0.6",
     "hyperdown": "^2.4.29",

pnpm-lock.yaml

@@ -24,6 +24,7 @@ specifiers:
   dayjs: ^1.11.7
   eslint: 8.34.0
   eslint-config-next: 13.1.6
+  eventsource-parser: ^0.1.0
   formidable: ^2.1.1
   framer-motion: ^9.0.6
   husky: ^8.0.3
@@ -65,6 +66,7 @@ dependencies:
   axios: registry.npmmirror.com/axios/1.3.3
   crypto: registry.npmmirror.com/crypto/1.0.1
   dayjs: registry.npmmirror.com/dayjs/1.11.7
+  eventsource-parser: registry.npmmirror.com/eventsource-parser/0.1.0
   formidable: registry.npmmirror.com/formidable/2.1.1
   framer-motion: registry.npmmirror.com/framer-motion/9.0.6_biqbaboplfbrettd7655fr4n2y
   hyperdown: registry.npmmirror.com/hyperdown/2.4.29
@@ -4553,6 +4555,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  registry.npmmirror.com/eventsource-parser/0.1.0:
+    resolution: {integrity: sha512-M9QjFtEIkwytUarnx113HGmgtk52LSn3jNAtnWKi3V+b9rqSfQeVdLsaD5AG/O4IrGQwmAAHBIsqbmURPTd2rA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/eventsource-parser/-/eventsource-parser-0.1.0.tgz}
+    name: eventsource-parser
+    version: 0.1.0
+    engines: {node: '>=14.18'}
+    dev: false
+
   registry.npmmirror.com/execa/6.1.0:
     resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/execa/-/execa-6.1.0.tgz}
     name: execa

src/components/Markdown/index.module.scss

@@ -369,7 +369,7 @@
   }
 
   pre code {
-    background-color: #222;
+    background-color: #222 !important;
     color: #fff;
     width: 100%;
     font-family: 'Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji';

src/components/Markdown/index.tsx

@@ -26,8 +26,8 @@ const Markdown = ({ source, isChatting }: { source: string; isChatting: boolean
         code({ node, inline, className, children, ...props }) {
           const match = /language-(\w+)/.exec(className || '');
           const code = String(children).replace(/\n$/, '');
-          return !inline ? (
+          return !inline || match ? (
-            <Box my={3} borderRadius={'md'} overflow={'hidden'}>
+            <Box my={3} borderRadius={'md'} overflow={'hidden'} backgroundColor={'#222'}>
               <Flex
                 py={2}
                 px={5}

src/pages/api/chat/chatGpt.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
-import { Readable } from 'stream';
+import { createParser, ParsedEvent, ReconnectInterval } from 'eventsource-parser';
 import { connectToDatabase, ChatWindow } from '@/service/mongo';
 import type { ModelType } from '@/types/model';
 import { getOpenAIApi, authChat } from '@/service/utils/chat';
@@ -9,21 +9,13 @@ import { ChatItemType } from '@/types/chat';
 
 /* 发送提示词 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  res.setHeader('Connection', 'keep-alive');
+  res.setHeader('Content-Type', 'text/event-stream;charset-utf-8');
-  res.setHeader('Cache-Control', 'no-cache');
+  res.setHeader('Access-Control-Allow-Origin', '*');
-  res.setHeader('Content-Type', 'text/event-stream');
+  res.setHeader('X-Accel-Buffering', 'no');
-
+  res.setHeader('Cache-Control', 'no-cache, no-transform');
-  const responseData: string[] = [];
-  const stream = new Readable({
-    read(size) {
-      const data = responseData.shift() || null;
-      this.push(data);
-    }
-  });
 
   res.on('close', () => {
     res.end();
-    stream.destroy();
   });
 
   const { chatId, windowId } = req.query as { chatId: string; windowId: string };
@@ -58,16 +50,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const formatPrompts: ChatCompletionRequestMessage[] = filterPrompts.map(
       (item: ChatItemType) => ({
         role: map[item.obj],
-        content: item.value.replace(/(\n| )/g, '')
+        content: item.value.replace(/\n/g, ' ')
       })
     );
     // 第一句话，强调代码类型
     formatPrompts.unshift({
       role: ChatCompletionRequestMessageRoleEnum.System,
-      content:
+      content: '如果你想返回代码，请务必声明代码的类型！'
-        'If the content is code or code blocks, please mark the code type as accurately as possible!'
     });
-
     // 获取 chatAPI
     const chatAPI = getOpenAIApi(userApiKey);
     const chatResponse = await chatAPI.createChatCompletion(
@@ -78,48 +68,57 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         messages: formatPrompts,
         stream: true
       },
-      openaiProxy
+      {
+        responseType: 'stream',
+        httpsAgent: openaiProxy?.httpsAgent
+      }
     );
 
-    // 截取字符串内容
-    const reg = /{"content"(.*)"}/g;
-    // @ts-ignore
-    const match = chatResponse.data.match(reg);
-    if (!match) return;
-
     let AIResponse = '';
 
-    // 循环给 stream push 内容
+    // 解析数据
-    match.forEach((item: string, i: number) => {
+    const decoder = new TextDecoder();
-      try {
+    new ReadableStream({
-        const json = JSON.parse(item);
+      async start(controller) {
-        // 开头的换行忽略
+        // callback
-        if (i === 0 && json.content?.startsWith('\n')) return;
+        async function onParse(event: ParsedEvent | ReconnectInterval) {
-        AIResponse += json.content;
+          if (event.type === 'event') {
-        const content = json.content.replace(/\n/g, '<br/>'); // 无法直接传输\n
+            const data = event.data;
-        if (content) {
+            if (data === '[DONE]') {
-          responseData.push(`event: responseData\ndata: ${content}\n\n`);
+              controller.close();
-          // res.write(`event: responseData\n`)
+              res.write('event: done\ndata: \n\n');
-          // res.write(`data: ${content}\n\n`)
+              res.end();
+              // 存入库
+              await ChatWindow.findByIdAndUpdate(windowId, {
+                $push: {
+                  content: {
+                    obj: 'AI',
+                    value: AIResponse
+                  }
+                },
+                updateTime: Date.now()
+              });
+              return;
+            }
+            try {
+              const json = JSON.parse(data);
+              const content: string = json.choices[0].delta.content || '';
+              res.write(`event: responseData\ndata: ${content.replace(/\n/g, '<br/>')}\n\n`);
+              AIResponse += content;
+            } catch (e) {
+              // maybe parse error
+              controller.error(e);
+              res.end();
+            }
+          }
+        }
+
+        const parser = createParser(onParse);
+        for await (const chunk of chatResponse.data as any) {
+          parser.feed(decoder.decode(chunk));
         }
-      } catch (err) {
-        err;
       }
     });
-
-    responseData.push(`event: done\ndata: \n\n`);
-    // 存入库
-    (async () => {
-      await ChatWindow.findByIdAndUpdate(windowId, {
-        $push: {
-          content: {
-            obj: 'AI',
-            value: AIResponse
-          }
-        },
-        updateTime: Date.now()
-      });
-    })();
   } catch (err: any) {
     let errorText = err;
     if (err.code === 'ECONNRESET') {
@@ -143,17 +142,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       }
     }
     console.error(errorText);
-    responseData.push(`event: serviceError\ndata: ${errorText}\n\n`);
+    res.write(`event: serviceError\ndata: ${errorText}\n\n`);
-
+    res.end();
     // 删除最一条数据库记录, 也就是预发送的那一条
-    (async () => {
+    await ChatWindow.findByIdAndUpdate(windowId, {
-      await ChatWindow.findByIdAndUpdate(windowId, {
+      $pop: { content: 1 },
-        $pop: { content: 1 },
+      updateTime: Date.now()
-        updateTime: Date.now()
+    });
-      });
-    })();
   }
-
-  // 开启 stream 传输
-  stream.pipe(res);
 }

src/pages/chat/index.tsx

@@ -148,6 +148,7 @@ const Chat = () => {
           );
         });
         event.addEventListener('done', () => {
+          console.log('done');
           clearTimeout(timer);
           event.close();
           setChatList((state) =>
@@ -324,7 +325,7 @@ const Chat = () => {
                   height={30}
                 />
               </Box>
-              <Box flex={'1 0 0'} w={0} overflowX={'auto'}>
+              <Box flex={'1 0 0'} w={0} overflowX={'hidden'}>
                 {item.obj === 'AI' ? (
                   <Markdown
                     source={item.value}
@@ -338,16 +339,6 @@ const Chat = () => {
           </Box>
         ))}
       </Box>
-      {/* 空内容提示 */}
-      {/* {
-        chatList.length === 0 && (
-          <>
-          <Card>
-内容太长
-</Card>
-          </>
-        )
-      } */}
       <Box
         m={media('20px auto', '0 auto')}
         w={media('100vw', '100%')}