解密AI流式输出和网页呈现

MR_发2025-03-16 11:09

解密AI流式输出和网站页面呈现

效果速看

1. SSE简介

  • SSE(Server-Sent Events)译为服务器推送事件，通过EventSource接口实现服务器推送通信。与webSocket不同的是，SSE基于http连接，为单向通信，在单向推送场景下（如各大AI网站）得到很好的应用（有关ws和SSE的对比本文不再深入）
  • 一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件，此连接会一直保持开启直到通过调用 EventSource.close() 关闭。客户端开启EventSource连接后通过监听特定的事件(如notice,update,meessage)来处理相关的逻辑

2. 原生EventSource不足

信息推送的简单代码示例如下 客户端，通过message事件来监听data类型的信息，然后对信息进行处理

javascript 复制代码 
let count = ref("");
const sse = new EventSource("http://localhost:8080/sse");
sse.addEventListener("message", (e) => {
  console.log("---数据", e.data);
  count.value += e.data + " ";
  //页面渲染
});

服务器端，通过配置请求头Content-Type为text/event-stream来开启SSE，另外实时推送需要设置Cache-Control为no-cahce停用缓存，连接状态Connection为keep-alive。

javascript 复制代码 
const express = require('express')
const cors = require('cors')
const app = express()

// 允许跨域
app.use(cors())

// SSE端点
app.get('/sse', (req, res) => {
    // 设置SSE需要的headers
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    })
    // 定时发送消息
    let counter = 0
    const intervalId = setInterval(() => {
        counter++
        res.write(`event: message\n`)
        res.write(`data: 这是第${counter}次推送\n\n`)
        if (counter > 3) {
            clearInterval(intervalId);
        }
    }, 1000)

    // 客户端断开连接时清理
    req.on('close', () => {
        clearInterval(intervalId)
        console.log('客户端断开连接')
    })
})

