返回市场
微信应用

微信应用

作者:shareAI-lab5 星标更新:2025-04-22

项目介绍

SSE WeChat 小程序

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

项目概述

该项目是一个基于微信小程序的 SSE(Server Sent Events)客户端,主要包括三个核心页面:社区选择页面、聊天页面和个人信息页面。

功能

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

技术实现

  • 使用微信小程序原生开发框架
  • 基于 Express 框架实现 SSE 服务器
  • 聊天功能使用 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 连接的稳定性
  • 增强工具调用结果的可视化显示
  • 增加聊天次数充值功能
  • 实现用户聊天历史记录存储

参考文档

MCP SSE 中转服务器

此服务器是 Model Context Protocol (MCP) 的中转服务器,使用 Server Send Events (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. 登录服务器 - 处理微信小程序的登录认证和用户管理
  2. MCP 代理服务 (包) - 提供 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;
    }
}

服务描述

登录服务器

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

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

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

MCP 代理服务 (包)

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

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

故障排除

如果遇到部署问题,请检查:

  1. 服务器日志

    pm2 logs
    
  2. Nginx 日志

    tail -f /var/log/nginx/error.log
    
  3. 确保正确配置了环境变量

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