跳至主要內容
第十期 消息发送和markdown显示消息记录

第十期 消息发送和markdown显示消息记录

本期内容

  1. 消息发送和消息订阅
  2. 等待回复的加载动画(animation+ @keyframes
  3. markdown 格式消息展示
  4. 消息列表切换过渡(<transition-group></transition-group>

代码实现

等待加载动画

当用户发送完消息等待 ChatGPT 回复的过程中有一些延迟,我们需要写一个文字加载的动画告知用户等待回复。


起凡大约 7 分钟ChatGPTVue3ElementUIMarkdownWebsocket
第九期 Vue3/ElementUI Plus 实现聊天面板

第九期 Vue3/ElementUI Plus 实现聊天面板

本期内容

详细讲述布局划分,组件抽取,一步步实现下面的结果图。左侧蓝色区域是会话列表,右侧是消息记录。蓝色区域内的一个个小卡片是聊天会话组件,在组件内定义了相关的交互,删除,点击,鼠标悬浮。

  1. 点击左侧的会话,右侧的内容也会随之发生改变。
  2. 鼠标放在会话上会弹出删除按钮,点击可以发起删除请求同时发送事件从会话列表中剔除该会话。
  3. 点击新地聊天可以新增会话。
  4. 点击右上角的修改按钮可以修改会话名称。

起凡大约 8 分钟ChatGPTVue3Markdown
第八期 Stream 请求 ChatGPT/WebSocket 推送响应

第八期 Stream 请求 ChatGPT/WebSocket 推送响应

本期内容

  1. 使用 Websocket Stomp 协议配合@MessageMapping@Payload 开放消息接口,和接收 JSON 请求体。
  2. 实现私有订阅,服务器将请求的结果响应给对应的用户,而不是广播给所有用户。
  3. 使用 Proxy 将请求转发给 OpenAI。
  4. 对代码进行逻辑分层,让代码更清晰。

代码实现

1. WebsocketController 接收消息


起凡大约 8 分钟ChatGPTVue3Stream请求WebsocketStompProxy
ChatGPT二次开发

ChatGPT-Assistant

项目介绍

本次项目是基于ChatGPT的二次开发网站,旨在实现在线聊天的功能。
使用的技术有前端框架Vue3、TypeScript和ElementUI以及后端技术SpringBoot、MongoDB、Spring Data MongoDB和Spring WebSocket。

自我介绍

我是起凡,一名全栈程序员,刚刚毕业于华侨大学。主要技术栈后端SpringBoot,JPA(
Hibernate), MongoDB, Mybatis, SQL等。前端Vue3, Typescript, Taro小程序, Uni-App等。


起凡大约 4 分钟ChatGPTMongoDBVue3TypescriptElementUIWebSocket
ChatGPT Next Web 搭建教程

ChatGPT Next Web 搭建教程

1.2 介绍

1.2.1 自我介绍

我是起凡,一名全栈程序员,刚刚毕业于华侨大学。主要技术栈后端SpringBoot,Jpa, MongoDb等。前端Vue3, Typescript, Taro小程序。

1.2.2 ChatGPT Next Web 介绍

ChatGPT Next Web可以使用OpenAI官方提供的API。比如ChatGPT3.5模型,ChatGPT4.0模型等等。并且提供了一个WEB界面将我们输入的内容转发给OpenAI。同时支持多聊天窗口会话等。


起凡大约 3 分钟ChatGPTProxyV2raADocker