AI导哈

MCP传输协议分析工具

该工具通过浏览器网络标签实时观察MCP传输协议行为，帮助工程师理解JSON-RPC交互和流式传输机制。

  • by jjsridharan
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 jjsridharan/mcp-transports-explained

使用说明

MCP运输说明

通过在浏览器的“网络”选项卡中查看MCP传输来了解它们

此存储库探讨了如何 模型上下文协议（MCP） 运输工具在实际操作中表现良好。此存储库适用于希望在传输级别而不是通过SDK抽象来理解MCP的工程师。

这里的示例不是仅依赖于规范或SDK抽象，而是设计为：

  • 直接在浏览器中运行
  • 通过浏览器DevTools网络选项卡检查
  • 与真实的HTTP请求、响应和流相关联

目标是建立一个 正确的心理模型 通过观察真实的网络流量来分析MCP传输。

建议阅读顺序：

  1. README.md（此文件）
  2. 可流式传输的http自述文件
  3. 遗留sse自述文件
  4. 心智模型

为什么存在此存储库

MCP引入了一种干净、结构化的方式，使用JSON-RPC与工具进行交互。 然而，许多工程师在以下问题上遇到了困惑：

  • 流媒体实际上在哪里发生？
  • 为什么POST请求流式响应而不是GET？
  • 为什么SSE在浏览器中的行为不符合我的预期？
  • MCP是有状态的还是无状态的？
  • 旧的基于SSE的方法和可流式HTTP之间有什么变化？

此存储库的存在是为了通过以下方式回答这些问题：

  • 实现多种MCP传输方式
  • 根据MCP规范验证行为
  • 根据实际服务器实现验证行为
  • 在HTTP级别观察一切

这是一个 学习和参考库，而不是生产SDK。

如何使用此存储库

📸 前方截图

此存储库有意先使用浏览器。网络选项卡的屏幕截图用于显示 确切地 流媒体、响应和事件出现的地方。

您将看到像下面这样的占位符——在跟随的同时可以随意打开图像。

浏览器网络选项卡显示可流式传输http的完整生命周期。

SSE响应（仅接受SSE GET请求中的帖子和实际响应）

核心心智模型

这里有两种根本不同的MCP传输模型：

1.流式HTTP（当前MCP规范）

  • 来自客户端的每条JSON-RPC消息都通过以下方式发送 HTTP POST

  • 服务器可能会响应：

    • application/json （单一响应），或
    • text/event-stream （请求范围的流媒体）

  • 流媒体是 与发起它的POST请求相关联

  • 进度通知和最终结果显示在同一HTTP响应上

  • 基于GET的SSE保留用于 未经请求的服务器消息，不是工具执行

关键要点

在流式HTTP中，流式传输是一种 响应格式不是全球运输。

这种设计能够：

  • 无状态缩放
  • 干净重试
  • 负载均衡器友好性
  • 更简单的服务器实现

2.基于苏格兰和南方能源公司的传统MCP（历史/教育）

早期的MCP实现使用了不同的模型：

  • 客户端打开一个长期 获取SSE连接
  • 所有服务器消息（响应、进度、通知）都流过该流
  • 客户端使用JSON-RPC ID将请求和响应关联起来
  • 请求通过POST单独发送

此模型：

  • 感觉直观
  • 与浏览器和 EventSource
  • 使流媒体非常可见

但它也：

  • 将复杂性推给客户
  • 使重试和恢复变得复杂
  • 使无状态扩展更加困难

该存储库包括一个可用的遗留SSE客户端，以说明这些权衡。

浏览器现实（重要）

浏览器施加了严重影响MCP传输的硬约束：

  • EventSource 不支持自定义标头
  • 授权标头不能附加到SSE连接
  • 基于会话或经过身份验证的SSE需要使用 fetch() 与溪流
  • CORS和凭据直接影响观察到的行为

由于这些原因，许多MCP示例在浏览器和服务器端客户端中的行为不同。 这个存储库使这些差异变得清晰可见。

存储库布局

mcp-transports-explained/
├── streamable-http/
│   ├── browser-client.js
│   ├── stateless_tool_call.js
│   └── README.md
│
├── legacy-sse/
│   ├── legacy-sse-client.js
│   └── README.md
│
├── docs/
│   ├── mental-model.md
│
└── diagrams/

streamable-http/

使用浏览器友好的JavaScript演示当前的MCP Streamable HTTP传输。

重点领域：

  • 请求范围流媒体
  • 无状态工具调用
  • 在“网络”选项卡中观察POST响应

深入了解可流式传输的http 在本自述文件中.

legacy-sse/

演示了一个基于SSE的旧式会话范围MCP客户端。

重点领域：

  • 单SSE流
  • 客户端请求关联
  • 进度通知路由

深入了解传统sse 在本自述文件中.

docs/

构建心智模型 在本自述文件中.

如何使用此存储库

  1. 运行MCP服务器（本地或远程）

  2. 在浏览器控制台中打开JavaScript文件

  3. 打开DevTools→ 网络选项卡

  4. 执行示例

  5. 观察：

    • 哪个请求流
    • 响应出现的位置
    • 如何实现进展
    • 不同运输方式的表现

重点在于 观察不是抽象。

这是给谁的

  • 实施MCP客户端或服务器的工程师
  • 平台和基础设施工程师评估MCP的采用情况
  • 工程师在浏览器中调试MCP行为
  • 技术负责人审查传输和可扩展性的权衡

非目标

此存储库有意这样做 不:

  • 提供生产就绪的客户端SDK
  • 将MCP行为隐藏在抽象后面
  • 优化以最小化代码大小

清晰度和正确性优先。

闭幕词

MCP的运输设计反映了以下两者之间的现实权衡：

  • 简洁
  • 可扩展性
  • 可观测性
  • 浏览器约束

了解这些权衡使MCP更容易推理。

这个存储库试图让这些权衡变得可见。

相关 MCP