SSE微信小程序

基于SSE服务的微信小程序客户端，提供社区精选、聊天和个人信息等功能。

项目概述

本项目是一个基于微信小程序的SSE（Server-Sent Events）客户端，主要包括三个核心页面：社区精选页面、聊天页面和个人信息页面。

功能特点

• 社区精选页面：展示各类精选的MCP应用和热门推荐
• 聊天页面：实现基于SSE的实时聊天功能，支持高德地图等MCP服务
• 个人信息页面：用户微信账户登录、登出及聊天次数管理
• SSE实时通信：支持服务器与客户端的实时消息推送
• 工具调用流程：实现完整的工具识别、参数解析、调用执行和结果处理流程
• 用户认证系统：支持微信账户登录，管理用户聊天次数

技术实现

• 使用微信小程序原生开发框架
• SSE服务端基于Express框架实现
• 聊天功能使用SSE技术实现服务器与客户端实时通信
• 集成高德地图API，实现地图相关功能
• 使用OpenAI接口处理自然语言请求和工具调用识别
• 遵循微信小程序的设计规范和开发最佳实践

项目结构

.
├── miniprogram/                # 微信小程序客户端
│   ├── app.js                  # 小程序入口文件
│   ├── app.json                # 小程序配置文件
│   ├── app.wxss                # 全局样式文件
│   ├── images/                 # 图片资源
│   ├── pages/                  # 页面文件
│   │   ├── community/          # 社区精选页面
│   │   │   ├── index.js       # 社区页面逻辑
│   │   │   ├── index.json     # 页面配置
│   │   │   ├── index.wxml     # 页面结构
│   │   │   └── index.wxss     # 页面样式
│   │   ├── chat/              # 聊天页面
│   │   │   ├── index.js       # 聊天页面逻辑
│   │   │   ├── index.json     # 页面配置
│   │   │   ├── index.wxml     # 页面结构
│   │   │   └── index.wxss     # 页面样式
│   │   ├── profile/           # 个人信息页面
│   │   │   ├── index.js       # 个人页面逻辑
│   │   │   ├── index.json     # 页面配置
│   │   │   ├── index.wxml     # 页面结构
│   │   │   └── index.wxss     # 页面样式
│   │   └── travel-guide/      # 出行攻略渲染页面
│   │       ├── index.js       # 攻略页面逻辑
│   │       ├── index.json     # 页面配置
│   │       ├── index.wxml     # 页面结构
│   │       └── index.wxss     # 页面样式
│   └── utils/                  # 工具函数
│       ├── sseClient.js        # SSE客户端服务
│       ├── markdown.js         # Markdown解析工具
│       └── mcpConfig.js/         # MCP SSE 配置的地方（Server id可从Cherry Studio获取）
├── server_back/package/             # SSE服务器
│   ├── sse_proxy_server.ts          # SSE中转服务器主文件
│   ├── package.json            # 服务器依赖配置
│   └── .env                    # 环境变量配置
├── package.json                # 项目依赖配置
├── deploy.sh                    # 部署脚本
├── 微信开发者工具配置.md          # 配置说明文档
└── README.md                   # 项目说明文档

SSE服务端

SSE服务端基于Express实现，提供以下功能：

• SSE实时通信：维持与客户端的长连接，实时推送消息
• AI聊天能力：集成OpenAI API，提供智能对话功能

中转服务器

位置：server_back/package/sse_proxy_server.ts

API接口

• POST /sse-chat：创建SSE连接，用于实时聊天
• POST /chat：常规聊天API，不使用SSE连接
• GET /status：获取服务器状态

工具调用示例

以下是系统处理高德地图天气查询的实际案例：

收到SSE聊天请求
OpenAI响应: 工具调用请求 mcp_amap_maps_maps_weather
处理工具调用: mcp_amap_maps_maps_weather
工具调用参数: { city: '深圳市' }
工具调用结果: {
  "status": "1",
  "count": "1",
  "info": "OK",
  "lives": [
    {
      "province": "广东",
      "city": "深圳市",
      "adcode": "440300",
      "weather": "阴",
      "temperature": "26",
      "winddirection": "西南",
      "windpower": "≤3",
      "humidity": "69",
      "reporttime": "2025-04-09 11:00:36"
    }
  ]
}
最终响应: 深圳市昨天的天气状况是阴天，气温为26°C，西南风风力≤3级，湿度为69%。

SSE客户端

SSE客户端在微信小程序中实现，提供以下功能：

• 分块接收数据：模拟SSE的数据接收方式
• 事件处理：解析和处理服务器发送的各类事件
• 工具调用：支持高德地图等工具的调用和结果展示
• 实时渲染：将服务器返回的信息实时渲染到聊天界面

客户端API

• createSseConnection()：创建SSE连接
• sendChatMessage()：发送常规聊天消息
• checkServerStatus()：检查服务器状态

启动方式

启动服务器

# 安装依赖并启动服务器
npm run start-server

# 或者使用调试脚本
./debug.sh

服务器默认在3091端口运行，如遇端口占用会自动尝试释放。

运行小程序

1. 使用微信开发者工具打开项目
2. 在"详情" -> "本地设置"中勾选"不校验合法域名"
3. 确保服务器正常运行
4. 在模拟器中预览效果或进行真机调试

开发注意事项

• 遵循微信小程序资源大小限制，图片和音频资源不超过200K
• 使用占位图代替较大的图片资源
• SSE连接需要服务器支持跨域请求
• 本地开发时请确保微信开发者工具已勾选"不校验合法域名"
• 真机调试时需将服务器地址改为电脑的局域网IP

用户认证系统

本项目实现了完整的微信账户登录与聊天次数管理功能：

登录功能

• 微信账户登录：使用微信小程序官方的 wx.getUserProfile API 获取用户信息
• 用户信息展示：在个人页面展示用户头像、昵称等信息
• 退出登录：支持用户退出当前账户

聊天次数管理

• 初次登录赠送：用户首次登录时自动赠送200次聊天次数
• 消费机制：每次聊天消耗1次聊天次数
• 次数显示：在个人页面和聊天页面实时显示剩余聊天次数

云开发集成

• 云函数：使用微信云开发的云函数实现用户认证和数据存储
• 数据库：使用云开发数据库存储用户信息和聊天次数
• 本地调试：支持本地调试模式，方便开发测试

未来计划

• 添加更多MCP服务类型
• 优化SSE连接的稳定性
• 增强工具调用结果的可视化展示
• 添加聊天次数充值功能
• 实现用户聊天历史记录存储

参考文档

• 微信小程序开发文档
• Server-Sent Events 教程
• OpenAI API文档

MCP SSE代理服务器

这个服务器是Model Context Protocol (MCP)的代理服务器，它使用服务器发送事件(SSE)来与MCP服务器通信，并集成了OpenAI GPT-4o来智能选择和调用工具。

功能特点

• 连接到MCP服务器并管理连接
• 使用OpenAI LLM智能选择合适的工具来处理用户请求
• 支持多轮工具调用并整合结果
• 自动清理不活跃的连接

安装

npm install

配置

1. 复制.env.example文件为.env
2. 在.env文件中配置OpenAI API密钥和其他设置

OPENAI_API_KEY=your_openai_api_key_here
OPENAI_MODEL=gpt-4o
OPENAI_BASE_URL=https://api.openai.com/v1
PORT=3091

使用方法

启动服务器:

npm start

API端点

1. 创建连接 - POST /connect

   {
     "sseUrl": "https://example-sse-server.com/sse"
   }
   

2. 发送消息 - POST /send/:connectionId

   {
     "message": "我想知道纽约现在的时间"
   }
   

   或

   {
     "type": "tool_call",
     "tool": "get_current_time",
     "args": { "timezone": "America/New_York" }
   }
   

3. 获取可用工具 - GET /tools/:connectionId

4. 关闭连接 - DELETE /connection/:connectionId

5. 检查服务器状态 - GET /status

处理流程

1. 用户消息发送到服务器
2. 服务器使用GPT-4o分析消息
3. LLM选择合适的工具并调用
4. 服务器执行工具调用并返回结果
5. 如需要，LLM可能会选择更多工具调用
6. 最后LLM整合所有工具调用结果，提供完整回复

微信小程序MCP服务端部署说明

服务组成

该项目包含两个主要的服务端组件：

1. 登录服务器 (LoginServer) - 处理微信小程序的登录认证和用户管理
2. MCP代理服务 (Package) - 提供MCP (Model Context Protocol) 代理功能

部署

前提条件

• Node.js 环境 (v14+)
• PM2 进程管理器
• Nginx
• 服务器需要有公网IP
• 域名（如需HTTPS）

部署脚本

项目提供了自动化部署脚本 deploy.sh，执行以下命令进行部署：

chmod +x deploy.sh
./deploy.sh

部署脚本将会：

1. 创建本地构建目录
2. 打包服务端代码
3. 上传到目标服务器
4. 安装依赖
5. 配置Nginx反向代理
6. 使用PM2启动服务
7. 处理环境变量配置

环境变量配置

部署完成后，需要配置两个服务的环境变量：

登录服务器 (.env)

# 服务配置
PORT=3090
NODE_ENV=production

# JWT配置
JWT_SECRET=your_jwt_secret_here
JWT_EXPIRES_IN=7d

# 微信小程序配置
WX_APPID=your_wx_appid_here
WX_SECRET=your_wx_secret_here

# 数据存储配置
DATA_DIR=data

MCP代理服务 (.env)

# 服务配置
PORT=3091
NODE_ENV=production

# OpenAI配置
OPENAI_API_KEY=your_openai_api_key_here
OPENAI_MODEL=gpt-4o
OPENAI_BASE_URL=https://api.openai.com/v1

手动部署步骤

如需手动部署，请参考以下步骤：

1. 将服务端代码上传到服务器
2. 安装依赖

   cd loginServer && npm install
   cd package && npm install && npm run build
   

3. 配置环境变量
4. 启动服务

   cd loginServer && pm2 start app.js --name wxapp-login-server
   cd package && pm2 start dist/sse_proxy_server.js --name mcp-proxy-server
   

5. 配置Nginx反向代理

Nginx配置示例

server {
    listen 80;
    server_name your-domain.com;

    # 登录服务器
    location /api/ {
        proxy_pass http://localhost:3090;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # MCP代理服务器
    location / {
        proxy_pass http://localhost:3091;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

服务说明

登录服务 (LoginServer)

登录服务负责处理微信小程序的登录认证和用户管理。主要API端点包括：

• /api/user/login - 用户登录
• /api/user/info - 获取/更新用户信息
• /api/user/chat-credits - 管理聊天次数

详细API文档请参考 server_back/loginServer/README.md

MCP代理服务 (Package)

MCP代理服务提供了与AI模型交互的能力，通过SSE连接协议实现。主要端点包括：

• /discover-mcp - 发现MCP服务器
• /connect - 创建连接
• /send/:connectionId - 发送消息
• /tools/:connectionId - 列出可用工具

故障排查

如遇到部署问题，请检查：

1. 服务器日志

   pm2 logs
   

2. Nginx日志

   tail -f /var/log/nginx/error.log
   

3. 确保环境变量正确配置

4. 检查所需端口是否已开放