基于SSE实现chptgpt

1、EventSource是什么？

EventSource 是一个浏览器内置的 JavaScript API，用于实现服务器推送事件（Server-Sent Events, SSE） 技术。它允许服务器通过 HTTP 连接主动向客户端（浏览器）推送数据，实现实时通信。

特点：

• 单向通信：只能从服务器向客户端发送数据
• 基于 HTTP：使用标准的 HTTP 协议，不需要特殊协议
• 文本格式：只支持 UTF-8 文本数据
• 自动重连：内置连接断开自动重连机制
• 简单易用：API 非常简单，几行代码即可实现

数据格式规范：

event: message
data: 这是一条消息
id: 12345
retry: 3000

• event：事件类型（可选，默认为 message）
• data：消息内容（必需，可以是多行）
• id：事件 ID（可选，用于断线重连）
• retry：重连延迟时间（可选，毫秒）

唯一需要注意的是 HTTP response 里header Content-Type 的值是 text/event-stream

2、基于SSE实现gpt

a、开通账户

deepseek后台 重置完后可以创建自己key

b、搭建小型服务器

基于express使用openai库来初始化

需要设置响应头

c、搭建前端

安装vue-element-plus-x

我这里使用到了EditorSender 编辑输入框 、BubbleList 气泡列表两个组件

3、成品