Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
317
pages/websocket-test/websocket-test.js
Normal file
317
pages/websocket-test/websocket-test.js
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
// WebSocket连接测试页面
|
||||
const app = getApp();
|
||||
const wsManager = require('../../utils/websocket-manager-v2.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 连接状态
|
||||
connectionStatus: '未连接',
|
||||
isConnected: false,
|
||||
isConnecting: false,
|
||||
|
||||
// 测试信息
|
||||
testResults: [],
|
||||
logs: [],
|
||||
|
||||
// 用户信息
|
||||
userInfo: null,
|
||||
hasToken: false,
|
||||
|
||||
// 测试消息
|
||||
testMessage: 'Hello WebSocket!',
|
||||
|
||||
// 统计信息
|
||||
messagesSent: 0,
|
||||
messagesReceived: 0,
|
||||
connectionAttempts: 0,
|
||||
lastConnectTime: null,
|
||||
lastDisconnectTime: null
|
||||
},
|
||||
|
||||
// 页面加载
|
||||
onLoad() {
|
||||
console.log('WebSocket测试页面加载');
|
||||
|
||||
// 初始化WebSocket管理器
|
||||
this.initWebSocket();
|
||||
|
||||
// 注册消息监听器
|
||||
this.registerMessageHandlers();
|
||||
},
|
||||
|
||||
// 注册消息处理器
|
||||
registerMessageHandlers() {
|
||||
// 监听所有类型的消息
|
||||
wsManager.on('new_message', (message) => {
|
||||
this.addLog(`📨 收到new_message: ${JSON.stringify(message)}`);
|
||||
this.setData({
|
||||
messagesReceived: this.data.messagesReceived + 1
|
||||
});
|
||||
});
|
||||
|
||||
wsManager.on('message_status', (message) => {
|
||||
this.addLog(`📨 收到message_status: ${JSON.stringify(message)}`);
|
||||
this.setData({
|
||||
messagesReceived: this.data.messagesReceived + 1
|
||||
});
|
||||
});
|
||||
|
||||
wsManager.on('unread_count_update', (message) => {
|
||||
this.addLog(`📨 收到unread_count_update: ${JSON.stringify(message)}`);
|
||||
this.setData({
|
||||
messagesReceived: this.data.messagesReceived + 1
|
||||
});
|
||||
});
|
||||
|
||||
wsManager.on('message', (message) => {
|
||||
this.addLog(`📨 收到通用message: ${JSON.stringify(message)}`);
|
||||
this.setData({
|
||||
messagesReceived: this.data.messagesReceived + 1
|
||||
});
|
||||
});
|
||||
|
||||
// 连接状态监听
|
||||
wsManager.on('connected', () => {
|
||||
this.addLog('✅ WebSocket连接成功');
|
||||
this.setData({
|
||||
isConnected: true,
|
||||
connectionStatus: '已连接',
|
||||
lastConnectTime: new Date().toLocaleTimeString()
|
||||
});
|
||||
});
|
||||
|
||||
wsManager.on('disconnected', () => {
|
||||
this.addLog('❌ WebSocket连接断开');
|
||||
this.setData({
|
||||
isConnected: false,
|
||||
connectionStatus: '已断开'
|
||||
});
|
||||
});
|
||||
|
||||
wsManager.on('error', (error) => {
|
||||
this.addLog(`❌ WebSocket错误: ${error}`);
|
||||
});
|
||||
},
|
||||
|
||||
// 更新连接状态
|
||||
updateStatus() {
|
||||
const status = wsManager.getStatus();
|
||||
|
||||
let statusText = '未连接';
|
||||
if (status.isConnecting) {
|
||||
statusText = '连接中...';
|
||||
} else if (status.isConnected) {
|
||||
statusText = '已连接';
|
||||
} else if (status.reconnectAttempts > 0) {
|
||||
statusText = `重连中 (${status.reconnectAttempts})`;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
connectionStatus: statusText,
|
||||
isConnected: status.isConnected,
|
||||
isConnecting: status.isConnecting
|
||||
});
|
||||
},
|
||||
|
||||
// 开始状态监控
|
||||
startStatusMonitoring() {
|
||||
this.statusTimer = setInterval(() => {
|
||||
this.updateStatus();
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 停止状态监控
|
||||
stopStatusMonitoring() {
|
||||
if (this.statusTimer) {
|
||||
clearInterval(this.statusTimer);
|
||||
this.statusTimer = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 添加日志
|
||||
addLog(message) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const logEntry = `[${timestamp}] ${message}`;
|
||||
|
||||
this.setData({
|
||||
logs: [logEntry, ...this.data.logs.slice(0, 49)] // 保留最近50条日志
|
||||
});
|
||||
|
||||
console.log(logEntry);
|
||||
},
|
||||
|
||||
// 连接WebSocket
|
||||
async onConnect() {
|
||||
try {
|
||||
this.addLog('🚀 开始连接WebSocket...');
|
||||
this.setData({
|
||||
connectionAttempts: this.data.connectionAttempts + 1
|
||||
});
|
||||
|
||||
await wsManager.connect();
|
||||
this.addLog('✅ 连接请求已发送');
|
||||
} catch (error) {
|
||||
this.addLog(`❌ 连接失败: ${error.message}`);
|
||||
}
|
||||
},
|
||||
|
||||
// 断开WebSocket
|
||||
onDisconnect() {
|
||||
this.addLog('🔌 主动断开连接...');
|
||||
wsManager.disconnect();
|
||||
},
|
||||
|
||||
// 发送测试消息
|
||||
onSendMessage() {
|
||||
if (!this.data.isConnected) {
|
||||
wx.showToast({
|
||||
title: 'WebSocket未连接',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const message = {
|
||||
type: 'test',
|
||||
content: this.data.testMessage,
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
const success = wsManager.send(message);
|
||||
if (success) {
|
||||
this.addLog(`📤 发送消息: ${this.data.testMessage}`);
|
||||
this.setData({
|
||||
messagesSent: this.data.messagesSent + 1
|
||||
});
|
||||
} else {
|
||||
this.addLog('❌ 消息发送失败');
|
||||
}
|
||||
},
|
||||
|
||||
// 🔥 测试发送正确格式的聊天消息
|
||||
onSendChatMessage() {
|
||||
if (!this.data.isConnected) {
|
||||
wx.showToast({
|
||||
title: 'WebSocket未连接',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 🔥 详细记录发送的消息格式
|
||||
const messageDetails = {
|
||||
receiverId: '9118366451',
|
||||
content: this.data.testMessage,
|
||||
msgType: 'text',
|
||||
chatType: 0
|
||||
};
|
||||
|
||||
console.log('🔍 准备发送聊天消息:', messageDetails);
|
||||
|
||||
const success = wsManager.sendChatMessage(
|
||||
messageDetails.receiverId,
|
||||
messageDetails.content,
|
||||
messageDetails.msgType,
|
||||
messageDetails.chatType
|
||||
);
|
||||
|
||||
if (success) {
|
||||
this.addLog(`📤 发送聊天消息: ${this.data.testMessage}`);
|
||||
this.addLog(`📋 消息详情: ${JSON.stringify(messageDetails)}`);
|
||||
this.setData({
|
||||
messagesSent: this.data.messagesSent + 1
|
||||
});
|
||||
} else {
|
||||
this.addLog('❌ 聊天消息发送失败');
|
||||
}
|
||||
},
|
||||
|
||||
// 🔥 测试发送心跳消息
|
||||
onSendHeartbeat() {
|
||||
if (!this.data.isConnected) {
|
||||
wx.showToast({
|
||||
title: 'WebSocket未连接',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const heartbeatMessage = {
|
||||
type: 'heartbeat',
|
||||
id: `heartbeat_${Date.now()}`,
|
||||
data: {
|
||||
timestamp: Date.now()
|
||||
}
|
||||
};
|
||||
|
||||
const success = wsManager.send(heartbeatMessage);
|
||||
if (success) {
|
||||
this.addLog('💓 发送心跳消息');
|
||||
this.setData({
|
||||
messagesSent: this.data.messagesSent + 1
|
||||
});
|
||||
} else {
|
||||
this.addLog('❌ 心跳消息发送失败');
|
||||
}
|
||||
},
|
||||
|
||||
// 清空日志
|
||||
onClearLogs() {
|
||||
this.setData({
|
||||
logs: [],
|
||||
messagesSent: 0,
|
||||
messagesReceived: 0,
|
||||
connectionAttempts: 0
|
||||
});
|
||||
this.addLog('📝 日志已清空');
|
||||
},
|
||||
|
||||
// 输入框变化
|
||||
onInputChange(e) {
|
||||
this.setData({
|
||||
testMessage: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 复制日志
|
||||
onCopyLogs() {
|
||||
const logsText = this.data.logs.join('\n');
|
||||
wx.setClipboardData({
|
||||
data: logsText,
|
||||
success: () => {
|
||||
wx.showToast({
|
||||
title: '日志已复制',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 查看连接详情
|
||||
onShowDetails() {
|
||||
const status = wsManager.getStatus();
|
||||
const details = [
|
||||
`连接状态: ${status.isConnected ? '已连接' : '未连接'}`,
|
||||
`连接中: ${status.isConnecting ? '是' : '否'}`,
|
||||
`重连次数: ${status.reconnectAttempts}`,
|
||||
`有Token: ${status.hasToken ? '是' : '否'}`,
|
||||
`设备ID: ${status.deviceId}`,
|
||||
`发送消息数: ${this.data.messagesSent}`,
|
||||
`接收消息数: ${this.data.messagesReceived}`,
|
||||
`连接尝试数: ${this.data.connectionAttempts}`,
|
||||
`最后连接时间: ${this.data.lastConnectTime || '无'}`,
|
||||
`最后断开时间: ${this.data.lastDisconnectTime || '无'}`
|
||||
].join('\n');
|
||||
|
||||
wx.showModal({
|
||||
title: 'WebSocket连接详情',
|
||||
content: details,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
onBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
8
pages/websocket-test/websocket-test.json
Normal file
8
pages/websocket-test/websocket-test.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"navigationBarTitleText": "WebSocket测试",
|
||||
"navigationBarBackgroundColor": "#667eea",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f5f5f5",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": false
|
||||
}
|
||||
110
pages/websocket-test/websocket-test.wxml
Normal file
110
pages/websocket-test/websocket-test.wxml
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!--WebSocket连接测试页面-->
|
||||
<view class="container">
|
||||
<!-- 标题栏 -->
|
||||
<view class="header">
|
||||
<view class="header-left" bindtap="onBack">
|
||||
<text class="back-icon">←</text>
|
||||
</view>
|
||||
<view class="header-title">WebSocket测试</view>
|
||||
<view class="header-right" bindtap="onShowDetails">
|
||||
<text class="detail-icon">ⓘ</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 连接状态 -->
|
||||
<view class="status-section">
|
||||
<view class="status-card">
|
||||
<view class="status-indicator {{isConnected ? 'connected' : 'disconnected'}}"></view>
|
||||
<view class="status-text">{{connectionStatus}}</view>
|
||||
<view class="status-info">
|
||||
<text class="info-item">Token: {{hasToken ? '✓' : '✗'}}</text>
|
||||
<text class="info-item">发送: {{messagesSent}}</text>
|
||||
<text class="info-item">接收: {{messagesReceived}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-section">
|
||||
<view class="button-row">
|
||||
<button class="action-btn connect-btn" bindtap="onConnect" disabled="{{isConnecting}}">
|
||||
{{isConnecting ? '连接中...' : '连接'}}
|
||||
</button>
|
||||
<button class="action-btn disconnect-btn" bindtap="onDisconnect" disabled="{{!isConnected}}">
|
||||
断开
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="button-row">
|
||||
<button class="action-btn heartbeat-btn" bindtap="onSendHeartbeat" disabled="{{!isConnected}}">
|
||||
发送心跳
|
||||
</button>
|
||||
<button class="action-btn clear-btn" bindtap="onClearLogs">
|
||||
清空日志
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 消息发送 -->
|
||||
<view class="message-section">
|
||||
<view class="section-title">发送测试消息</view>
|
||||
<view class="input-row">
|
||||
<input
|
||||
class="message-input"
|
||||
placeholder="输入测试消息"
|
||||
value="{{testMessage}}"
|
||||
bindinput="onInputChange"
|
||||
/>
|
||||
<button class="send-btn" bindtap="onSendMessage" disabled="{{!isConnected}}">
|
||||
发送
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 🔥 添加聊天消息测试按钮 -->
|
||||
<view class="button-row" style="margin-top: 10px;">
|
||||
<button class="action-btn chat-btn" bindtap="onSendChatMessage" disabled="{{!isConnected}}">
|
||||
发送聊天消息
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日志区域 -->
|
||||
<view class="log-section">
|
||||
<view class="section-header">
|
||||
<view class="section-title">连接日志</view>
|
||||
<text class="copy-btn" bindtap="onCopyLogs">复制</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="log-container" scroll-y="true">
|
||||
<view class="log-item" wx:for="{{logs}}" wx:key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
<view wx:if="{{logs.length === 0}}" class="empty-logs">
|
||||
暂无日志
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<view class="stats-section">
|
||||
<view class="section-title">统计信息</view>
|
||||
<view class="stats-grid">
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{connectionAttempts}}</view>
|
||||
<view class="stat-label">连接尝试</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{messagesSent}}</view>
|
||||
<view class="stat-label">发送消息</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{messagesReceived}}</view>
|
||||
<view class="stat-label">接收消息</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-value">{{lastConnectTime || '-'}}</view>
|
||||
<view class="stat-label">最后连接</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
251
pages/websocket-test/websocket-test.wxss
Normal file
251
pages/websocket-test/websocket-test.wxss
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
/* WebSocket测试页面样式 */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 标题栏 */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88rpx;
|
||||
background-color: #667eea;
|
||||
color: white;
|
||||
padding: 0 30rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left, .header-right {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.back-icon, .detail-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* 状态区域 */
|
||||
.status-section {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
background-color: #52c41a;
|
||||
box-shadow: 0 0 20rpx rgba(82, 196, 26, 0.5);
|
||||
}
|
||||
|
||||
.status-indicator.disconnected {
|
||||
background-color: #ff4d4f;
|
||||
box-shadow: 0 0 20rpx rgba(255, 77, 79, 0.5);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background-color: #f0f0f0;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
/* 操作区域 */
|
||||
.action-section {
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
background: linear-gradient(135deg, #52c41a, #73d13d);
|
||||
}
|
||||
|
||||
.disconnect-btn {
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7875);
|
||||
}
|
||||
|
||||
.heartbeat-btn {
|
||||
background: linear-gradient(135deg, #1890ff, #40a9ff);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: linear-gradient(135deg, #faad14, #ffc53d);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
background: #d9d9d9 !important;
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
/* 消息区域 */
|
||||
.message-section {
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
background-color: white;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 28rpx;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 120rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.send-btn:disabled {
|
||||
background: #d9d9d9 !important;
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
/* 日志区域 */
|
||||
.log-section {
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
font-size: 24rpx;
|
||||
color: #667eea;
|
||||
padding: 8rpx 16rpx;
|
||||
background-color: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.log-container {
|
||||
height: 400rpx;
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
font-size: 24rpx;
|
||||
color: #e8e8e8;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8rpx;
|
||||
font-family: 'Courier New', monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-logs {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
padding: 60rpx 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 统计区域 */
|
||||
.stats-section {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background-color: white;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue