百度360必应搜狗淘宝本站头条
mysql distinctjenkins官网mysql 子查询vba splitpython list sort
当前位置：网站首页 > IT技术 > 正文

我不允许自己还不了解AI流式数据的传输原理

wptr33 2025-01-03 19:20 23 浏览

前言

在日常工作中，相信大家对AI大模型的运用已经掌握得非常熟练，无论是通过大模型平台使用还是通过服务商提供的SDK来使用。

但亲手去实现从后端发送流式数据到前端接收流式数据这个过程，可能就涉及得不多。

今天我们就来简单实现一下这过程。

AI流式数据接口请求模式包括三种：

RESTful API：需要客户端频繁轮询服务器以获取更新，增加了延迟和网络负载，不适合实时数据流。

WebSocket：最适合双向流式数据，提供低延迟、全双工通信，非常适合实时双向数据流，如聊天应用和在线游戏。

Server-Sent Events (SSE)：适合单向流式数据，实现简单，自动重连，适合服务器向客户端推送实时更新，但不支持客户端向服务器发送数据。

这里我们采用 Server-Sent Events 的请求模式。



PHP发送流式数据

后端代码使用PHP来实现流式数据的返回，用的是Laravel框架的路由：

Route::post('testStream', function () {
    set_time_limit(0);

    $str = '《唐诗三百首》共八卷（或作六卷），选诗三百一十首，不同刻本有三百二十一首、三百一十七首、三百零二首等多种，常用底本光绪年间的四藤吟社本为三百一十三首。称“三百首”可能是沿袭“诗三百”的说法，只是取其整数而已。此书分体编排，有五言古诗、七言古诗、五言律诗、七言律诗、五言绝句、七言绝句及乐府诸体，其中古体诗占三分之一，近体诗占三分之二。虽然全部作品只占全唐诗的一百六十分之一，但不少是唐诗传世佳作。此书收录作者七十七人，包括帝王、士大夫、僧人、歌女、无名氏等，大多数为唐诗代表作家。其中杜甫三十九首，王维二十九首，李白二十九首，李商隐二十四首，孟浩然、韦应物、杜牧各有十多首。从体裁来看，李白多收五、七言古诗和乐府，韦应物多收五言古诗，王昌龄多收七言绝句，李颀多收七言歌行；而且古体诗以盛唐为主，近体诗则多选中、晚唐。入选诗作有不少是唐诗中的名篇，大都通俗易解，艺术性较高，便于吟诵；其中不乏描写生活琐事、抒发个人情怀的诗作，间有内容空洞、形式呆板的应制、酬答之作。编者对入选的诗作还有选择地加以批语，简明扼要，对读者多有启发。有的批语虽只点一下，但颇耐回味。';

    return response()->stream(function () use ($str) {
        $chunks = mb_str_split($str, 10);
        foreach ($chunks as $chunk) {
            // 发送数据事件
            echo "data: " . htmlspecialchars($chunk) . "\n\n";

            // 强制输出缓冲区的内容
            ob_flush();
            flush();

            // 延迟一秒
            sleep(1);
        }

        // 关闭连接
        echo "data: Stream has ended.\n\n";

        // 确保所有数据都被发送
        ob_end_flush();
        flush();
    }, 200, [
        'Content-Type' => 'text/event-stream;charset=utf-8',
        'Cache-Control' => 'no-cache',
        'X-Accel-Buffering' => 'no',
        'Connection' => 'keep-alive'
    ]);
});

返回内容是一个固定的字符串，将其分片后依次返回。

注意Server-Sent Events的方式需要保证每行数据以 \n\n 两个换行符结尾。

header头参数：

  • Content-Type: text/event-stream;charset=utf-8 指定响应为SSE事件流，并使用UTF-8编码以支持多语言字符。
  • Cache-Control: no-cache 禁止浏览器缓存响应，确保客户端总是接收最新的实时数据。
  • X-Accel-Buffering: no 禁用Nginx的自动缓冲，使服务器生成的数据能够立即发送到客户端，减少延迟。
  • Connection: keep-alive 保持HTTP连接开放，允许服务器持续向客户端推送数据，提高性能并减少TCP握手的开销。

这里补充下SSE的消息格式

SSE消息由一系列字段组成，每个字段以冒号（: ）开头，后面跟着字段值。常见的字段包括：

data:：包含实际的数据内容。

event：指定事件类型，默认为message。

id：为事件分配一个唯一的ID，用于自动重连时恢复最后收到的消息。

retry：指定客户端在连接断开后重新连接的等待时间（毫秒）。

每个字段必须以换行符（\n）结尾。一条完整的消息必须以两个换行符（\n\n）结尾，表示消息的结束。

如果消息包含多行数据，每行也应以换行符结尾。

JS接收流式数据

<html>

<body>
  <div id="message"></div>
