Huangyuntse

HTTP 响应体流

HTTP 响应体流是什么

单次 HTTP 请求对应一条响应；响应体暴露为 ReadableStream，浏览器用 fetch 拿到 res.body 后，通过 getReader() 循环 read() 按块消费，像边下载边读一样

HTTP 数据格式

正文多为连续 UTF-8 字节流（例如 Content-Type: text/plain），没有统一的应用层分帧规范；是否在分块边界截断、如何拼接成字符串由业务约定（下文示例把整个回答收成一段纯文本）。

代码实现

服务端代码实现

原始 HTTP 分块：正文为连续 UTF-8 文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

app.post("/api/chat", async (req, res) => {
  try {
    const parsed = chatBodySchema.safeParse(req.body);
    if (!parsed.success) {
      res.status(400).json({ error: parsed.error.flatten() });
      return;
    }

    // 调用模型，返回流式响应数据
    const stream = await invokeChatStream(parsed.data.message);
    res.setHeader("Content-Type", "text/plain; charset=utf-8");
    res.setHeader("Cache-Control", "no-cache, no-transform");
    res.setHeader("X-Content-Type-Options", "nosniff");
    res.flushHeaders();

    for await (const chunk of stream) {
      const text = getChunkText(chunk);
      if (text) res.write(text);
    }
    res.end();
  } catch (err) {
    console.error(err);
    if (!res.headersSent) {
      res.status(500).json({ error: "internal_server_error" });
    } else {
      res.end();
    }
  }
});

MCP概述

MCP（Model Context Protocol）模型上下文协议

MCP用途

能让模型更好的使用各类工具（大模型本身只会问答）

MCP Host

支持MCP协议的软件，Cursor，Claude Desktop，Cline

MCP Server

本质上是一个符合MCP协议的程序，不一定联网

• timeout: 60 （连接MCP Server的超时时间）

• command: uv (程序)

• transportType: stdio、sse（client和MCP Server沟通的方式）
  以一个 MCP Server 为例
  

• MCP Server，MCP Host，用户，模型交互流程
  

• 如何使用别人写的MCP Server

  • mcp.so
  • mcpmarket.com
  • smithery.ai

MCP Server一般用 Python 或 Node 编写，对应启动程序 -> uvx，npx

开发一个MCP Server

MCP底层协议

MCP的含义和地位

概述

JavaScript 提供了一些 API 来处理文件或原始文件数据，例如：File、Blob、FileReader、ArrayBuffer、base64 等

结合官方文档：https://tradingview.github.io/lightweight-charts/docs/plugins/intro 食用
代码见：tradingview示例：K线图绘制图片

Series Primitives

生命周期

• attached：添加到图表时触发，附加方法通过一个参数调用，该参数包含图表、系列以及用于请求更新的回调函数
• detached：移除图表时触发

CommonJS

• 使用require，export进行导入导出
• CommonJS是Node的模块化方案，只能在Node端运行，不能在浏览器端，除非使用一些构建工具进行编译（Webpack、Rollup）
• 特定的第三方库只支持CommonJS，比如下载量很高的ms
• CommonJS属于动态加载，可以直接require一个变量：require(`./${a}`);

  1 2 3 4

  // sum.js exports.sum = (x, y) => x + y; // index.js const { sum } = require("./sum.js");

Npm/Yarn

如何通过Npm发包

files

指定哪些文件会被打包发布（后面详细描述）。

main、browser、exports、module

这四个字段都是用来定义包的入口，npm 只规定了 main 和 browser 这两个字段，exports 是 nodejs 的规范，module 一般被构建工具所支持。

main

main 规定了包的主要入口点，默认值为 index.js。
如果你的包名为 foo 可以通过 require("foo") 引入对应模块导出的内容，所以这应该是个 CommonJS 模块，除非你设置了 "type": "module"。

XSS

跨站脚本攻击（XSS，Cross - Site Scripting） 攻击者通过在目标网站中注入恶意脚本，来获取用户的敏感信息、执行恶意操作等。这些恶意脚本通常是 JavaScript

本质上就是在任何前端js可能读取的地方插入恶意脚本

整体过程

攻击者提交恶意代码 -> 浏览器执行恶意代码

反射型XSS

示例：一个简单的搜索功能，用户在搜索框输入内容后，服务器将用户输入的内容直接在页面上显示。攻击者构造一个类似 http://example.com/search?q=<script>alert('XSS')</script> 的 URL，当用户点击这个链接，就会弹出一个警告框显示 “XSS”。

先开个坑，准备下Web3相关的学习

学习路线

• Web3入门计划： polebug大佬学习记录
• Web3开发学习路线： https://54web3.cc/blog/roadmap/learning-path-web3
• Web3从入门到精通开发学习路线：https://juejin.cn/post/7307185531330838543

WEEK 1: 区块链的基础知识

• 密码学基础
• 区块链基础
• 相关金融知识
• 学习比特币底层技术
• 学习以太坊原理

Hexo介绍

Hexo是一款基于Node.js的开源静态博客框架，用于快速、简单且高效地搭建静态博客网站。本质上是一个静态网站生成器，新增文章只需要编辑md文件，通过运行命令再生成像html的静态文件。

环境搭建

1
2
3
4
5
6
7
8
9
10
11

# 全局安装hexo脚手架
npm install -g hexo-cli

# 创建一blog项目
hexo init blog

# 进入项目
cd blog

# 安装依赖包
npm install

其他操作

1
2

# 右键 Git Bush，用户项目自动化部署
npm install hexo-deployer-git --save

项目预览

1
2
3
4
5
6
7
8

# 清理旧的静态文件
hexo clean

# 生成静态文件
hexo g

# 运行预览项目
hexo s

记录面试中遇到一些比较有意思的场景题

虚拟滚动是如何去实现的（长列表，大表格）

1、监听滚轮事件/触摸事件，记录列表的总偏移量。
2、根据总偏移量计算列表的可视元素起始索引。
3、从起始索引渲染元素至视口底部。
4、当总偏移量更新时，重新渲染可视元素列表。
5、为可视元素列表前后加入缓冲元素。
6、在滚动量比较小时，直接修改可视元素列表的偏移量。
7、在滚动量比较大时（比如拖动滚动条），会重新渲染整个列表。
事件节流。