ChatGPT流式输出原理揭秘

37手游后端团队
39 阅读9分钟

1. 引言

ChatGPT在处理用户输入时，不是一次性生成整个回答，而是逐字逐句地生成。这种处理方式允许ChatGPT快速响应，同时逐步细化回答，为用户提供了一种类似于打字机的视觉效果，使得对话过程更加流畅和自然。

它是基于Server-Sent Events（SSE），这是一种在实现流式输出中非常常用的技术。

2. 流式输出概述

流式输出是一种在网络应用中用于实时传输数据的技术。它允许服务器向客户端持续发送数据流，而无需客户端发出额外的请求。这种方式与传统的请求-响应模式不同，传统模式下客户端需要定期向服务器发送请求来获取更新的数据，而流式输出则可以实现服务器主动向客户端推送数据，从而实现实时更新。

在网络应用中，流式输出具有重要的意义。首先，它可以实现实时性数据的传输，使用户能够及时获取到最新的信息，例如实时股票行情、即时通知等。其次，流式输出能够提高网络应用的效率和性能，减少了不必要的请求-响应往返时间，降低了服务器和客户端的负载。最重要的是，流式输出可以极大地改善用户体验，使用户感到应用更加响应和流畅。

举个例子，考虑一个实时聊天应用，如果采用传统的请求-响应模式，用户需要定时轮询服务器以获取新消息，这会导致延迟和资源浪费。而采用流式输出技术，服务器可以实时向客户端推送新消息，用户可以立即看到新的聊天内容，提高了聊天的实时性和用户体验。因此，流式输出在实时数据传输和用户体验方面都具有重要的意义。

3. Server-Sent Events（SSE）技术介绍

a. 原理和工作机制

SSE技术是一种在Web应用中实现服务器向客户端推送数据的技术。其原理和工作机制非常简单，基于HTTP协议。当客户端向服务器发起一个SSE连接请求后，服务器会保持连接打开，并周期性地向客户端发送数据。这些数据以文本流的形式传输，并使用特殊的事件流格式发送到客户端。客户端通过监听这个事件流，并在接收到新的数据时进行处理，从而实现实时更新。

b. 与传统轮询的对比

与传统的轮询方式相比，SSE技术在性能和资源消耗方面有明显的优势。在传统轮询中，客户端需要不断地向服务器发送请求来获取更新的数据，这会导致大量的无效请求和网络流量，并且增加了服务器的负载。而使用SSE技术，服务器可以主动向客户端推送数据，减少了不必要的请求-响应往返时间，降低了网络延迟和服务器负载。此外，SSE技术还能够提高实时性，客户端可以立即收到新的数据，而不需要等待下一次轮询。

c. 支持的浏览器和兼容性

SSE技术在现代浏览器中得到了广泛的支持，包括Chrome、Firefox、Safari等主流浏览器。此外，SSE技术也在移动平台上有良好的兼容性，可以在iOS和Android等系统上正常工作。虽然早期的Internet Explorer不支持SSE技术，但是通过使用polyfill等兼容性解决方案，也可以实现在不支持SSE的浏览器上使用该技术。

4. SSE技术的实现步骤

a. 建立连接：

   - 客户端向服务器发出SSE连接请求，请求的URL通常以.sse或.event-stream为后缀，服务器会将请求保持打开状态，等待数据的到来。

b. 服务器端设置响应头：

   - 服务器端在接收到SSE连接请求后，需要设置响应头Content-Type: text/event-stream，以表明响应的类型是SSE流。此外，还需要设置Cache-Control为no-cache，以防止缓存响应。

c. 推送数据：

   - 一旦建立了连接并设置了正确的响应头，服务器就可以通过这个连接向客户端推送数据了。数据以一行一行的形式发送，每一行代表一个事件，事件由字段和字段值组成，字段和字段值之间以冒号分隔。例如：

     event: message  
     data: Hello, world!  
       
     event: notification  
     data: New notification received

   - 客户端收到这些事件后，可以根据事件类型和数据进行相应的处理，例如更新界面内容或触发相应的操作。

示例

以下是一个简单的示例，展示了如何实现后端服务器以提供SSE服务，并使用HTML和JavaScript实现前端页面来接收并显示服务器推送的数据。

package main

import (  
    "fmt"  
    "net/http"  
    "time"  
)

func handleSSE(w http.ResponseWriter, r *http.Request) {  
    // 设置响应头，表明响应的类型是SSE流  
    w.Header().Set("Content-Type", "text/event-stream")  
    w.Header().Set("Cache-Control", "no-cache")  
    w.Header().Set("Connection", "keep-alive")

    // 无限循环，向客户端推送数据  
    for {  
        // 向客户端发送事件  
        fmt.Fprintf(w, "data: %s\n\n", time.Now().Format("2006-01-02 15:04:05"))  
        w.(http.Flusher).Flush() // 立即将数据发送到客户端

        // 等待一秒  
        time.Sleep(1 * time.Second)  
    }  
}

