Forward の Blog

SSE 基本概念 Server-Sent Events（SSE）是一种允许服务器向客户端实时推送更新的 Web 技术。与传统的请求 - 响应模式不同，SSE 建立了一个单向的通信通道，服务器可以主动向客户端发送数据，而客户端只能被动接收。这种特性使得 SSE 非常适合用于实时数据更新的场景，如实时新闻推送、股票行情更新等。 本质参考文献：阮一峰 严格地说，HTTP 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。 也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流，视频播放就是这样的例子。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。 SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE，其他浏览器都支持。 与 WebSocket 区别 特性 SSE (Server-Sent Events) WebSocket 通信方向 单工（服务器到客户端） 全双工 协议 ...

智能体定义智能体（AI Agent）是一种能够自主行动、感知环境、 做出决策并与环境交互的计算机系统或实体，通常依赖大型语言模型作为其核心决策和处理单元，具备独立思考、 调用工具去逐步完成给定目标的能力。 架构 核心要素 大模型 (LLM)：大模型作为 “大脑”：提供推理、规划和知识理解能力，是 AI Agent 的决策中枢。 记忆（Memory）： 短期记忆：存储单次对话周期的上下文信息，属于临时信息存储机制。受限于模型的上下文窗口长度。 长期记忆：可以横跨多个任务或时间周期，可存储并调用核心知识，非即时任务。可以通过模型参数微调（固化知识）、知识图谱（结构化语义网络）或向量数据库（相似性检索）方式实现。长期记忆的主要体现为 个人知识库。 工具使用 (Tool Use)：调用外部工具（如 API、数据库）扩展能力边界。 规划决策 (Planning)：通过任务分解、反思与自省框架实现复杂任务处理。例如，利用思维链（Chain of Thought）将目标拆解为子任务，并通过反馈优化策略。 行动 (Action)：实际执行决策的模块，涵盖软件接口操作（如自动订票）和物理交互（如机器人执行搬运）。比 ...

前言在传统的多页 Web 应用中，每次用户访问页面时，都会从服务器获取最新的页面和资源，因此版本更新相对简单，用户总是能获取到最新的版本。然而，SPA 在首次加载后，前端的静态资源会缓存在浏览器内存中，且在整个使用过程中通常不会自动重新加载。这种特性意味着如果应用有新的版本发布，用户可能仍在使用旧版本，无法立即获得最新的功能、修复或安全更新。 那么，在我们部署之后，如何提醒用户版本更新，并引导用户刷新页面呢？ 手搓比较构建文件的 hash 值这里用轮询的方式请求 index.html 文件，从中解析里面所有的 js 文件，由于 vue 打包后每个 js 文件都有指纹标识，因此对比每次打包后的指纹，分析文件是否存在变动，如果有变动则提示用户更新！（该方案需要 webpack/vite 开启打包文件带上 hash 值） 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 ...

浏览器缓存的分类参考文献：深入理解浏览器的缓存机制之协商缓存与强缓存 浏览器缓存方式主要有两类：强缓存和协商缓存。 浏览器在第一次请求发生后，再次请求时： 浏览器会先获取该资源缓存的 header 信息，根据其中的 expires 和 cache-control 判断是否命中强缓存，若命中则直接从缓存中获取资源，包括缓存的 header 信息，本次请求不会与服务器进行通信； 如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的 header 字段信息（Last-Modified / IF-Modified-Since、Etag / IF-None-Match），由服务器根据请求中的相关 header 信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应 header 信息更新缓存中的对应 header 信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容； 强缓存强缓存指的是在缓存时间内不会向服务器发起请求，只有过期之后才会向服务器发起请求，整个流程如下所示： 在浏览器中，强缓存分为 Expires（http1.0 规范） ...

什么是 Webpack 官网 官方解释：webpack is a static module bundler for modern JavaScript applications. 翻译一下：webpack 是一个静态的模块化打包工具，为现代的 JavaScript 应用程序； 我们来对上面的解释进行拆解： 打包 bundler：webpack 可以将帮助我们进行打包，所以它是一个打包工具； 静态的 static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）； 模块化 module：webpack 默认支持各种模块化开发，ES Module、CommonJS、AMD 等； 现代的 modern：现代前端的开发越来越复杂，催生了 webpack 的出现和发展； 即：无论开发使用什么语言，最终通过 webpack 将代码打包成普通的静态资源（详见下文：Webpack 依赖图）； 环境 Webpack 的运行是依赖 Node 环境的，所以我们电脑上必须有 Node 环境； 安装 webpack 的安装目前分为两个：webpack（代码使用）、webpack-cli（命令行使用）； 这里推荐局 ...

