【人工智能】揭秘 ChatGPT 的“打字机”流逝返回背后技术 —— 深度解析 SSE 与 Fetch 实现

XinZong
577 阅读11分钟

引言

随着人工智能技术的快速发展，智能聊天机器人如 ChatGPT 已成为人们日常生活和工作中的得力助手。作为用户体验的关键部分，ChatGPT 的“打字机”式回复不仅增加了互动的真实感，还提升了用户的参与感和满意度。那么，这种逐字呈现的效果是如何实现的呢？

本文将带你深入解析 ChatGPT 消息回复的实现原理，重点介绍 Server-Sent Events (SSE) 技术，并对比传统的 WebSockets 以及 modern 的 Fetch API 的应用场景和优势。同时，通过详细的代码示例和实践指南，帮助开发者轻松实现类似的实时消息推送效果。📚

快速体验中文版GPT - ChatMoss & ChatGPT中文版O1模型

在这里插入图片描述

ChatGPT 的“打字机”效果概述

在使用 ChatGPT 时，输入问题后，你会看到它的回复是逐渐出现的，就像真人在打字一样。这种效果不仅增强了互动的真实感，还提供了及时的反馈，避免用户因等待时间过长而失去耐心。那么，这背后到底采用了哪些技术？

实际上，这种“打字机”效果主要依赖于实时数据推送技术，确保服务器能够逐步将消息传输到浏览器，而无需用户主动刷新或等待整个消息生成完成。常见的实现方式包括 Server-Sent Events (SSE) 和 WebSockets。而在某些情况下，使用 Fetch API 也可以达到类似的效果。

关键点

  • 实时性：消息逐步传输，提升用户体验。
  • 效率：避免一次性传输大量数据，减少延迟。
  • 兼容性：选择合适的技术确保广泛的浏览器支持。

接下来，我们将深入探讨这些技术的原理和实现方法。

Server-Sent Events (SSE) 技术详解

Server-Sent Events（简称 SSE）是一种允许服务器主动向客户端推送数据的技术，基于 HTTP 协议，主要用于实现实时更新的应用场景。相较于 WebSockets，SSE 更加轻量级，适用于单向通信，如实时消息更新、股票行情推送等。

快速体验中文版GPT - ChatMoss & ChatGPT中文版

3.1 SSE 的基本原理

SSE 通过浏览器的 EventSource 接口，与服务器建立一个持久的 HTTP 连接。服务器可以通过该连接持续向客户端发送数据流，客户端接收到数据后，通过事件监听进行处理。这种方式非常适合需要实时更新数据但不需要双向通信的场景。

基本流程：

  1. 建立连接：客户端创建一个 EventSource 对象，指向服务器的 SSE 端点。
  2. 数据传输：服务器通过该连接不断发送事件数据。
  3. 事件处理：客户端通过监听事件，实时处理接收到的数据。

3.2 SSE 与 WebSockets 的比较

虽然 SSE 和 WebSockets 都用于实现实时通信，但它们在实现机制和应用场景上存在显著差异。

特性SSEWebSockets
协议基础基于 HTTP/1.1基于 TCP
通信方式单向（服务端 -> 客户端）双向（客户端 <-> 服务端）
实现复杂度简单，易于集成相对复杂，需要处理连接和消息传递
连接数量限制HTTP/1.1 默认为 6 个连接，HTTP/2 可协商100+理论上无限制，但实际受限于服务器和网络条件
重连机制内置自动重连，支持 retry 参数需要自行实现重连逻辑
消息类型仅支持文本或 Base64 编码的二进制支持多种数据类型，包括二进制
自定义事件类型支持不直接支持，需要自行管理事件类型

3.3 SSE 的服务端实现

实现 SSE 的服务端相对简单，主要步骤包括：

  1. 设置响应头：指定 Content-Type 为 text/event-stream，并设置 Cache-Control: no-cache 以及 Connection: keep-alive。
  2. 保持连接：通过持续发送数据，保持 HTTP 连接开启。
  3. 格式化消息：按 SSE 协议格式发送消息，每条消息以 \n\n 结尾。

