ChatGPT流式数据传输探索

xs_2012

已于 2024-09-20 11:43:05 修改

阅读量1.6k

点赞数 19

于 2024-09-20 11:40:11 首次发布

本文链接：https://blog.csdn.net/xs_2012/article/details/142378253

版权

文章目录

背景介绍

用过GPT类语言模型的同学都知道，其在返回数据时都是一个字或几个字的显示，你是否思考过它是怎么传输的？经过一番查询学习，了解到了SSE，GPT就是通过SSE流式传输方式进行传输的。
SSE 全称为 Server-sent-events , 是一种基于 HTTP 协议的通信技术，允许服务器主动向客户端（通常是Web浏览器）发送更新。它是 HTML5 标准的一部分，设计初衷是用来建立一个单向的服务器到客户端连接，使得服务器可以实时地向客户端发送数据。这种服务端实时向客户端发送数据的传输方式，其实就是流式传输。今天就来模拟实践一番SSE传输。

目标

实现SSE流式数据传输

技术细节

1、客户端

Server-Sent Events（SSE）是 HTML5 的一部分，用于从服务器实时接收更新，目前大部分主流浏览器都提供了支持：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
  </head>

  <body>
    <div id="result"></div>
    <script>
      let result = "";
      if ("EventSource" in window) {
   
        // 连接服务器
        var sseSource = new EventSource(
          "http://127.0.0.1:8080/test/createSse?uid=123"
        );

        // 连接打开
        sseSource.onopen = function () {
   
          console.log("连接打开");
          document.getElementById("result").innerText += '连接打开\n';
        };

        // 连接错误
        sseSource.onerror = function (err) {
   
          console.log("连接错误:", err);
        };
        sseSource.onclose = function () {
   
          console.log("连接关闭");
        };
        // 接收到数据
        sseSource.onmessage = function (event) {
   
          console.log("接收到数据:", event.data);
          if (event.data.startsWith("[DONE]")) {
   
            document.getElementById("result").innerText+='数据传