Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 65da4653 by Archer
Options

feat: stream流响应

parent 26888e85
Showing with 73 additions and 88 deletions
next.config.js
...@@ -6,17 +6,7 @@ const isDev = process.env.NODE_ENV === 'development'; ...@@ -6,17 +6,7 @@ const isDev = process.env.NODE_ENV === 'development';
const nextConfig = { const nextConfig = {
output: 'standalone', output: 'standalone',
reactStrictMode: false, reactStrictMode: false,
compress: true, compress: true
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'docgpt-1301319986.cos.ap-shanghai.myqcloud.com',
port: '',
pathname: '/**'
}
]
}
}; };
module.exports = nextConfig; module.exports = nextConfig;
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"axios": "^1.3.3", "axios": "^1.3.3",
"crypto": "^1.0.1", "crypto": "^1.0.1",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"eventsource-parser": "^0.1.0",
"formidable": "^2.1.1", "formidable": "^2.1.1",
"framer-motion": "^9.0.6", "framer-motion": "^9.0.6",
"hyperdown": "^2.4.29", "hyperdown": "^2.4.29",
......
pnpm-lock.yaml
...@@ -24,6 +24,7 @@ specifiers: ...@@ -24,6 +24,7 @@ specifiers:
dayjs: ^1.11.7 dayjs: ^1.11.7
eslint: 8.34.0 eslint: 8.34.0
eslint-config-next: 13.1.6 eslint-config-next: 13.1.6
eventsource-parser: ^0.1.0
formidable: ^2.1.1 formidable: ^2.1.1
framer-motion: ^9.0.6 framer-motion: ^9.0.6
husky: ^8.0.3 husky: ^8.0.3
...@@ -65,6 +66,7 @@ dependencies: ...@@ -65,6 +66,7 @@ dependencies:
axios: registry.npmmirror.com/axios/1.3.3 axios: registry.npmmirror.com/axios/1.3.3
crypto: registry.npmmirror.com/crypto/1.0.1 crypto: registry.npmmirror.com/crypto/1.0.1
dayjs: registry.npmmirror.com/dayjs/1.11.7 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 formidable: registry.npmmirror.com/formidable/2.1.1
framer-motion: registry.npmmirror.com/framer-motion/9.0.6_biqbaboplfbrettd7655fr4n2y framer-motion: registry.npmmirror.com/framer-motion/9.0.6_biqbaboplfbrettd7655fr4n2y
hyperdown: registry.npmmirror.com/hyperdown/2.4.29 hyperdown: registry.npmmirror.com/hyperdown/2.4.29
...@@ -4553,6 +4555,13 @@ packages: ...@@ -4553,6 +4555,13 @@ packages:
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true 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: 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} 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 name: execa
......
src/components/Markdown/index.module.scss
...@@ -369,7 +369,7 @@ ...@@ -369,7 +369,7 @@
} }
pre code { pre code {
background-color: #222; background-color: #222 !important;
color: #fff; color: #fff;
width: 100%; 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'; 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 ...@@ -26,8 +26,8 @@ const Markdown = ({ source, isChatting }: { source: string; isChatting: boolean
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || ''); const match = /language-(\w+)/.exec(className || '');
const code = String(children).replace(/\n$/, ''); 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 <Flex
py={2} py={2}
px={5} px={5}
......
src/pages/api/chat/chatGpt.ts
import type { NextApiRequest, NextApiResponse } from 'next'; import type { NextApiRequest, NextApiResponse } from 'next';
import { Readable } from 'stream'; import { createParser, ParsedEvent, ReconnectInterval } from 'eventsource-parser';
import { connectToDatabase, ChatWindow } from '@/service/mongo'; import { connectToDatabase, ChatWindow } from '@/service/mongo';
import type { ModelType } from '@/types/model'; import type { ModelType } from '@/types/model';
import { getOpenAIApi, authChat } from '@/service/utils/chat'; import { getOpenAIApi, authChat } from '@/service/utils/chat';
...@@ -9,21 +9,13 @@ import { ChatItemType } from '@/types/chat'; ...@@ -9,21 +9,13 @@ import { ChatItemType } from '@/types/chat';
/* 发送提示词 */ /* 发送提示词 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) { 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.on('close', () => {
res.end(); res.end();
stream.destroy();
}); });
const { chatId, windowId } = req.query as { chatId: string; windowId: string }; const { chatId, windowId } = req.query as { chatId: string; windowId: string };
...@@ -58,16 +50,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -58,16 +50,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
const formatPrompts: ChatCompletionRequestMessage[] = filterPrompts.map( const formatPrompts: ChatCompletionRequestMessage[] = filterPrompts.map(
(item: ChatItemType) => ({ (item: ChatItemType) => ({
role: map[item.obj], role: map[item.obj],
content: item.value.replace(/(\n| )/g, '') content: item.value.replace(/\n/g, ' ')
}) })
); );
// 第一句话，强调代码类型 // 第一句话，强调代码类型
formatPrompts.unshift({ formatPrompts.unshift({
role: ChatCompletionRequestMessageRoleEnum.System, role: ChatCompletionRequestMessageRoleEnum.System,
content: content: '如果你想返回代码，请务必声明代码的类型！'
'If the content is code or code blocks, please mark the code type as accurately as possible!'
}); });
// 获取 chatAPI // 获取 chatAPI
const chatAPI = getOpenAIApi(userApiKey); const chatAPI = getOpenAIApi(userApiKey);
const chatResponse = await chatAPI.createChatCompletion( const chatResponse = await chatAPI.createChatCompletion(
...@@ -78,48 +68,57 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -78,48 +68,57 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
messages: formatPrompts, messages: formatPrompts,
stream: true 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 = ''; 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) { } catch (err: any) {
let errorText = err; let errorText = err;
if (err.code === 'ECONNRESET') { if (err.code === 'ECONNRESET') {
...@@ -143,17 +142,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -143,17 +142,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
} }
} }
console.error(errorText); 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 = () => { ...@@ -148,6 +148,7 @@ const Chat = () => {
); );
}); });
event.addEventListener('done', () => { event.addEventListener('done', () => {
console.log('done');
clearTimeout(timer); clearTimeout(timer);
event.close(); event.close();
setChatList((state) => setChatList((state) =>
...@@ -324,7 +325,7 @@ const Chat = () => { ...@@ -324,7 +325,7 @@ const Chat = () => {
height={30} height={30}
/> />
</Box> </Box>
<Box flex={'1 0 0'} w={0} overflowX={'auto'}> <Box flex={'1 0 0'} w={0} overflowX={'hidden'}>
{item.obj === 'AI' ? ( {item.obj === 'AI' ? (
<Markdown <Markdown
source={item.value} source={item.value}
...@@ -338,16 +339,6 @@ const Chat = () => { ...@@ -338,16 +339,6 @@ const Chat = () => {
</Box> </Box>
))} ))}
</Box> </Box>
{/* 空内容提示 */}
{/* {
chatList.length === 0 && (
<>
<Card>
内容太长
</Card>
</>
)
} */}
<Box <Box
m={media('20px auto', '0 auto')} m={media('20px auto', '0 auto')}
w={media('100vw', '100%')} w={media('100vw', '100%')}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment