第

JavaScript基于ChatGPT实现打字机消息回复

目录1背景2简介3服务端实现3.1协议3.2消息格式3.2.1event3.2.2id3.2.3retry3.2.4data3.3示例4浏览器API4.1建立连接4.2监听事件5实践5.1服务端5.2浏览器6兼容性7总结

1背景

在使用ChatGPT时，发现输入prompt后，页面是逐步给出回复的，起初以为使用了WebSckets持久化连接协议，查看其网络请求，发现这个接口的通信方式并非传统的http接口或者WebSockets，而是基于EventStream的事件流，像打字机一样，一段一段的返回答案。

ChatGPT是一个基于深度学习的大型语言模型，处理自然语言需要大量的计算资源和时间，响应速度肯定比普通的读数据库要慢的多，普通http接口等待时间过长，显然并不合适。对于这种单项对话场景，ChagtGPT将先计算出的数据推送给用户，边计算边返回，避免用户因为等待时间过长关闭页面。而这，正式采用了SSE技术。

2简介

Server-SentEvents服务器推送事件，简称SSE，是一种服务端实时主动向浏览器推送消息的技术。SSE是HTML5中一个与通信相关的API，主要由两部分组成：服务端与浏览器端的通信协议（HTTP协议）及浏览器端可供JavaScript使用的EventSource对象。

从服务端主动向浏览器实时推送消息这一点来看，该API与WebSocketsAPI有一些相似之处。但是，该API与WebSockersAPI的不同之处在于：

Server-SentEventsAPIWebSocketsAPI基于HTTP协议基于TCP协议单工，只能服务端单向发送消息全双工，可以同时发送和接收消息轻量级，使用简单相对复杂内置断线重连和消息追踪的功能不在协议范围内，需手动实现文本或使用Base64编码和gzip压缩的二进制消息类型广泛支持自定义事件类型不支持自定义事件类型连接数HTTP/1.16个，HTTP/2可协商（默认100）连接数无限制

3服务端实现

3.1协议

SSE协议非常简单，本质是浏览器发起http请求，服务器在收到请求后，返回状态与数据，并附带以下headers：jsContent-Type:text/event-streamCache-Control:no-cacheConnection:keep-alive-SSEAPI规定推送事件流的MIME类型为text/event-stream。-必须指定浏览器不缓存服务端发送的数据，以确保浏览器可以实时显示服务端发送的数据。-SSE是一个一直保持开启的TCP连接，所以Connection为keep-alive。

3.2消息格式

EventStream（事件流）为UTF-8格式编码的文本或使用Base64编码和gzip压缩的二进制消息。每条消息由一行或多行字段（event、id、retry、data）组成，每个字段组成形式为：字段名:字段值。字段以行为单位，每行一个（即以\n结尾）。以冒号开头的行为注释行，会被浏览器忽略。每次推送，可由多个消息组成，每个消息之间以空行分隔（即最后一个字段以\n\n结尾）。