func main() {  
    http.HandleFunc("/sse", handleSSE)  
    http.Handle("/", http.FileServer(http.Dir("./static"))) // 静态文件服务器，用于提供HTML页面  
    fmt.Println("Server is running at :8080")  
    http.ListenAndServe(":8080", nil)  
}  

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SSE Example</title>  
</head>  
<body>  
    <div id="sse-data"></div>

    <script>  
        // 创建一个EventSource对象，指向后端SSE服务的URL  
        const eventSource = new EventSource('/sse');

        // 监听message事件，当服务器推送新数据时触发  
        eventSource.addEventListener('message', function(event) {  
            // 将服务器推送的数据显示在页面上  
            document.getElementById('sse-data').innerHTML += '<p>' + event.data + '</p>';  
        });  
    </script>  
</body>  
</html>

5. SSE技术的应用场景

实时通知

SSE技术常用于实现实时通知功能。例如，社交网络应用可以利用SSE技术向用户推送新的消息、评论或关注提醒，用户无需手动刷新页面即可及时收到通知，从而提升了通知的实时性和用户体验。

即时聊天

即时聊天应用是SSE技术的典型应用场景之一。通过SSE技术，服务器可以实时向客户端推送新的聊天消息，使用户能够实时收到对方的消息，并立即进行回复，实现了双方即时通讯的效果。这种实时性的交互方式极大地提升了聊天应用的用户体验。

实时数据更新

在需要实时更新数据的应用中，SSE技术也能够发挥重要作用。例如，股票交易应用可以利用SSE技术向用户实时推送股票价格变动、交易信息等，用户无需手动刷新页面即可获取最新的数据，从而及时进行交易决策，提高了交易的效率和准确性。

在线游戏

SSE技术也可以应用于在线游戏中，用于实现实时的游戏状态更新和玩家之间的实时交互。服务器可以通过SSE技术向所有玩家推送游戏状态的变化、玩家动作的更新等信息，使玩家能够在游戏过程中实时感知到其他玩家的动态，提高了游戏的互动性和乐趣。

SSE技术的应用在这些场景中不仅提升了用户体验，使用户能够及时获取到最新的信息，还促进了应用功能和效率的提升，使应用具有更强的实时性和互动性。

6. SSE技术的优势与挑战

优势：

  1. 实时性：SSE技术能够实现服务器向客户端实时推送数据，使客户端能够及时获取最新的信息，从而实现了实时性数据传输。

  2. 资源效率：相比于传统的轮询方式，SSE技术可以减少不必要的网络请求，降低了服务器和客户端的资源消耗，提高了系统的效率和性能。

  3. 简单易用：SSE技术的实现相对简单，只需通过设置响应头和推送数据即可，无需引入额外的库或框架，降低了开发和维护成本。

  4. 支持性良好：SSE技术在现代浏览器中得到了广泛支持，可以在主流浏览器上稳定运行，而且与传统的AJAX请求相比，SSE技术对浏览器的兼容性更好。

挑战：

  1. 连接断开：SSE连接可能会因为网络故障或其他原因断开，导致客户端无法继续接收服务器推送的数据。解决方案包括在客户端实现自动重连机制和服务器端保持连接的活动性。

  2. 跨域问题：SSE技术默认只支持同源请求，跨域请求需要特殊处理。解决方案可以使用CORS（跨域资源共享）来允许跨域请求，或者使用反向代理等方式来绕过跨域限制。

  3. 客户端限制：一些客户端可能会限制同时打开的连接数，这可能会影响到SSE连接的稳定性和性能。解决方案包括合理控制同时打开的连接数，以及优化连接管理和资源利用。

  4. 兼容性问题：虽然SSE技术在现代浏览器中得到了良好的支持，但仍然存在一些旧版本浏览器不支持或支持不完整的情况。解决方案可以通过使用Polyfill库来填补兼容性问题，或者向用户提示升级浏览器以获得更好的体验。

综上所述，虽然SSE技术具有许多优势，但在实践中仍然会面临一些挑战，需要开发人员针对性地进行处理和解决，以确保SSE技术能够发挥最大的效益。

7. 结语

SSE技术作为一种实现流式输出的重要技术，在现代网络应用中发挥着重要作用。通过使用SSE协议，ChatGPT等应用能够在输入消息后迅速开始生成回答，并根据上下文逐步细化，使得对话真实流畅。实时通知、即时聊天、实时数据更新等应用场景都离不开SSE技术的支持，它为这些应用提供了实时性、高效性和稳定性的保障。随着网络应用的不断发展和用户对实时性数据的需求不断增加，SSE技术将会得到更广泛的应用和推广。

avatar
文章
阅读
粉丝