Node.js 示例：

const http = require('http');
const fs = require('fs');

http.createServer((req, res) => {
  const url = req.url;
  if (url === '/' || url === '/index.html') {
    fs.readFile('index.html', (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Error loading');
      } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      }
    });
  } else if (url.includes('/sse')) {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*', // 允许跨域
    });

    let id = 0;
    const intervalId = setInterval(() => {
      const data = `data: 这是第 ${id} 条消息\n\n`;
      res.write(data);
      id++;
      if (id >= 10) { // 示例：发送10条消息后关闭
        clearInterval(intervalId);
        res.end();
      }
    }, 1000);

    // 客户端关闭连接时，清理资源
    req.on('close', () => {
      clearInterval(intervalId);
      res.end();
    });
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3000);

console.log('SSE Server running at http://localhost:3000/');

3.4 SSE 的浏览器端实现

客户端通过 EventSource 对象与服务端建立 SSE 连接，并监听相应的事件进行数据处理。

HTML 示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
</head>
<body>
  <h1>SSE 实时消息推送</h1>
  <button onclick="connectSSE()">建立 SSE 连接</button>  
  <button onclick="closeSSE()">断开 SSE 连接</button>
  <div id="messages"></div>

  <script>
    let eventSource;

    function connectSSE() {
      eventSource = new EventSource('http://localhost:3000/sse');

      eventSource.onmessage = function(event) {
        const messages = document.getElementById('messages');
        messages.innerHTML += `<p>${event.data}</p>`;
      };

      eventSource.onopen = function() {
        console.log('SSE 连接已建立');
      };

      eventSource.onerror = function() {
        console.log('SSE 连接发生错误');
      };
    }

    function closeSSE() {
      if (eventSource) {
        eventSource.close();
        console.log('SSE 连接已关闭');
      }
    }
  </script>
</body>
</html>

通过上述代码，用户点击“建立 SSE 连接”按钮后，浏览器会向服务器发起 SSE 请求，服务器每秒推送一条消息，客户端实时接收并展示这些消息。 在这里插入图片描述

使用 Fetch API 实现“打字机”效果

虽然 SSE 能很好地实现实时数据推送，但在某些需要更灵活控制的场景下，使用 Fetch API 也是一种可行的方案。通过 Fetch API 的流式响应特性，可以模拟 SSE 的实时数据推送效果。

快速体验中文版GPT - ChatMoss & ChatGPT中文版

4.1 Fetch API 的基本原理

Fetch API 是现代浏览器提供的一种用于发起网络请求的接口，支持 Promise 和流式处理。通过使用 ReadableStream，开发者可以逐步读取服务器响应的数据，实现实时处理。

4.2 基于 Fetch 的消息流处理

利用 Fetch API 的流式响应，可以在客户端逐步处理服务器发送的数据，从而实现类似“打字机”效果的实时消息展示。

服务端实现（Node.js）：

const http = require('http');
const fs = require('fs');

http.createServer((req, res) => {
  const url = req.url;
  if (url === '/' || url === '/index-fetch.html') {
    fs.readFile('index-fetch.html', (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Error loading');
      } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      }
    });
  } else if (url.includes('/fetch-sse')) {
    let body = '';
    req.on('data', chunk => {
      body += chunk;
    });

    res.writeHead(200, {
      'Content-Type': 'application/json',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*',
    });

    let id = 0;
    const intervalId = setInterval(() => {
      const data = JSON.stringify({ id, time: new Date().toISOString(), body: JSON.parse(body) });
      res.write(`${data}\n`);
      id++;
      if (id >= 10) {
        clearInterval(intervalId);
        res.end();
      }
    }, 1000);

    req.on('close', () => {
      clearInterval(intervalId);
      res.end();
    });
  } else {
    res.writeHead(404);
    res.end();
  }
}).listen(3001);

console.log('Fetch SSE Server running at http://localhost:3001/');

