00:00 / 03:10
连播
清屏
智能
倍速
点赞8
SSE客户端消息解析与打字机效果实现 1、获取RES与Reader对象 -从fetch请求的响应中获取RES,其body为一个readable stream。 -调用RES.body.getReader()方法得到reader对象,用于逐步读取流数据。 2、定义解码器TextDecoder -创建decoder常量,实例化TextDecoder,指定编码格式为UTF-8。 3、使用while循环读取流数据 -采用while (true)循环持续调用reader.read()方法读取数据块。 -reader.read()返回一个Promise,await后解构出value和done两个属性。 -value为当前读取到的Uint8Array类型的数据片段,done表示流是否已完全读取完毕。 4、解码与拼接数据流 -使用decoder.decode(value)将Uint8Array解码为字符串。 -初始化空字符串messageText,每次循环中将解码后的字符串累加至messageText。 5、打印解析后的完整数据 -在循环结束后打印payload结构,其中包含标准化的响应数据。 -示例数据显示为“delta 0 1 2 3 4 5 6 7 8 9 10”及“and”等文本片段,表明数据按流式分段接收并成功拼接。 6、实现前端打字机效果 -将每次接收到的新数据动态更新到页面的消息状态(message state)中。 -配合请求队列与渲染队列机制,实现内容逐段添加至UI的视觉效果。 7、自动滚动与页面渲染 -每次新数据到达并更新视图后,自动调用滚动逻辑(如scrollToBottom),确保最新内容可见。 8、依赖安装与Markdown支持 -安装vue-rendered-markdown依赖(版本0.59),用于支持消息内容中Markdown格式的解析与展示。 9、SSE处理流程 -整个SSE数据处理流程包括:获取流 → 创建reader → 解码 → 循环读取 → 拼接字符串 → 更新状态 → 渲染UI → 自动滚动。 -最终实现类LLM回复的逐字输出打字机效果,提升用户体验。 #前端开发 #前端开发工程师 #前端进阶 #前端学习 #SSE
00:00 / 07:53
连播
清屏
智能
倍速
点赞18
王莫闲3周前
GUI技术的本质 最近做了一个多语言混合开发的项目,让我突然明白了 GUI 的本质。 事情是这样的,公司想开发一个客户端软件,其中涉及到一些渲染性能敏感的部分必须的 C++ 来开发。但 C++ 方面的人力资源不足以支持整个软件全部使用 C++ 开发,于是就退而求其次改用 Electron + C++ 混合开发。 Electron 由前端开发人员负责大部分 UI 功能的开发,渲染性能敏感的部分使用 C++ 开发,但是呢又需要这两种技术开发的 UI 在同一个窗口中显示,怎么解决呢? 经过我们一番技术预研后,发现 Electron 可以取到窗口句柄,把这个句柄交给 C++,C++ 就能实现在这个窗口上实现 UI 叠加绘制。那这是什么原理呢? 因为使用 Electron API 创建的 Window 与使用 C++/C# 等客户端语言创建的窗口本质上并没有什么不同,底层都是基于 Windows 的 Win32API 来创建的。如果说显示器是一个画布,那我们使用各种 GUI 技术创建的窗口,对于硬件图形接口(如GDI/DirectX)来说就像一个个图层,只需要告诉图形接口位置、大小、形状就可以进行任意绘制。 那么理论上也可以使用 JS 将 GDI/DirectX 包装一层形成一套纯 JS 开发原生应用的 GUI 技术。至于为什么至今还没有这样技术,我想大概还是 JS 的设计初衷、语言特性、性能等不太合适吧。 那我们是不是可以只使用类 JS 的语法,完全重写一套更适合 GUI 开发的语言运行时呢? 比如…… ArkTS! #编程 #GUI #前端开发 #JavaScript
00:00 / 01:40
连播
清屏
智能
倍速
点赞29
00:00 / 02:54
连播
清屏
智能
倍速
点赞1242