chore(websocket): 更新ws_server
This commit is contained in:
429
docs/websocket/test_wechat_miniprogram.js
Normal file
429
docs/websocket/test_wechat_miniprogram.js
Normal file
@@ -0,0 +1,429 @@
|
||||
/**
|
||||
* 微信小程序 WebSocket 客户端测试代码
|
||||
* 用于测试微信小程序环境下与 WebSocket 服务器的连接和通信
|
||||
*
|
||||
* 使用方法：
|
||||
* 1. 将此代码复制到微信小程序的页面 JavaScript 文件中
|
||||
* 2. 在对应的 WXML 文件中添加测试按钮和消息显示区域
|
||||
* 3. 在微信开发者工具中运行测试
|
||||
*/
|
||||
|
||||
// WebSocket 连接实例
|
||||
let ws = null;
|
||||
|
||||
// 页面数据
|
||||
Page({
|
||||
data: {
|
||||
wsUrl: 'wss://your-domain.com/ws/aikefu', // 替换为你的 WebSocket 服务器地址
|
||||
connectionStatus: '未连接',
|
||||
messages: [],
|
||||
inputMessage: ''
|
||||
},
|
||||
|
||||
// 生命周期函数--监听页面加载
|
||||
onLoad: function(options) {
|
||||
this.connectWebSocket();
|
||||
},
|
||||
|
||||
// 生命周期函数--监听页面卸载
|
||||
onUnload: function() {
|
||||
this.closeWebSocket();
|
||||
},
|
||||
|
||||
// 生命周期函数--监听页面隐藏
|
||||
onHide: function() {
|
||||
this.closeWebSocket();
|
||||
},
|
||||
|
||||
// 连接 WebSocket 服务器
|
||||
connectWebSocket: function() {
|
||||
const that = this;
|
||||
const wsUrl = this.data.wsUrl;
|
||||
|
||||
// 创建 WebSocket 连接
|
||||
ws = wx.connectSocket({
|
||||
url: wsUrl,
|
||||
header: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
method: 'GET',
|
||||
success: function(res) {
|
||||
console.log('WebSocket 连接请求发送成功', res);
|
||||
that.updateStatus('连接中...');
|
||||
},
|
||||
fail: function(err) {
|
||||
console.error('WebSocket 连接请求发送失败', err);
|
||||
that.updateStatus('连接失败');
|
||||
that.addMessage('系统', 'WebSocket 连接请求发送失败: ' + JSON.stringify(err), 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// 监听 WebSocket 连接打开
|
||||
ws.onOpen(function(res) {
|
||||
console.log('WebSocket 连接已打开', res);
|
||||
that.updateStatus('已连接');
|
||||
that.addMessage('系统', 'WebSocket 连接已打开', 'system');
|
||||
});
|
||||
|
||||
// 监听 WebSocket 接收到服务器的消息
|
||||
ws.onMessage(function(res) {
|
||||
console.log('收到服务器消息', res.data);
|
||||
that.addMessage('服务器', res.data, 'received');
|
||||
});
|
||||
|
||||
// 监听 WebSocket 连接关闭
|
||||
ws.onClose(function(res) {
|
||||
console.log('WebSocket 连接已关闭', res);
|
||||
that.updateStatus('已断开');
|
||||
that.addMessage('系统', 'WebSocket 连接已关闭', 'system');
|
||||
});
|
||||
|
||||
// 监听 WebSocket 错误
|
||||
ws.onError(function(res) {
|
||||
console.error('WebSocket 连接发生错误', res);
|
||||
that.updateStatus('连接错误');
|
||||
that.addMessage('系统', 'WebSocket 连接发生错误: ' + JSON.stringify(res), 'error');
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭 WebSocket 连接
|
||||
closeWebSocket: function() {
|
||||
if (ws) {
|
||||
wx.closeSocket();
|
||||
ws = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 发送 Ping 消息
|
||||
sendPing: function() {
|
||||
this.sendMessage(JSON.stringify({ action: 'ping' }));
|
||||
},
|
||||
|
||||
// 发送测试消息
|
||||
sendTestMessage: function() {
|
||||
this.sendMessage(JSON.stringify({
|
||||
message: '你好，这是微信小程序的测试消息！',
|
||||
action: 'test'
|
||||
}));
|
||||
},
|
||||
|
||||
// 发送自定义消息
|
||||
sendCustomMessage: function() {
|
||||
const message = this.data.inputMessage.trim();
|
||||
if (!message) {
|
||||
wx.showToast({
|
||||
title: '请输入消息内容',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 尝试解析为 JSON，如果不是 JSON 则包装为 JSON
|
||||
JSON.parse(message);
|
||||
this.sendMessage(message);
|
||||
} catch (error) {
|
||||
// 不是 JSON，作为普通文本发送
|
||||
this.sendMessage(JSON.stringify({ message: message }));
|
||||
}
|
||||
|
||||
// 清空输入框
|
||||
this.setData({
|
||||
inputMessage: ''
|
||||
});
|
||||
},
|
||||
|
||||
// 发送消息
|
||||
sendMessage: function(message) {
|
||||
if (!ws) {
|
||||
wx.showToast({
|
||||
title: 'WebSocket 未连接',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查 WebSocket 连接状态
|
||||
wx.getSocketTask().then(task => {
|
||||
if (task.readyState === 1) { // 连接已打开
|
||||
wx.sendSocketMessage({
|
||||
data: message,
|
||||
success: () => {
|
||||
this.addMessage('我', message, 'sent');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('发送消息失败', err);
|
||||
this.addMessage('系统', '发送消息失败: ' + JSON.stringify(err), 'error');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: 'WebSocket 连接未打开',
|
||||
icon: 'none'
|
||||
});
|
||||
this.updateStatus('连接已断开');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取 SocketTask 失败', err);
|
||||
this.updateStatus('连接已断开');
|
||||
});
|
||||
},
|
||||
|
||||
// 更新输入框内容
|
||||
onInputMessage: function(e) {
|
||||
this.setData({
|
||||
inputMessage: e.detail.value
|
||||
});
|
||||
},
|
||||
|
||||
// 更新连接状态
|
||||
updateStatus: function(status) {
|
||||
this.setData({
|
||||
connectionStatus: status
|
||||
});
|
||||
},
|
||||
|
||||
// 添加消息到消息列表
|
||||
addMessage: function(sender, content, type) {
|
||||
const messages = this.data.messages;
|
||||
const now = new Date();
|
||||
const time = now.toLocaleTimeString();
|
||||
|
||||
// 尝试美化 JSON 格式
|
||||
let formattedContent = content;
|
||||
try {
|
||||
const parsed = JSON.parse(content);
|
||||
formattedContent = JSON.stringify(parsed, null, 2);
|
||||
} catch (error) {
|
||||
// 不是 JSON，保持原样
|
||||
}
|
||||
|
||||
messages.push({
|
||||
id: Date.now(),
|
||||
sender: sender,
|
||||
content: formattedContent,
|
||||
type: type,
|
||||
time: time
|
||||
});
|
||||
|
||||
this.setData({
|
||||
messages: messages
|
||||
});
|
||||
|
||||
// 滚动到最新消息
|
||||
this.scrollToBottom();
|
||||
},
|
||||
|
||||
// 滚动到消息底部
|
||||
scrollToBottom: function() {
|
||||
wx.createSelectorQuery().select('#message-list').boundingClientRect(function(rect) {
|
||||
if (rect) {
|
||||
wx.pageScrollTo({
|
||||
scrollTop: rect.height,
|
||||
duration: 300
|
||||
});
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
// 重连 WebSocket
|
||||
reconnectWebSocket: function() {
|
||||
this.closeWebSocket();
|
||||
setTimeout(() => {
|
||||
this.connectWebSocket();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
// 对应的 WXML 文件示例
|
||||
/*
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<text class="title">WebSocket 测试</text>
|
||||
<text class="status {{connectionStatus === '已连接' ? 'connected' : connectionStatus === '连接中...' ? 'connecting' : 'disconnected'}}">
|
||||
{{connectionStatus}}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="settings">
|
||||
<input class="url-input" placeholder="请输入 WebSocket 服务器地址" value="{{wsUrl}}" bindinput="onInputUrl" />
|
||||
<button class="btn" bindtap="connectWebSocket" type="primary" size="mini">连接</button>
|
||||
<button class="btn" bindtap="closeWebSocket" type="default" size="mini">断开</button>
|
||||
<button class="btn" bindtap="reconnectWebSocket" type="warn" size="mini">重连</button>
|
||||
</view>
|
||||
|
||||
<view class="message-area">
|
||||
<scroll-view id="message-list" scroll-y="true" class="message-list">
|
||||
<block wx:for="{{messages}}" wx:key="id">
|
||||
<view class="message-item {{item.type}}">
|
||||
<view class="message-header">
|
||||
<text class="sender">{{item.sender}}</text>
|
||||
<text class="time">{{item.time}}</text>
|
||||
</view>
|
||||
<view class="message-content">{{item.content}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="input-area">
|
||||
<textarea class="message-input" placeholder="请输入消息..." value="{{inputMessage}}" bindinput="onInputMessage" />
|
||||
<view class="btn-group">
|
||||
<button class="btn" bindtap="sendPing" type="default" size="mini">发送 Ping</button>
|
||||
<button class="btn" bindtap="sendTestMessage" type="default" size="mini">测试消息</button>
|
||||
<button class="btn" bindtap="sendCustomMessage" type="primary" size="mini">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
*/
|
||||
|
||||
// 对应的 WXSS 样式文件示例
|
||||
/*
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status.connected {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status.connecting {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status.disconnected {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.settings {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.url-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
padding: 20rpx;
|
||||
margin-right: 20rpx;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.message-area {
|
||||
flex: 1;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
height: 100%;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 20rpx;
|
||||
padding: 15rpx;
|
||||
border-radius: 10rpx;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.message-item.sent {
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
background-color: #d4edda;
|
||||
border-right: 4rpx solid #28a745;
|
||||
}
|
||||
|
||||
.message-item.received {
|
||||
align-self: flex-start;
|
||||
background-color: #e9ecef;
|
||||
border-left: 4rpx solid #007bff;
|
||||
}
|
||||
|
||||
.message-item.system {
|
||||
align-self: center;
|
||||
background-color: #fff3cd;
|
||||
border-left: 4rpx solid #856404;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.message-item.error {
|
||||
align-self: center;
|
||||
background-color: #f8d7da;
|
||||
border-left: 4rpx solid #dc3545;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
background-color: white;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user