浏览器端实现（HTML）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fetch SSE Demo</title>
</head>
<body>
  <h1>Fetch API 实时消息推送</h1>
  <button onclick="connectFetch()">建立 Fetch 连接</button>
  <button onclick="closeFetch()">断开 Fetch 连接</button>
  <div id="messages"></div>

  <script>
    let controller;

    function connectFetch() {
      controller = new AbortController();
      const signal = controller.signal;

      fetch('http://localhost:3001/fetch-sse', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: '你好，服务器！' }),
        signal: signal
      })
      .then(response => {
        if (!response.body) {
          throw new Error('ReadableStream 不受支持');
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        const messages = document.getElementById('messages');

        function read() {
          return reader.read().then(({ done, value }) => {
            if (done) {
              console.log('Fetch 连接已关闭');
              return;
            }
            const chunk = decoder.decode(value, { stream: true });
            const data = JSON.parse(chunk);
            messages.innerHTML += `<p>${data.id} - ${data.time} - 参数：${JSON.stringify(data.body)}</p>`;
            return read();
          });
        }

        return read();
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch 连接已中止');
        } else {
          console.error('Fetch 连接错误:', error);
        }
      });
    }

    function closeFetch() {
      if (controller) {
        controller.abort();
        controller = undefined;
        console.log('Fetch 连接已关闭');
      }
    }
  </script>
</body>
</html>

在上述示例中，客户端通过 Fetch API 发起 POST 请求，服务器端将响应以流式方式发送，每秒发送一条消息。客户端通过读取响应流，实时更新页面内容，实现“打字机”效果。 在这里插入图片描述

4.3 Fetch 与 SSE 的对比分析

特性SSEFetch
通信方式单向（服务端 -> 客户端）单向（服务端 -> 客户端）
双向通信不支持不支持（需要结合其他技术实现）
灵活性固定的事件类型和格式更加灵活，可以自定义请求和数据格式
控制能力较少，主要依赖浏览器和 SSE 协议规范更高，开发者可以控制数据流的读取和处理方式
复杂性简单，内置自动重连机制较复杂，需要手动处理数据流和异常情况
兼容性广泛支持，除了 IE 外的现代浏览器均支持同样广泛支持，现代浏览器均支持流式响应和 ReadableStream

总结：

  • SSE 适用于需要简单、稳定的单向实时数据推送场景，开发者无需过多关注底层连接管理和数据格式。
  • Fetch API 更加灵活，适用于需要自定义数据处理和更高控制能力的场景，但实现相对复杂，需要手动处理数据流和异常情况。

实践案例：构建一个实时消息推送系统

为了更好地理解 SSE 和 Fetch 的应用，下面将通过一个实际案例，演示如何构建一个简单的实时消息推送系统，实现类似 ChatGPT 的“打字机”效果。

5.1 服务端实现

使用 Node.js 构建服务端，提供 SSE 和 Fetch 两种接口，分别对应上述两种实现方式。

const http = require('http');
const fs = require('fs');

// 通用函数：发送消息
function sendMessage(res, id, content) {
  const data = {
    id,
    time: new Date().toISOString(),
    content
  };
  res.write(`data: ${JSON.stringify(data)}\n\n`);
}

http.createServer((req, res) => {
  const url = req.url;

  // 服务端主页
  if (url === '/' || url === '/index.html') {
    fs.readFile('index.html', (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Error loading');
      } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      }
    });
  } 
  // SSE 接口
  else if (url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*',
    });

    let id = 0;
    const intervalId = setInterval(() => {
      sendMessage(res, id, `这是第 ${id} 条 SSE 消息`);
      id++;
      if (id >= 20) {
        clearInterval(intervalId);
        res.end();
      }
    }, 1000);

    req.on('close', () => {
      clearInterval(intervalId);
      res.end();
    });
  } 
  // Fetch-SSE 接口
  else if (url === '/fetch-sse' && req.method === 'POST') {
    let body = '';
    req.on('data', chunk => {
      body += chunk;
    });

    res.writeHead(200, {
      'Content-Type': 'application/json',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
      'Access-Control-Allow-Origin': '*',
    });

    let id = 0;
    const intervalId = setInterval(() => {
      const parsedBody = JSON.parse(body);
      const messageContent = `这是第 ${id} 条 Fetch-SSE 消息，参数：${parsedBody.content}`;
      res.write(`${JSON.stringify({
        id,
        time: new Date().toISOString(),
        content: messageContent
      })}\n`);
      id++;
      if (id >= 20) {
        clearInterval(intervalId);
        res.end();
      }
    }, 1000);

    req.on('close', () => {
      clearInterval(intervalId);
      res.end();
    });
  } 
  // 未知路径
  else {
    res.writeHead(404);
    res.end();
  }
}).listen(8080);