</body>

<script>
  const text = document.getElementById('text');

  async function request() {
    const response = await fetch('http://127.0.0.1:8000/api/testStream', {
      method: 'POST',
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');

    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          break;
        }

        let text = decoder.decode(value, { stream: true });
        // 将文本按行分割，逐行处理
        const lines = text.split('\n');
        for (const line of lines) {
          // 忽略空行和非 data: 开头的行
          if (!line.trim() || !line.startsWith('data:')) continue;
          // 去掉 'data:' 前缀并处理剩余内容
          const content = line.substring(5).trim();
          message.innerHTML += content;
        }
      }
    } catch (error) {
      console.error('Stream reading error:', error);
    }
  }

  request();
</script>

</html>

我们通过fetch来请求后端数据

用while (true) 来阻塞JS代码执行，持续从后端获取数据流

然后将得到数据用\n进行分割，去掉前缀 data:，拿到具体的内容

最后将得到的结果展示在浏览器上：

– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。

相关推荐

redis的八种使用场景

前言:redis是我们工作开发中，经常要打交道的，下面对redis的使用场景做总结介绍也是对redis举报的功能做梳理。缓存Redis最常见的用途是作为缓存，用于加速应用程序的响应速度。...

基于Redis的3种分布式ID生成策略

在分布式系统设计中，全局唯一ID是一个基础而关键的组件。随着业务规模扩大和系统架构向微服务演进，传统的单机自增ID已无法满足需求。高并发、高可用的分布式ID生成方案成为构建可靠分布式系统的必要条件。R...

基于OpenWrt系统路由器的模式切换与网页设计

摘要：目前商用WiFi路由器已应用到多个领域，商家通过给用户提供一个稳定免费WiFi热点达到吸引客户、提升服务的目标。传统路由器自带的Luci界面提供了工厂模式的Web界面，用户可通过该界面配置路...

这篇文章教你看明白 nginx-ingress 控制器

主机nginx一般nginx做主机反向代理（网关）有以下配置...

如何用redis实现注册中心

一句话总结使用Redis实现注册中心：服务注册...

爱可可老师24小时热门分享(2020.5.10)

No1.看自己以前写的代码是种什么体验？No2.DooM-chip!国外网友SylvainLefebvre自制的无CPU、无操作码、无指令计数器...No3.我认为CS学位可以更好，如...

Apportable:拯救程序员，IOS一秒变安卓

摘要：还在为了跨平台使用cocos2d-x吗,拯救objc程序员的奇葩来了,ApportableSDK:FreeAndroidsupportforcocos2d-iPhone。App...

JAVA实现超买超卖方案汇总，那个最适合你，一篇文章彻底讲透

以下是几种Java实现超买超卖问题的核心解决方案及代码示例，针对高并发场景下的库存扣减问题：方案一：Redis原子操作+Lua脚本（推荐）//使用Redis+Lua保证原子性publicbo...

3月26日更新 快速施法自动施法可独立设置

2016年3月26日DOTA2有一个79.6MB的更新主要是针对自动施法和快速施法的调整本来内容不多不少朋友都有自动施法和快速施法的困扰英文更新日志一些视觉BUG修复就不翻译了主要翻译自动施...

Redis 是如何提供服务的

在刚刚接触Redis的时候，最想要知道的是一个’setnameJhon’命令到达Redis服务器的时候，它是如何返回’OK’的？里面命令处理的流程如何，具体细节怎么样？你一定有问过自己...

lua _G、_VERSION使用

到这里我们已经把lua基础库中的函数介绍完了，除了函数外基础库中还有两个常量，一个是_G，另一个是_VERSION。_G是基础库本身，指向自己，这个变量很有意思，可以无限引用自己，最后得到的还是自己，...

China&#39;s top diplomat to chair third China-Pacific Island countries foreign ministers&#39; meeting

BEIJING,May21(Xinhua)--ChineseForeignMinisterWangYi,alsoamemberofthePoliticalBureau...

移动工作交流工具Lua推出Insights数据分析产品

Lua是一个适用于各种职业人士的移动交流平台，它在今天推出了一项叫做Insights的全新功能。Insights是一个数据平台，客户可以在上面实时看到员工之间的交流情况，并分析这些情况对公司发展的影响...

Redis 7新武器:用Redis Stack实现向量搜索的极限压测

当传统关系型数据库还在为向量相似度搜索的性能挣扎时，Redis7的RedisStack...

Nginx/OpenResty详解，Nginx Lua编程，重定向与内部子请求

重定向与内部子请求Nginx的rewrite指令不仅可以在Nginx内部的server、location之间进行跳转，还可以进行外部链接的重定向。通过ngx_lua模块的Lua函数除了能实现Nginx...

一周热门
最近发表
标签列表
赣ICP备2024040476号-12