chatgpt-app

ChatGPT 聊天 UI，进行了 webSocket 和 http 异常处理，如下异常：

• 消息发出，服务端没有任何返回
• 服务端返回消息，但是消息中断
• 网络中断

使用前需引入 css

import "chatgpt-app/dist/bundle.css";

示例

import React from "react";
import ChatgptApp from "chatgpt-app";
import "chatgpt-app/dist/bundle.css";

const baseConfig = {
  httpAPI: "http://10.60.129.65:3080",
  wsAPI: "ws://10.60.129.65:3080",
};

const onError = (type) => {
  console.log("🚀 ~ type:", type);
};

const App = () => <ChatgptApp baseConfig={baseConfig} onError={onError} />;

export default App;

API

ChatgptApp

参数	说明	类型	默认值	是否必传
baseConfig	基础配置	baseProps	默认值	是
className	组件最外层自定义 class	string	-	否
userId	自定义传给服务端的 userId	string	-	否
onError	websocket 交互过程中的报错回调	(errorType: string, msg?: string) => void	-	是
onCopy	点击复制问题 or 答案的成功回调	(type: 'question' | 'answer') => void	-	否
Question	自定义 Question 组件	({ data }: { data: string }) => JSX.Element	-	否
Answer	自定义 Answer 组件	({ data, isDone, status }: AnswerProps) => JSX.Element	-	否

baseProps

组件必传的基础配置说明

参数	说明	类型	默认值	是否必传
httpAPI	http 请求的 api 地址	string	-	是
wsAPI	websocket 请求的 api 地址	string	-	是
waitTimer	后端无响应等待时长 单位 秒	number	5	否
answeringTimer	websocket message 回复中断等待时长 单位 秒	number	3	否
questionFetchCountMax	websocket message 回复中断 用 http 轮询 最大轮询次数 单位 次	number	10	否
socketHeartbeat	websocket 心跳时间间隔 单位 秒	number	30	否
questionFetchTimer	question 详情接口轮询间隔 单位 秒	number	3	否
httpError	axios 的 http 请求报错回调	(msg: string) => void	-	否

errorType

websocket 交互过程中的报错回调的参数说明

参数	说明	类型	其他
INPUT_EMPTY	点击发送内容为空	string
NOT_LOGIN	token 不存在或 token 过期	string
NET_OFFLINE	网络中断	string
SERVICE_NOT_RESPONDING	点击发送后，后端无响应	string
QUESTION_FETCH_MAX	websocket message 回复中断 用 http 轮询 超过了最大轮询次数	string
INSUFFICIENT_BALANCE	余额不足 or 提问次数不足	string
WS_ERROR	websocket 报错	string	此时回调会有第二个参数 msg，是 websocket 的报错信息

AnswerProps

Answer 组件的 props

参数	说明	类型	其他
data	回答的内容	string
isDone	回答是否结束	boolean
status	回答的状态值	1 | 2 | 3 | 4	1 创建提问未开始回答 2 回答中 3 回答完成 4 回答异常

getAllData

通过 ref 转发获取组件内全部数据

import React, { useRef } from "react";
import ChatgptApp from "chatgpt-app";
import "chatgpt-app/dist/bundle.css";

const chatRef = useRef(null);

const baseConfig = {
  httpAPI: "http://10.60.129.65:3080",
  wsAPI: "ws://10.60.129.65:3080",
};

const onError = (type) => {
  console.log("🚀 ~ type:", type);
};

const fn = () => {
  // 获取组件内全部数据
  console.log(chatRef.current?.getAllData());
};

const App = () => (
  <ChatgptApp ref={chatRef} baseConfig={baseConfig} onError={onError} />
);

export default App;

服务端接口文档

websocket 对接规范

连接

前端发起连接请求，在 query 中加 token 参数，用来识别用户。

ws://127.0.0.1:3080?token=xxx

心跳

前端每隔 30 秒，发送一个心跳：ping，服务端需返回：pong

数据交互

• 前端发送消息
  • 消息体为 json 格式的字符串（json -> string -> server）

参数	说明	必传
op	操作类型，前后端开发前约定好	Y
userId	表示用户唯一标识	N
webId	一组对话中，前端生成这组对话的唯一id	N
webId	问题内容	Y

例：

{
    "op": "question",
    "userId": 123,
    "question": "今天天气怎么样",
    "webId": "xxx111"
}

• 服务端返回消息
  • 消息体为json格式的字符串（json -> string -> web）

参数	说明	必传
op	操作类型，前后端开发前约定好answer	Y
index	服务端返回的回答内容的索引（用来给前端排序，有时可能返回的是乱序）	Y
webId	前端如果发送，后端必须返回	N
answer	服务端返回的回答内容	Y

例：

{
    "op": "answer",
    "answer": "今天下雨",
    "index": 1,
    "webId": "sdf4324lsjdfkl"
}

• 服务端返回状态
  • 服务端处理消息的各个阶段，需返回前端处理状态，参数如下：

参数	说明	必传	类型
op	固定“status”。表示消息是返回状态	Y	string
status	1 服务端收到消息 2 服务端处理消息完成，开始向前端发送消息 3 所有消息发送完毕 4 处理当前消息发生错误	Y	number
webId	前端如果发送，后端必须返回	N	string
isDone	表示此组对话是否已结束。一般status=3、4时isDone=true	Y	boolean

例：

{
    "op": "status",
    "status": 1,
    "isDone": false,
    "webId": "xljlsdf123sfg"
}

• 服务端返回异常
  • 服务端发生错误时，需要返回错误信息，参数如下：

参数	说明	必传	类型
op	固定“error”。表示消息是返回错误	Y	string
message	错误提示内容（约定：如果message为4201，则表示“免费提问额度不足”）	N	string

例：

{
    "op": "error",
    "message": "网络波动"
}

http接口查询问题详情

GET http://127.0.0.1:3080/question/:webId

参数	说明	位置
webId	前端生成的webId	query
Authorization	token	header

Response

{
    "code": 200,
    "data": {
        "id": 20666,
        "webId": "wsl3",
        "userId": 1,
        "anchorId": null,
        "question": "今年哪年",
        "answer": null,
        "questionAt": "2023-03-29T10:01:05.000Z",
        "answerAt": null,
        "needDigest": 0,
        "digest": null,
        "finalQuestion": [
            {
                "role": "system",
                "content": "nihao。\n你好！有什么可以帮助您的吗？\n\n今年哪年。\n今年是2021年。\n\n今年哪年。\n今年是2021年。\n\n今年哪年。\n今年是2021年。"
            },
            {
                "role": "user",
                "content": "今年哪年"
            }
        ],
        "status": 1,
        "error": null
    },
    "error": ""
}