console.log('Real-time Message Server running at http://localhost:8080/');

5.2 浏览器端实现

HTML 文件（index.html）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>实时消息推送系统</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    button { margin-right: 10px; padding: 10px; }
    #messages { margin-top: 20px; max-height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
    p { margin: 5px 0; }
  </style>
</head>
<body>
  <h1>实时消息推送系统</h1>
  
  <div>
    <h2>SSE 实现</h2>
    <button onclick="connectSSE()">建立 SSE 连接</button>
    <button onclick="closeSSE()">断开 SSE 连接</button>
    <div id="sse-messages"></div>
  </div>
  
  <hr />
  
  <div>
    <h2>Fetch 实现</h2>
    <button onclick="connectFetch()">建立 Fetch 连接</button>
    <button onclick="closeFetch()">断开 Fetch 连接</button>
    <div id="fetch-messages"></div>
  </div>

  <script>
    // SSE 实现
    let eventSource;

    function connectSSE() {
      if (eventSource) {
        console.warn('SSE 已经连接');
        return;
      }
      eventSource = new EventSource('http://localhost:8080/sse');

      eventSource.onmessage = function(event) {
        const messages = document.getElementById('sse-messages');
        const data = JSON.parse(event.data);
        messages.innerHTML += `<p>${data.time}: ${data.content}</p>`;
      };

      eventSource.onopen = function() {
        console.log('SSE 连接已建立');
      };

      eventSource.onerror = function() {
        console.log('SSE 连接发生错误');
        eventSource.close();
        eventSource = null;
      };
    }

    function closeSSE() {
      if (eventSource) {
        eventSource.close();
        eventSource = null;
        console.log('SSE 连接已关闭');
      }
    }

    // Fetch 实现
    let fetchController;

    function connectFetch() {
      if (fetchController) {
        console.warn('Fetch 已经连接');
        return;
      }
      fetchController = new AbortController();
      const signal = fetchController.signal;

      fetch('http://localhost:8080/fetch-sse', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: 'Fetch 请求的参数' }),
        signal: signal
      })
      .then(response => {
        if (!response.body) {
          throw new Error('ReadableStream 不支持');
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        const messages = document.getElementById('fetch-messages');

        function read() {
          return reader.read().then(({ done, value }) => {
            if (done) {
              console.log('Fetch 连接已关闭');
              return;
            }
            const chunk = decoder.decode(value, { stream: true });
            const data = JSON.parse(chunk);
            messages.innerHTML += `<p>${data.time}: ${data.content}</p>`;
            return read();
          });
        }

        return read();
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch 连接已中止');
        } else {
          console.error('Fetch 连接错误:', error);
        }
      });

      console.log('Fetch 连接已建立');
    }

    function closeFetch() {
      if (fetchController) {
        fetchController.abort();
        fetchController = null;
        console.log('Fetch 连接已关闭');
      }
    }
  </script>
</body>
</html>

操作步骤：

  1. 启动服务端：在命令行中执行 node server.js，确保服务端在 http://localhost:8080/ 运行。
  2. 打开浏览器：访问 http://localhost:8080/，你将看到两个部分，分别展示 SSE 和 Fetch 的实时消息推送效果。
  3. 测试连接：点击相应的“建立连接”按钮，观察消息逐步出现的效果；点击“断开连接”按钮，停止消息推送。

通过上述实践案例，你可以直观地感受到 SSE 和 Fetch 在实时消息推送中的不同应用场景和效果。

快速体验中文版GPT - ChatMoss & ChatGPT中文版

SSE 与 Fetch 的兼容性与优化

