- 综合排序
- 最热优先
- 最新优先
- 来自专栏小孟开发笔记
UNIAPP配置sse（接收流式数据，实现打字机效果）
1. 在 manifest.json 文件中添加 weex-vue-render 模块，如下所示：
7K10编辑于 2024-03-26 - 来自专栏h5
react19+arco+zustand5+react-activation简约后台管理模板
原创React19 + Vite8 + react-activation0.13.4 + Zustand5 + react-router-dom v7搭建web版轻量级Admin管理系统模板。 0.13.4vite: ^8.1.0sass: ^1.101.0clsx: ^2.1.1nprogress: ^0.2.0项目功能特性✨ 基于vite8.0构建工具vite^8.0.16搭建项目框架 最新前端技术栈react19 推荐几个最新实战项目案例Flutter3.41构建高性能App聊天界面对话+气泡+朋友圈 Flutter3.41实战AI：从零到一构建app版流式ai系统 Electron41 + Vite8打造流式输出客户端 助手 Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手 2026版開工新作uni-app+mphtml结合deepseek跨端ai应用 vite7.2-deepseek流式 ai对话|vue3.5+vant4+katex+mermaid智能ai打字会话 最新实战Vite7.3+Tauri2.10深度集成DeepSeek桌面端AI智能助手 electron38-vite7-vue3os
16210编辑于 2026-07-04 - 来自专栏陶士涵的菜地
纯前端仿GPT流式打字效果的js库，类似通义千问或者其他AI界面的打字效果
因为GPT以及国内各大模型的发布，很多官网都设计的是，仿造流式打字效果，下面这个js库就能轻松实现。 typeSpeed: 120, backDelay: 3000, }); </script> 实现的效果可以看我的官网 gofly.v1kf.com 我这里开发客服系统，所以毕竟契合这个打字效果
2.2K10编辑于 2023-04-21 - 来自专栏h5
自研react19.2+deepseek-v4+openai智能流式ai模板
deepseek-v4正式版快要发布了，之前有使用vite8+vue3接入deepseek搭建流式生成ai助手。 这次爆肝一周基于react19技术栈整合最新deepseek-v4-flash从0-1手搓h5版流式ai聊天模板。 AI助手react19-deepseek提供浅色+深色主题、支持流式打字输出、深度思考、代码高亮/复制/下载、渲染katex公式/mermaid图等功能。 rehypeHighlight, { aliases: {xml: ['vue']}, // 支持vue语法 } ], ]} /> )})react19 ai系统Electron41 + Vite8打造流式输出客户端AI助手Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手
11220编辑于 2026-07-20 - 来自专栏h5
2026原创自研React19+Vite8+ArcoDesign+Zustand中后台管理系统框架模板
react-md-editor^4.1.1模拟数据：axios^1.18.1 + mockjs^1.1.0样式管理：sass^1.101.0功能特征✨ 基于vite8.0构建工具搭建项目框架 最新前端技术栈react19 个模板布局风格 支持页面KeepAlive缓存机制⚡ 支持动态路由鉴权验证 支持tabs多标签页切换路由页面 优雅轻盈react组件库arco-design项目结构目录最新vite8.1构建项目模板，采用react19 后台管理系统升级款vite8+vue3.5+arcoDesign网页端webOS桌面框架Flutter3.41构建高性能App聊天界面对话+气泡+朋友圈 Flutter3.41实战AI：从零到一构建app版流式 ai系统Electron41 + Vite8打造流式输出客户端AI助手 Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手 2026版開工新作uni-app+mphtml结合 deepseek跨端ai应用 vite7.2-deepseek流式ai对话|vue3.5+vant4+katex+mermaid智能ai打字会话 最新实战Vite7.3+Tauri2.10深度集成DeepSeek
19110编辑于 2026-07-08 - 来自专栏h5
vite7.2-deepseek流式ai对话|vue3.5+vant4+katex+mermaid智能ai打字会话模板
喜迎2026原创新作vite7.2+vue3.5+deepseek-v3.2从0-1纯手搓流式输出ai会话模板。 环境变量配置.env自己去申请一个api key，替换掉.env文件里面的key 即可丝滑体验流式对话功能。 vue3+deepseek实现多轮对话/流式输出const completion = await openai.chat.completions.create({ // 单一会话 /* messages finish_reason === 'stop') { // 确保最终内容完整更新 ... }}Okay，以上就是vue3+deepseek实现流式输出ai对话模板的一些知识分享。 electron35+deepseek桌面端ai模板vue3.5+deepseek网页版ai流式对话
51620编辑于 2025-12-23 - </>)React19调用DeepSeek V4智能大模型react19对接deepseek api实现流式输出多轮对话。来自专栏h5
基于React19+Arco+Zustand5接入DeepSeek-V4网页版仿豆包Kimi流式AI系统
经过一周快速研发，最新版react19.2+zustand5集成deepseek-v4-flash实战网页版ai流式对话助手。 [自研react19.2+deepseek-v4+openai智能流式ai模板](https://cloud.tencent.com/developer/article/2712737)react19- 下载支持深度思考链模式支持输出Katex数学公式支持渲染Mermaid图表(流程图/类图/饼图/甘特图)支持Echarts图表展示采用ArcoDesign组件库，保持UI风格一致性项目结构目录基于vite8.0构建创建react19 react环境变量配置替换下项目根目录下.env里的apikey，即可体验ai流式对话功能。
ThinkPHP开发的AI问答系统,调用AI流式接口并实时将这些数据推送给前端,实现打字机效果
在ThinkPHP中调用AI流式接口并实时返回给前端，可以通过以下步骤实现。 禁用Nginx缓冲 // 获取用户输入 $input = input('question'); try { // 调用AI流式接口 发送结束信号 echo "event: end\n"; echo "data: \n\n"; exit; } /** * 调用AI流式接口 function parseAiResponse(string $chunk): array { $result = ['content' => '']; // 处理流式数据格式 \n\n 浏览器通过EventSource API接收 流式处理核心 后端使用curl的CURLOPT_WRITEFUNCTION逐块处理 每次收到数据立即刷新输出缓冲区（ob_flush() + flush
React19 她来了，她来了，他带着礼物走来了
流式传输: 服务器组件允许我们将渲染工作分割成块,并在它们准备就绪时将其流式传输到客户端。这允许用户在不必等待整个页面在服务器端渲染完成的情况下,更早地看到页面的某些部分。 如果不想用原生写，那么我们可以选择一些成熟的框架，例如Lit[3] React19 兼容 Web Components 在React19之前，在 React 中集成 Web Components并不直接 React19的SEO 使用 React19后，我们可以直接在 React 组件中使用<title>和 <meta> 标签： Const HomePage = () => { return ( 所以React19对一些我们平时用起来不咋得心应手的Hook做了一次升级。 之后，我们不再需要自己来做记忆化，React19 将会在后台自动完成。
被严重低估！React 19 又是一次开发方式的变革，useEffect 将会逐渐退出历史舞台
如上图所示，相关的实践案例我已经写完，后续的二十多篇文章预计会在 React19 正式发布之前完成。大家可以保持持续关注。 我最终会将这本合集放到我的个人小程序「前端码易」中，供大家长期免费观看。 React19 的 大部分更新，几乎都是围绕如何在开发中尽量不用或者少用 useEffect 来展开。 除此之外，React19 想要彻底改变我们在项目开发中的 UI 交互方式。因此对于 React19 而言，Suspense、ErrorBoundary、Action 的重要性将会变得越来越高。
鸿蒙开发：实现AI打字机效果
具体的效果，根据业务情况而定，有两种模式，一种主动的流式输出，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。 打字机的效果，一般都是在会话聊天之中，也就是列表之中，在实际的开发中，还要兼顾到，流式输出的数据加载是否会影响性能，页面闪烁，最新的聊天信息可展示等问题。 ，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。" ，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。" ，也就是数据以流式的形式进行返回，前端直接用组件加载即可，第二种就是刻意的流式展示，也就是在拿到数据之后，前端实现流式输出，进行打字机展示。"
免费开源 | 用微信小程序+ThinkPHP打造了一款全能AI问答助手，流式兼容所有AI大模型、打字机效果
历时一周，我用微信小程序+ThinkPHP打造了一款全能AI问答助手，部署即用 支持多模型、打字机效果、深度思考，完全开源 大家好，今天想跟大家分享一个我最近做的小东西——一款基于微信小程序的AI大模型问答应用 我一直想要一个能同时满足以下需求的产品： 支持多家大模型接口，不被单一厂商绑定 对话要有“打字机效果”，看着AI一个字一个字地输出 能记住上下文，进行多轮对话 界面简洁干净，看着舒服 支持智能搜索和深度思考等高级设置 打字机效果（流式输出） 这是用户反馈最满意的功能之一。AI回复不再是等待几秒钟后一次性出现，而是像人打字一样逐字逐句地显示出来。 小程序端使用WebSocket接收后端的流式数据，每收到一个字就追加到页面上。配合一个闪烁的光标动画，体验非常自然。 3. 小程序WebSocket限制：微信小程序对WebSocket的连接数有限制，高峰期需要做好连接复用 流式输出的超时问题：PHP默认执行时间较短，长文本生成时需要设置set_time_limit(0)
【Python系列】浅析流式模式：基于 SSE 的实时响应体验
流式模式（Streaming Mode）作为一种高效的数据传输方式，能够让用户以打字机输出的形式获得流式返回的效果。 而在流式模式下，服务器会逐步发送数据，客户端可以立即将接收到的数据呈现在用户面前，产生一种“打字机”式的输出效果。这种方式显著提升了用户的等待体验，并让应用表现更加动态化和富有生命力。 在流式模式中，SSE 被广泛用于实现打字机输出的流式返回效果。 SSE 的工作原理 SSE 基于 HTTP 协议，通过简单的 GET 请求即可开启一个持久连接。 实现基于 SSE 的流式模式 在基于流式模式的 Web 应用中，我们可以使用 JavaScript 和服务器端的 SSE 支持来实现打字机输出效果。 这种实现方式简单而高效，让用户体验到类似打字机的逐行显示效果。
用 Go 写 AI 命令行工具的实践
你有没有想过，用 Go 写一个支持流式输出的 AI 命令行工具？ 流式输出是 AI 应用的标配功能。 SSE 流式响应 OpenAI 等大模型 API 支持 SSE（Server-Sent Events）流式输出。 更好的方式是逐字显示，模拟打字效果： func typeWriter(text string, delay time.Duration) { for _, char := range text = parseStreamLine(scanner.Text()) typeWriter(data.Content, 10*time.Millisecond) } 这样看起来更自然，像真人在打字
Claude API 开发实战：流式与非流式输出的体感差异与选型指南
客户端与服务端建立长连接后，大模型每生成一个 Token，服务端就会通过该通道实时推送给客户端，前端配合打字机效果实现逐字渲染。 三、 维度对比：流式与非流式的量化评估为了方便开发团队评估，我们将两者的关键指标进行了对比：评估维度流式输出 (Streaming)非流式输出 (Non-streaming)首字延迟 (TTFT)极短（ 必须使用流式输出的场景智能客服与聊天机器人：为了模拟人与人之间的真实对话节奏，打字机式实时吐字是不可或缺的。 推荐使用非流式输出的场景结构化数据提取（JSON Mode）：如果要求模型输出用于系统对接的 JSON、XML 或 SQL 数据，流式的中间状态数据是损坏且无法解析的，必须使用非流式以确保接收到完整闭合的数据结构 这些任务在后台运行，不需要人工实时干预，短连接的非流式更利于做失败重试。五、 行业演进趋势随着端侧算力的提升与大模型推理速度的突破，未来的应用设计将进一步模糊“流式”与“非流式”的边界。
Electron41 + Vite8打造流式输出客户端AI助手
从零开始:用electron41+vite8.0+Vue 3 + DeepSeek搭建一个支持流式输出的 AI 对话界面系统。 功能支持性Electron41+Vite8接入DeepSeek流式打字输出，丝滑流畅内置light+dark主题支持深度思考R1模式支持Latex数学公式支持Mermaid图表渲染（拖拽、缩放、下载）支持代码块 template>Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手2026版開工新作uni-app+mphtml结合deepseek跨端ai应用vite7.2-deepseek流式 ai对话|vue3.5+vant4+katex+mermaid智能ai打字会话最新实战Vite7.3+Tauri2.10深度集成DeepSeek桌面端AI智能助手Electron-DeepSeek-Chat 流式AI系统|electron39+vue3+deepseek手搓aielectron38-vite7-vue3os电脑端os管理系统最新版electron38-vite7-admin电脑端中后台管理系统
Vue3 封装 AI 问答组件实现 AI 流式回答问题的方法
Vue3实现AI流式回答问题：组件封装与应用实例一、AI流式回答技术原理（一）传统请求与流式响应对比传统请求：客户端发送请求 → 服务器处理 → 一次性返回完整响应流式响应：客户端发送请求 → 服务器逐步生成响应 → 实时推送给客户端（二）流式响应的优势即时反馈：用户无需等待完整回答更好的用户体验：减少感知等待时间资源优化：服务器无需一次性生成完整回答（三）技术实现方案服务器端：支持流式输出的AI模型（如OpenAI // 添加打字机效果const typingSpeed = 15; // 毫秒/字符let typingTimer = null;// 更新streamResponse函数const streamResponse = parsed.choices[0].delta.content || ''; fullContent += content; // 控制显示速度，实现打字机效果 关键技术点包括：流式响应处理：使用Fetch API和ReadableStream解析SSE格式数据状态管理：合理使用ref和reactive管理对话状态用户体验优化：实现打字机效果、加载指示器安全考虑
供应链系统的血脉 | 利用 React19 新特性与 WebSocket 实现看板数据的实时同步
本文将深入探讨如何利用React19带来的革命性新特性，结合WebSocket全双工通信协议，构建一个高性能、低延迟、高可靠的供应链看板实时同步系统，让数据真正流动起来。 供应链数据通常来自多个源头：数据库变更（通过CDC工具如Debezium）业务系统事件（通过消息队列如Kafka）外部API推送（物流追踪、供应商系统）IoT设备数据（仓储传感器、运输车辆GPS）三、React19 新特性在前端实时同步中的应用3.1useHook：简化异步状态管理React19引入的useHook彻底改变了异步数据获取的方式，特别适合处理WebSocket的流式数据。 ==WebSocket.OPEN){reject(newError('WebSocket连接超时'));socket.close();}},10000);});}//使用React19的useHook封装 React19新特性应用：深入学习了如何利用React19的新Hook优化异步数据流管理，实现乐观更新、平滑过渡和优雅的错误处理。
Vue3 封装 AI 问答组件实现 AI 流式回答问题
代码教程 Vue3实现AI流式回答问题：组件封装与应用实例 一、AI流式回答技术原理 （一）传统请求与流式响应对比 传统请求：客户端发送请求 → 服务器处理 → 一次性返回完整响应 流式响应：客户端发送请求 ：支持流式输出的AI模型（如OpenAI GPT系列） 通信协议：使用SSE(Server-Sent Events)或WebSocket 前端处理：实时解析和渲染流式数据 二、Vue3组件封装基础 （一 // 净化HTML防止XSS攻击 const cleanHtml = DOMPurify.sanitize(html); return cleanHtml; }; （三）增强功能：打字机效果 parsed.choices[0].delta.content || ''; fullContent += content; // 控制显示速度，实现打字机效果 关键技术点包括： 流式响应处理：使用Fetch API和ReadableStream解析SSE格式数据 状态管理：合理使用ref和reactive管理对话状态 用户体验优化：实现打字机效果、加载指示器
Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手
vite8-deepseek-webai提供暗黑+亮色主题、支持流式打字输出、深度思考、代码高亮/复制/下载、渲染katex公式/mermaid图等功能。 'deepseek-reasoner' : 'deepseek-chat', stream: true, // 流式输出 max_tokens: 8192, // 一次请求中模型生成 completion token 数(默认使用 4096) temperature: 0.4, // 严谨采样})2026版開工新作uni-app+mphtml结合deepseek跨端ai应用vite7.2-deepseek流式 ai对话|vue3.5+vant4+katex+mermaid智能ai打字会话最新实战Vite7.3+Tauri2.10深度集成DeepSeek桌面端AI智能助手Electron-DeepSeek-Chat 流式AI系统|electron39+vue3+deepseek手搓aielectron38-vite7-vue3os电脑端os管理系统最新版electron38-vite7-admin电脑端中后台管理系统
