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端口运行，如遇端口占用会自动尝试释放。

运行小程序

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

开发注意事项

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

用户认证系统

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

登录功能

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

聊天次数管理

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

云开发集成

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

未来计划

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

参考文档

MCP SSE代理服务器

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

功能特点

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

安装

npm install

配置

复制.env.example文件为.env
在.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端点

创建连接 - POST /connect

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

发送消息 - POST /send/:connectionId

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

或

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

获取可用工具 - GET /tools/:connectionId
关闭连接 - DELETE /connection/:connectionId
检查服务器状态 - GET /status

处理流程

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

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

服务组成

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

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

部署

前提条件

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

部署脚本

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

chmod +x deploy.sh
./deploy.sh

部署脚本将会：

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

环境变量配置

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

登录服务器 (.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

手动部署步骤

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

将服务端代码上传到服务器

安装依赖

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

配置环境变量

启动服务

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

配置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 - 列出可用工具

故障排查

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

服务器日志
```
pm2 logs
```
Nginx日志
```
tail -f /var/log/nginx/error.log
```
确保环境变量正确配置
检查所需端口是否已开放

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
miniprogram		miniprogram
server_back		server_back
.DS_Store		.DS_Store
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
MCP Client与Server通信过程分享.md		MCP Client与Server通信过程分享.md
README.md		README.md
deploy.sh		deploy.sh
local-server.js		local-server.js
package-local.json		package-local.json
project.config.json		project.config.json
project.private.config.json		project.private.config.json
uploadCloudFunction.sh		uploadCloudFunction.sh
uploadError.txt		uploadError.txt
微信开发者工具配置.md		微信开发者工具配置.md

shareAI-lab/wxapp

Folders and files

Latest commit

History

Repository files navigation

SSE微信小程序

项目概述

功能特点

技术实现

项目结构

SSE服务端

中转服务器

API接口

工具调用示例

SSE客户端

客户端API

启动方式

启动服务器

运行小程序

开发注意事项

用户认证系统

登录功能

聊天次数管理

云开发集成

未来计划

参考文档

MCP SSE代理服务器

功能特点

安装

配置

使用方法

API端点

处理流程

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

服务组成

部署

前提条件

部署脚本

环境变量配置

手动部署步骤

Nginx配置示例

服务说明

登录服务 (LoginServer)

MCP代理服务 (Package)

故障排查

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages