MCP Worker

🚀 MCP Web 工作线程示例演示

本示例演示了如何使用共享 Web 工作线程架构实现 Model Context Protocol (MCP) 客户端。它展示了在浏览器环境中运用 MCP 的方法，采用解耦架构，仅使用纯 JavaScript，无需任何构建要求。

✨ 主要特性

• 解耦设计：客户端和工作线程独立运行，互不影响。
• 自动回退：若共享工作线程不可用，可回退到其他实现方式。
• 模块化：代码按功能划分，便于维护和扩展。
• 广泛的浏览器支持：完全支持 Chrome、Edge (Chromium-based)、Opera、Android Chrome；部分支持 Firefox（需手动启用）、Safari；不支持 iOS Safari。

📦 安装指南

先决条件

1. 安装 Node.js（推荐使用版本 >= 14）。
2. 在项目根目录运行 npm install。
3. 使用 npm run build 构建生产文件。

启动步骤

1. 启动开发服务器：npm start。
2. 打开浏览器，访问 http://localhost:8000/webworker-demo/。
3. 测试不同功能模块，观察控制台日志和 UI 反馈。

💻 使用示例

基础用法

本示例通过多个组件协同工作来实现 MCP 客户端的功能，以下为各组件的简单介绍：

1. 工人实施（worker.js）

• 包含在工作线程上下文中实现 MCP 客户端的代码。
• 演示工作线程端的消息处理模式。
• 实现了一个简化的 MCP 客户端，无外部依赖。

2. 客户端包装器（mcp-client.js）

• 提供主线程与工作线程通信的简化 API。
• 处理连接、初始化和方法调用。
• 将通信协议与实际 MCP 实现解耦。

3. 模拟服务器（server.js）

• 测试演示服务器实现。
• 提供工具、资源和提示。
• 实现了 MCP 请求处理程序。

4. 演示 UI（index.html）

• 交互式界面用于测试所有 MCP 功能。
• 显示加载状态、连接状态和日志信息。
• 包含工作线程诊断面板，显示加载的脚本路径和状态。

5. 最小化工人（minimal-worker.js）

• 最小化的实现版本，仅处理基本连接。
• 用于检测浏览器是否支持共享工作线程。
• 若失败，会回退到使用 mcp-client.js。

高级用法

客户端和服务端通过特定的 JSON 格式消息进行通信，具体如下：

客户端消息

1. "/#/mcp/connect" { "targetUrl": string }：连接到指定的 MCP 目标 URL。
2. "/#/mcp/request" { "requestId": string, "payload": any }：发送带有唯一标识符和负载的消息。

服务端消息

1. "/#/mcp/connected" { "connectionId": string }：连接成功，返回连接 ID。
2. "/#/mcp/response" { "requestId": string, "payload": any, "error?": string }：发送响应，带有原始请求 ID 和结果。

📚 详细文档

实现组件

1. 工人实施（worker.js）

• 包含在工人上下文中实现 MCP 客户端的代码。
• 演示工人端的消息处理模式。
• 实现了一个简化的 MCP 客户端，没有外部依赖。

2. 客户端包装器（mcp-client.js）

• 提供了主线程与工人通信的简化 API。
• 处理连接、初始化和方法调用。
• 将通信协议与实际 MCP 实现解耦。

3. 模拟服务器（server.js）

• 测试演示服务器实现。
• 提供工具、资源和提示。
• 实现了 MCP 请求处理程序。

4. 演示 UI（index.html）

• 交互式界面用于测试所有 MCP 功能。
• 显示加载状态、连接状态和日志信息。
• 包含工人诊断面板，显示加载的脚本路径和状态。

5. 最小化工人（minimal-worker.js）

• 最小化的实现版本，仅处理基本连接。
• 用于检测浏览器是否支持共享工兵。
• 如果失败，会回退到使用 mcp-client.js。

消息协议

客户端和服务端通过以下 JSON 格式的消息进行通信：

客户端消息

1. "/#/mcp/connect" { "targetUrl": string }
   • 连接到指定的 MCP 目标 URL。
2. "/#/mcp/request" { "requestId": string, "payload": any }
   • 发送带有唯一标识符和负载的消息。

服务端消息

1. "/#/mcp/connected" { "connectionId": string }
   • 连接成功，返回连接 ID。
2. "/#/mcp/response" { "requestId": string, "payload": any, "error?": string }
   • 发送响应，带有原始请求 ID 和结果。

架构优势

浏览器支持

• 完全支持：Chrome, Edge (Chromium-based), Opera, Android Chrome。
• 部分支持：Firefox（需要手动启用），Safari。
• 不支持：iOS Safari。

注意事项

资源加载路径

工人脚本尝试从以下路径加载：

1. ./minimal-worker.js - 相对路径到最小化工人。
2. /webworker-demo/minimal-worker.js - 绝对路径到最小化工人。
3. ./worker.js - 相对路径到完整工人。
4. /webworker-demo/worker.js - 绝对路径到完整工人。

工人诊断面板

显示以下信息：

• 加载状态：成功或失败。
• 连接状态：连接中、已连接、断开。
• 脚本路径：尝试加载的路径和结果。
• 日志信息：错误消息和调试日志。

故障排除

问题 1：无法获取工人脚本

• 确保通过 Web 服务器访问演示页面，不要直接从文件系统访问。
• 检查控制台是否有具体的错误信息。
• 工人诊断面板会显示尝试的路径和结果。

问题 2：共享工兵不支持

• 使用 Chrome 或 Edge 浏览器进行测试。
• 浏览器控制台会提示明确的错误信息。
• 目前没有为不支持共享工兵的浏览器提供回退方案。

问题 3：模块导入失败

• 确保通过 Web 服务器访问演示页面，不要直接从文件系统访问。
• 检查控制台是否有具体的导入路径错误。
• 工人诊断面板会显示尝试的路径和结果。

问题 4：空白页面或无工具/资源显示

• 打开浏览器控制台（F12 或 Cmd + Option + I）查看详细错误信息。
• 确保 JavaScript 在浏览器中已启用。
• 清除缓存后刷新页面。

问题 5：路径解析问题

• 工人尝试从多个路径加载脚本，工人诊断面板会显示结果。
• 如果所有路径都失败，请检查网络连接和文件存在性。