ChatGPT 打字机消息回复实现原理-null-星河码客

ChatGPT 是一个基于深度学习的大型语言模型，处理自然语言需要大量的计算资源和时间，响应速度肯定比普通的读数据库要慢的多，普通 http 接口等待时间过长，显然并不合适。对于这种单项对话场景，今天给大家讲下ChatGPT回答时候；他的回答逐步显示在页面前后端底层原理是这样实现的

ChagtGPT 将先计算出的数据“推送”给用户，边计算边返回，避免用户因为等待时间过长关闭页面。而这，可以采用 SSE 技术。

Server-Sent Events 服务器推送事件，简称 SSE，是一种服务端实时主动向浏览器推送消息的技术。

SSE 是一种基于 HTTP GET的服务器推送技术，它允许服务器向客户端发送实时更新，而无需客户端发起请求。这与传统的请求-响应模型（如 AJAX）不同，SSE 建立了一种持久的连接，允许服务器推送数据到客户端。浏览器端可供 JavaScript 使用的 EventSource 对象。

直接上代码前端如果请求连接一个EventSource服务呢？、下面以React项目为例

前端代码很简单，分三步骤主要是连接EventSource，在组件挂载时候监听消息

1利用useState 声明EventSource状态t

    /** EventSource  connect**/    const [eventSource, setEventSource] = useState<EventSource>(new EventSource('http://localhost:8081/events'))

2: 封装EventSource方法

const eventSourceRequest = () => {        eventSource.addEventListener('message', function (event) {            // 处理收到的事件数据            console.log('Received message: ' + event.data);        });
        eventSource.addEventListener('error', function (event) {            // 处理连接错误            console.error('EventSource error: ' + event);        });    }

3: 在组件挂载监听EventSource方法

    useEffect(() => {        /** 组件挂载监听**/        eventSourceRequest()        return () => {            // 组件卸载时执行的副作用清理操作            eventSource.close();        };    }, [])

下面介绍下后端的代码

我们使用node 语言，利用express框架编写后端接口

const express = require('express');const app = express();
app.get('/events', (req, res) => {  // 设置响应头  res.setHeader('Content-Type', 'text/event-stream');  res.setHeader('Cache-Control', 'no-cache');  res.setHeader('Connection', 'keep-alive');  res.setHeader('Access-Control-Allow-Origin', '*'); // 跨域访问控制
  // 发送事件数据  const sendEvent = (eventName, data) => {    res.write(`event: ${eventName}\n`);    res.write(`data: ${JSON.stringify(data)}\n\n`); //我们这里使用for循环来模拟一段数据流由服务的主动想用户端发起通信};   for (let i = 0; i < 10; i++) {        sendEvent('message', i);    }
  res.on('close', () => {
  });});
app.listen(3000, () => {  console.log('Server started on port 3000');});

由于SSE不能由用户主动发起请求，只能用户主动监听，如果需要用户端利用SSE与服务端建立多个任务消息通信(大白话:用户发一条消息，服务端就主动发送多条消息，接着用户的二次发起再一次消息，想GPT那样)，这样可以有用户端利用fetch请求访问服务器接口，多次进行new EventSource（）监听即可；不要忘了监听前关闭上一次通信！！！

除了SSE服务器推送事件机制还有一种可以建立用户=> 服务场连接方式就是 WebSocket

这里先简单说下 与SSE区别