261 lines
5.2 KiB
Markdown
261 lines
5.2 KiB
Markdown
# SignalR 快速启动指南
|
||
|
||
**5 分钟快速测试 SignalR 实时通讯功能**
|
||
|
||
---
|
||
|
||
## 🚀 快速启动步骤
|
||
|
||
### 步骤 1: 启动后端服务
|
||
|
||
```bash
|
||
# 进入后端目录
|
||
cd server/src/XiangYi.AppApi
|
||
|
||
# 运行服务
|
||
dotnet run
|
||
```
|
||
|
||
**预期输出**:
|
||
```
|
||
info: Microsoft.Hosting.Lifetime[14]
|
||
Now listening on: http://localhost:5000
|
||
info: Microsoft.Hosting.Lifetime[0]
|
||
Application started. Press Ctrl+C to shut down.
|
||
```
|
||
|
||
---
|
||
|
||
### 步骤 2: 配置小程序
|
||
|
||
打开 `miniapp/config/index.js`，确认配置：
|
||
|
||
```javascript
|
||
const CURRENT_ENV = 'development' // 使用开发环境
|
||
|
||
const ENV = {
|
||
development: {
|
||
API_BASE_URL: 'http://localhost:5000/api/app',
|
||
// ...
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 步骤 3: 启动小程序
|
||
|
||
1. 打开 HBuilderX 或微信开发者工具
|
||
2. 导入 `miniapp` 目录
|
||
3. 点击"运行" → "运行到浏览器" 或 "运行到微信开发者工具"
|
||
|
||
---
|
||
|
||
### 步骤 4: 登录测试账号
|
||
|
||
**准备 2 个测试账号**:
|
||
- 账号 A: 手机号 13800138001
|
||
- 账号 B: 手机号 13800138002
|
||
|
||
**登录步骤**:
|
||
1. 打开小程序
|
||
2. 输入手机号
|
||
3. 输入验证码（开发环境可能是固定的，如 123456）
|
||
4. 登录成功
|
||
|
||
---
|
||
|
||
### 步骤 5: 测试实时消息
|
||
|
||
#### 5.1 打开聊天页面
|
||
|
||
**账号 A**:
|
||
1. 进入"消息"页面
|
||
2. 点击与账号 B 的会话（如果没有，先发起聊天）
|
||
|
||
**账号 B**:
|
||
1. 同样进入与账号 A 的聊天页面
|
||
|
||
#### 5.2 发送消息
|
||
|
||
**账号 A**:
|
||
1. 在输入框输入："你好"
|
||
2. 点击"发送"
|
||
|
||
**账号 B**:
|
||
- **立即**看到账号 A 发送的消息（无需刷新）
|
||
- 消息显示在聊天列表底部
|
||
|
||
✅ **如果看到实时消息，说明 SignalR 工作正常！**
|
||
|
||
---
|
||
|
||
### 步骤 6: 测试交换功能
|
||
|
||
**账号 A**:
|
||
1. 点击"交换微信"按钮
|
||
|
||
**账号 B**:
|
||
- **立即**看到交换微信请求卡片
|
||
- 点击"同意"按钮
|
||
|
||
**账号 A**:
|
||
- **立即**看到交换结果
|
||
- 显示账号 B 的微信号
|
||
|
||
✅ **如果看到实时交换响应，说明 SignalR 完全正常！**
|
||
|
||
---
|
||
|
||
## 🔍 查看日志
|
||
|
||
### 后端日志
|
||
|
||
```bash
|
||
# 查看后端控制台输出
|
||
# 应该看到类似以下日志：
|
||
|
||
info: XiangYi.AppApi.Hubs.ChatHub[0]
|
||
用户连接: UserId=1, ConnectionId=abc123
|
||
info: XiangYi.AppApi.Controllers.ChatController[0]
|
||
消息已通过SignalR推送: MessageId=123, ReceiverId=2
|
||
```
|
||
|
||
### 前端日志
|
||
|
||
打开浏览器控制台（F12），应该看到：
|
||
|
||
```
|
||
[SignalR] 正在连接: ws://localhost:5000/hubs/chat
|
||
[SignalR] WebSocket 连接已打开
|
||
[SignalR] 握手成功
|
||
[Chat] SignalR 连接成功
|
||
[SignalR] 已加入会话: 123
|
||
[Chat] 收到新消息: { messageId: 123, content: "你好", ... }
|
||
```
|
||
|
||
---
|
||
|
||
## ❌ 常见问题
|
||
|
||
### 问题 1: 连接失败
|
||
|
||
**错误信息**: `[SignalR] WebSocket 创建失败`
|
||
|
||
**解决方案**:
|
||
1. 确认后端服务已启动
|
||
2. 检查 API_BASE_URL 配置是否正确
|
||
3. 检查是否已登录（Token 是否有效）
|
||
|
||
```bash
|
||
# 检查后端服务
|
||
curl http://localhost:5000/api/app/config/system
|
||
|
||
# 应该返回 JSON 数据
|
||
```
|
||
|
||
---
|
||
|
||
### 问题 2: 收不到消息
|
||
|
||
**可能原因**: SignalR 未连接或事件监听未注册
|
||
|
||
**解决方案**:
|
||
1. 查看控制台是否有 `[Chat] SignalR 连接成功` 日志
|
||
2. 确认已进入聊天页面（会自动连接）
|
||
3. 刷新页面重试
|
||
|
||
---
|
||
|
||
### 问题 3: Token 过期
|
||
|
||
**错误信息**: `401 Unauthorized`
|
||
|
||
**解决方案**:
|
||
1. 重新登录
|
||
2. 检查 Token 是否正确存储
|
||
|
||
```javascript
|
||
// 在控制台执行
|
||
console.log(uni.getStorageSync('token'))
|
||
// 应该返回 JWT Token
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 验证清单
|
||
|
||
完成以下测试，确认 SignalR 功能正常：
|
||
|
||
- [ ] 后端服务启动成功
|
||
- [ ] 小程序启动成功
|
||
- [ ] 账号 A 登录成功
|
||
- [ ] 账号 B 登录成功
|
||
- [ ] SignalR 连接成功（查看日志）
|
||
- [ ] 账号 A 发送消息，账号 B 实时收到
|
||
- [ ] 账号 B 发送消息，账号 A 实时收到
|
||
- [ ] 账号 A 发起交换请求，账号 B 实时收到
|
||
- [ ] 账号 B 响应交换，账号 A 实时收到结果
|
||
- [ ] 断开网络后自动重连
|
||
|
||
---
|
||
|
||
## 🎉 成功标志
|
||
|
||
如果你看到以下现象，说明 SignalR 已成功运行：
|
||
|
||
1. ✅ 控制台显示 `[Chat] SignalR 连接成功`
|
||
2. ✅ 发送消息后，对方**无需刷新**立即看到
|
||
3. ✅ 交换请求和响应**实时推送**
|
||
4. ✅ 断开网络后**自动重连**
|
||
|
||
---
|
||
|
||
## 📝 下一步
|
||
|
||
SignalR 功能已经完整实现，你可以：
|
||
|
||
1. **进行完整测试** - 参考 `miniapp/SignalR测试指南.md`
|
||
2. **部署到生产环境** - 参考 `server/SignalR生产环境配置.md`
|
||
3. **添加更多功能** - 如图片发送、语音消息等
|
||
|
||
---
|
||
|
||
## 💡 提示
|
||
|
||
- 开发环境使用 `ws://`（WebSocket）
|
||
- 生产环境必须使用 `wss://`（WebSocket Secure）
|
||
- 确保防火墙允许 WebSocket 连接
|
||
- 建议使用 Chrome 浏览器进行测试（F12 查看日志）
|
||
|
||
---
|
||
|
||
## 📞 技术支持
|
||
|
||
如果遇到问题，请检查：
|
||
|
||
1. **后端日志** - `server/src/XiangYi.AppApi/bin/Debug/net8.0/logs/`
|
||
2. **前端日志** - 浏览器控制台（F12）
|
||
3. **网络请求** - 浏览器 Network 面板
|
||
|
||
**常用调试命令**:
|
||
|
||
```bash
|
||
# 查看后端进程
|
||
ps aux | grep dotnet
|
||
|
||
# 查看端口占用
|
||
netstat -tlnp | grep 5000
|
||
|
||
# 测试 API 连接
|
||
curl http://localhost:5000/api/app/config/system
|
||
|
||
# 测试 WebSocket 连接（需要安装 wscat）
|
||
npm install -g wscat
|
||
wscat -c ws://localhost:5000/hubs/chat
|
||
```
|
||
|
||
---
|
||
|
||
**祝你测试顺利！🎊**
|