// 启动服务器
const PORT = 8080
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`)
})

效果如下

通过上面简单的示例代码细心的小伙伴可以发现：不对呀，别人的AI网站是post请求，可以携带参数信息，你的怎么是get请求。

是的，post请求可以携带大量的信息，比如问的问题，理论上get请求也可以通过query参数携带，一般服务器和浏览器会限制你的url字符，但是你想想你问一大堆问题，万一超过了url字符限制怎么办，另外从携带信息便捷性和安全性来说，在这种场景下使用post无疑是最优解，但是我们的EventSoure没有支持post 请求怎么办，于是我们解密用别的思路，也就是本文主角：用fetch发送post请求，使用ReadableStream和mardown实现流式传输和页面渲染

3.fetch创建可读流

3.1 使用ReadableStream

在fetch的response.body中，暴露了一个可读流的reader，调用response.body.getReader这个方法创建一个reader同时进行锁定，接着通过reader.read这个方法就可以读取到流。

javascript 复制代码 
const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "text/event-stream",
    },
    body: JSON.stringify(data),
  }).catch((err) => {
    console.log("err报错了", err);
  });
  // 获取 ReadableStream 并创建读取器
  const reader = response.body.getReader();

}

3.2 使用TextDecoder 解码

EventSource发送来的是utf-8编码的信息，通过reader.read()得到的value为字节流，我们还需要使用TextDecoder 解码器器将字节流作为输入，并提供码位流作为输出，这个过程可以称为翻译

javascript 复制代码 
  const decoder = new TextDecoder();
  // 持续读取流数据
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      reader.releaseLock();
      break;
    } // 流结束
    console.log("字节流", value);
    const chunk = decoder.decode(value);
    console.log("解码后数据为", chunk);
  }

然后我们将解析出来的数据做一些处理拼接就可以

4. markdown页面渲染

在各种AI网站上，我们通常会看到AI回答的内容有列表，有代码块，还有表格等等，难道这是自己手搓生成的嘛?no，通过观察他们的数据格式 这不是markdown语法吗，通过引入markdown库来对返回信息进行解析，再实时更新页面，这就有了页面打字机和丰富的排版效果。

5.实战模拟流式传输和页面呈现（含全部代码）

我们先来看一下最终效果（vue3+node.js ） 怎么样，看着效果图是不是有那味了

5.1 服务器端实现(node.js)

为了简化数据获取和处理流程和简单模拟流式返回markdown语法，我们写死每次返回的内容。简单来说就是每次请求我们都先读取同目录下的b.txt这个文件，这个文件里面存储了原始markdown语法的文本。然后通过随机slice文件块大小，和 setTimeout随机间隔发送读取出来的块给客户端来模拟流式传输效果。需要注意的是，SSE需要注意通信格式：每条信息后面需以\n\n结束（SSE协议规定的）。

r 复制代码 
res.write(`data: 你好呀\n\n`)

当然，如果你不遵守，服务端和客户端维护一套自定义通信也可以，但是在查看请求时候这里面的EventStream浏览器将识别不到，内容将为空（下图就是将\n\n换成 \n所导致） 具体代码如下：

javascript 复制代码 
const express = require('express');
const fs = require('fs');
const app = express();
const PORT = 8080;
const cors = require('cors');

// 允许跨域
app.use(cors())
    // 发送文件内容的分块逻辑
function sendFileChunks(res, fileContent) {
    let index = 0;
    const sendChunk = () => {
        if (index >= fileContent.length) {
            //  res.write('event: end\ndata: \n\n'); // 发送结束事件
            res.end();
            return;
        }
        // 随机生成 3-5 的块大小
        const chunkSize = 3 + Math.floor(Math.random() * 3);
        const chunk = fileContent.slice(index, index + chunkSize);
        // SSE 格式要求
        res.write(`data: ${JSON.stringify({text:chunk})}\n`);
        index += chunkSize;
        // 随机间隔发送（模拟实时效果）
        setTimeout(sendChunk, 50 + Math.random() * 50);
    };

    sendChunk();
}

app.post('/sse', (req, res) => {
    try {
        //SSE需要
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive'
        });

        //读取同同级下的b.txt（里面存放着markdown格式的文档）
        const fileContent = fs.readFileSync('./b.txt', 'utf-8');
        //分块发送
        sendFileChunks(res, fileContent);
        // 处理连接关闭
        req.on('close', () => {
            console.log('Client disconnected');
            res.end();
        });

    } catch (error) {
        console.log('event: error\ndata: File not found\n\n');
        res.end();
    }
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

5.2 前端实现

先要装markdown包将markdown语法转html

复制代码 
npm install marked

通过mark.parse("具体内容")来实现文本转html。另外我们除了实现fetch创建可读流外还需要实现中断输出效果，这个我们只需要使用AbortController即可，通过abort()来中断请求，实现打断输出，具体代码如下：

javascript 复制代码 
<template>
  <div>
    <button @click="fetchSSE">发送</button>
    <button @click="pause" style="color: red; margin-left: 30px">停止</button>
  </div>
  <div class="markdown-container" v-html="renderedContent"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { marked } from "marked";
const rawContent = ref("");
const renderedContent = ref("");
const controller = new AbortController();
// 配置Markdown解析

// 解析Markdown内容
const parseMarkdown = (raw) => {
  return marked.parse(raw);
};

async function fetchSSE() {
  //请求地址
  let url = "http://localhost:8080/sse";
  let data = { userId: 123, content: "介绍一下vue3", date: "XXXXX" };
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "text/event-stream",
    },
    body: JSON.stringify(data),
    signal: controller.signal,
  }).catch((err) => {
    console.log("err报错了", err);
  });
  // 获取 ReadableStream 并创建读取器
  const reader = response.body.getReader();
  //创建解码器
  const decoder = new TextDecoder();
  // 持续读取流数据
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      reader.releaseLock();
      break;
    } // 流结束
    const chunk = decoder.decode(value);
    const events = chunk.split("\n\n"); // SSE 事件以双换行分隔
    for (const event of events) {
      if (event.trim() === "") continue;
      parseSSEEvent(event);
    }
  }
}

function pause() {
  controller.abort();
}

// 解析单个 SSE 事件
function parseSSEEvent(event) {
  const lines = event;
  let dataObj = JSON.parse(lines.split(": ")[1]);
  //dtaObj里面为信息对象{text:XXX}
  rawContent.value += dataObj.text;
  //解析语法
  renderedContent.value = parseMarkdown(rawContent.value);
}
</script>
<style scoped>
.markdown-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}
</style>

5.4 b.txt里面markdown内容

markdown 复制代码 
# Vue 3 简介

Vue 3 是 Vue.js 框架的第三代版本，于 2020 年 9 月正式发布。它在多个方面进行了优化和改进，包括内部架构的重构、性能的提升以及新特性的引入。

## 主要特性

### 1. **Composition API**
Vue 3 引入了 Composition API，这是一种新的代码组织方式，允许开发者通过函数组合的方式来构建组件逻辑。它提供了更高的灵活性和代码复用性，特别适合处理复杂组件的逻辑。

### 2. **Fragment 和 Teleport**
- **Fragment**：允许组件返回多个根节点，解决了 Vue 2 中组件必须有一个根节点的限制。
- **Teleport**：可以将组件的内容渲染到父组件之外的 DOM 结构中，非常适合实现模态框、弹窗等场景。

### 3. **性能优化**
Vue 3 在性能上进行了大幅优化，包括更小的体积、更快的渲染速度和更低的内存占用。它还引入了 Proxy API，替代了 Vue 2 中的 `defineProperty`，从而提升了响应式系统的性能。

### 4. **更好的 TypeScript 支持**
Vue 3 对 TypeScript 提供了原生支持，使得开发者可以更方便地结合 TypeScript 使用 Vue，提升代码的可维护性和开发体验。

## 使用场景

Vue 3 适用于各种规模的前端项目，无论是小型的单页面应用还是大型的企业级系统。它的灵活性和高性能使其成为现代前端开发的热门选择。

## 总结

Vue 3 是一个功能强大且性能卓越的前端框架。它通过引入 Composition API、Fragment 和 Teleport 等新特性，极大地提升了开发效率和代码可维护性。同时，它对 TypeScript 的支持也使得开发体验更加流畅。如果你正在寻找一个现代化的前端框架，Vue 3 绝对值得尝试。

总结

本文还有诸多不清楚或者带待改进的地方，希望大家积极提出和共同进步

相关推荐
苹果电脑的鑫鑫1 小时前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
忧郁的蛋~1 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强1 小时前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈：前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
前端snow1 小时前
爬取数据利用node也行，你知道吗？
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
一袋米扛几楼982 小时前
【Node】Node.js环境变量配置，及下载地址
javascript·网络·node.js
还是鼠鼠2 小时前
Node.js--exports 对象详解：用法、示例与最佳实践
前端·javascript·vscode·node.js·web
Moment2 小时前
前端性能指标 —— FMP
前端·javascript·面试
爱上大树的小猪2 小时前
【前端实战】Flex布局实战：打造经典自适应导航栏（附移动端折叠方案）
前端·javascript·flexbox
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07苍穹外卖面试总结08DeepSeek RAGFlow构建本地知识库系统09太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）10命令行方式将mysql数据库迁移到达梦数据库（全步骤）