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实时通信：维持与客户端的长连接，实时推送消息
- AI聊天能力：集成OpenAI API，提供智能对话功能

中转服务器

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()：检查服务器状态

启动方式

启动服务器

```bash