背景网站做完之后，移交给第三方机构进行安全检测，对” 安全功能验证观察报告” 指出的问题进行了如下修改； 接口重放什么是重放参考文献：基于 timestamp 和 nonce 的防止重放攻击方案 重放攻击指的是攻击者通过发送一个目的主机已接受到的包，来达到欺骗系统的目的。其基本原理就是把窃听到的数据原封不动的重新发送给接收方 (好像修改了数据在发送就不叫重放了)，即使传输的数据是加密的，窃听方不知道具体的数据内容，但是容易知道数据的作用（即使不知道作用也能对系统造成一定破坏），这时就能通过原封不动的重新发送达到一定的目的，比如： 影响数据： 重放添加接口可能会无限添加数据； 数据泄漏： 攻击者可以重复访问敏感数据，导致数据泄漏； 资源耗尽： 重复请求可能导致服务器资源的枯竭，影响正常用户的服务； 身份伪装： 通过重复使用合法用户的身份验证凭据，攻击者可以伪装成合法用户执行操作； 如何防止重放给每个请求加上不可复制、不可模仿的唯一标识：时间戳 + 随机数并加密； 时间戳 优点：服务端对请求时间戳进行判断，如超过半分钟，认定为重放攻击，请求无效； 缺点：时间戳无法完全防止重放攻击。未认证系统还是可 ...

koa2 项目实战本文所有代码已上传：github 项目的搭建目录结构的划分 按照功能模块划分：例如：控制器 (controller) 的放在一起；操作数据库 (service) 的放在一起…… 按照业务模块划分：一个完整的小功能放在一起； 本文将用功能模块划分 1234567-src -main.js // 入口文件 -app // 全局文件夹 -controller // 所有的控制器 -service // 数据库操作相关 -router // 路由相关 -utils // 工具 安装依赖 1234// 在 src 目录下 npm init -ynpm i koanpm i nodemon -D //-D 为开发依赖 设置快捷启动 12345// 在 package.json 配置 "scripts": { "start": "nodemon ./src/main.js" }// 之后可以直接通过 npm run start 方式启动项目，不需要找目录结构了 入口文件 ma ...

正向代理与反向代理 反向代理：服务端将请求转发给其他应用程序，比如转给 Java； 正向代理：客户端使用，比如 vpn； 一句话就是：正向代理代理客户端，反向代理代理服务器； 环境 win11、VMware17 Pro、CentOS Linux release 7.9.2009 (Core)，Nginx-1.24.0、静态 IP：192.168.209.111、192.168.209.112、192.168.209.113、192.168.209.114； 查看 centos 版本 1cat /etc/redhat-release 关闭防火墙： 1systemctl stop firewalld 重启网络服务 1systemctl restart network 反向代理代理网站 123location / { proxy_pass http://www.atguigu.com/;} 在浏览器地址栏输入 192.168.209.111，然后地址栏不变，但访问的是尚硅谷的网站； 代理网站，地址栏 url 发生改变 123location /  ...

调研背景 公司项目打算采用 HTTPS 来保证数据的安全性。在计划零成本的前提下，看是否可以实现 HTTPS。 HTTP 与 HTTPS 区别 数据加密：HTTPS 使用 SSL/TLS 协议对传输数据进行加密，使得第三方无法窃取数据内容。HTTP 传输的数据是明文，容易被黑客窃取和篡改。 数据完整性：在数据传输过程中，HTTPS 使用消息认证码（MAC）校验数据完整性，如果数据被篡改或者损坏，在传输过程中会被损坏。 身份验证：HTTPS 使用证书机制来验证网络通信的双方身份，加强了验证的强度和客户端和服务器之间的信任。HTTP 没有身份验证机制，容易遭受中间人攻击。 HTTPS 并不是一种新的协议，我们可以理解为 HTTPS 协议 = HTTP 协议 + SSL/TLS 协议。通常来说，HTTP 是直接和 TCP 进行通信的。当我们使用 SSL/TLS 时，会变成先和 SSL/TLS 通信，然后再由 SSL/TLS 和 TCP 进行通信。 SSL/TLS SSL（Secure Sockets Layer）和 TLS（T ...

TypeScript 是什么 TS 是 JS 的超集，所以 JS 基础的类型都包含在内 TypeScript 开发环境搭建 全局安装 typescript： 1npm install typescript -g 查看 typescript 当前版本号： 1tsc -v 将 TS 编译成 JS (TS 不能直接在浏览器执行，需要编译器将 TS 转为 JS) 1tsc xxx.ts 基础数据类型 基础类型：Number、String、Boolean、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt。 字符串类型 12345678let str: string = "这是字符串类型";// 上方我们将 str 这个变量定义为了 string 类型，如果对他输入其他类型的内容就会报错，例如：let str1: string = 666;// 这个就会报错了，会提示你不能将类型 "number" 分配给类型 "string"let muban: string = `web${str}`;// 我们也可以使用 E ...