第十期 消息发送和markdown显示消息记录
本期内容
- 消息发送和消息订阅
- 等待回复的加载动画（
animation+@keyframes） - markdown 格式消息展示
- 消息列表切换过渡（
<transition-group></transition-group>）
代码实现
等待加载动画
当用户发送完消息等待 ChatGPT 回复的过程中有一些延迟，我们需要写一个文字加载的动画告知用户等待回复。
大约 7 分钟
第九期 Vue3/ElementUI Plus 实现聊天面板
本期内容
详细讲述布局划分，组件抽取，一步步实现下面的结果图。左侧蓝色区域是会话列表，右侧是消息记录。蓝色区域内的一个个小卡片是聊天会话组件，在组件内定义了相关的交互，删除，点击，鼠标悬浮。
- 点击左侧的会话，右侧的内容也会随之发生改变。
- 鼠标放在会话上会弹出删除按钮，点击可以发起删除请求同时发送事件从会话列表中剔除该会话。
- 点击新地聊天可以新增会话。
- 点击右上角的修改按钮可以修改会话名称。
大约 8 分钟
第八期 Stream 请求 ChatGPT/WebSocket 推送响应
本期内容
- 使用 Websocket Stomp 协议配合
@MessageMapping和@Payload开放消息接口，和接收 JSON 请求体。 - 实现私有订阅，服务器将请求的结果响应给对应的用户，而不是广播给所有用户。
- 使用 Proxy 将请求转发给 OpenAI。
- 对代码进行逻辑分层，让代码更清晰。
代码实现
1. WebsocketController 接收消息
大约 8 分钟
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 分钟
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 分钟