6.1 浏览器兼容性

Server-Sent Events（SSE）和 Fetch API 都得到了现代浏览器的广泛支持，但在某些旧版本浏览器中可能存在兼容性问题。

SSE 兼容性：

  • 支持：Chrome、Firefox、Edge、Safari 等现代浏览器均支持 SSE。
  • 不支持：IE（包括 IE11）及部分旧版浏览器不支持 SSE。

Fetch API 兼容性：

  • 支持：Chrome、Firefox、Edge、Safari 等现代浏览器均支持 Fetch API。
  • 不支持：IE 不支持 Fetch API，但可以通过 polyfill 实现兼容。

6.2 兼容性解决方案

对于不支持 SSE 的浏览器，可以考虑以下解决方案：

  1. 使用 Polyfill：通过引入 SSE Polyfill，如 eventsource-polyfill 来模拟 SSE 功能。
  2. 回退机制：在检测到浏览器不支持 SSE 时，自动切换到轮询（Polling）或长轮询（Long Polling）等替代方案。

示例代码：

if (typeof(EventSource) !== "undefined") {
  // 支持 SSE
  const eventSource = new EventSource('/sse');
  // 处理事件
} else {
  // 不支持 SSE，使用轮询或引入 Polyfill
  // 例如使用轮询的方式
  setInterval(() => {
    fetch('/polling-endpoint')
      .then(response => response.json())
      .then(data => {
        // 处理数据
      });
  }, 5000);
}

对于 Fetch API 的兼容性，类似地，可以引入 whatwg-fetch 等 polyfill 来支持不兼容的浏览器。

6.3 性能优化建议

在实际应用中，为了确保实时消息推送系统的性能和稳定性，建议考虑以下优化策略：

  1. 连接管理：合理控制客户端与服务端的连接数量，避免过多的并发连接导致服务器压力过大。
  2. 心跳机制：定期发送心跳包，保持连接活跃，及时检测和恢复断线连接。
  3. 数据压缩：对于大量或频繁的数据传输，启用 gzip 压缩以减少带宽占用。
  4. 错误处理：在客户端实现完善的错误处理和重连机制，确保系统的高可用性。
  5. 资源释放：在连接断开时，及时清理相关资源，防止内存泄漏。

示例代码（心跳机制）：

// 服务端定期发送注释行作为心跳
setInterval(() => {
  res.write(': heartbeat\n\n');
}, 30000); // 每30秒发送一次

客户端处理心跳：

eventSource.onmessage = function(event) {
  if (event.data) {
    // 处理实际消息
  }
};

// 处理心跳（注释行）
eventSource.addEventListener('heartbeat', function(event) {
  console.log('Heartbeat received');
});

关键收获：

  • 了解 SSE 和 Fetch 的基本原理：掌握两者在实时数据推送中的应用和实现方式。
  • 掌握服务端和客户端的实现方法：通过实际代码示例，学习如何在 Node.js 和浏览器端搭建实时消息推送系统。
  • 比较两者的优缺点：根据具体需求选择合适的技术方案，优化系统性能和用户体验。
  • 解决兼容性问题：通过 Polyfill 和回退机制，确保系统在不同浏览器中的稳定运行。
  • 优化实时通信系统：应用心跳机制、错误处理和资源管理策略，提升系统的可靠性和可维护性。

更多文献

【Cursor】揭秘Cursor：如何免费无限使用这款AI编程神器？

【VScode】揭秘编程利器：教你如何用“万能@符”提升你的编程效率！ 全面解析ChatMoss & ChatGPT中文版

【VScode】VSCode中的智能编程利器，全面揭秘ChatMoss & ChatGPT中文版

结语

实时通信技术在现代 Web 应用中扮演着至关重要的角色，尤其是在提升用户体验方面。通过深入理解和灵活应用 SSE 与 Fetch API，你可以轻松打造出高效、稳定且用户友好的实时消息推送系统，赋能你的应用程序迈向新的高度。让我们一起探索更多前沿技术，共同推动 Web 开发的无限可能！🚀

avatar
文章
阅读
粉丝