<!--index.wxml>
<view class="container"><view class="page-body"><view class="page-section"><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_switch"><view class="weui-cell__bd">Socket状态</view><view class="weui-cell__ft"><switch bindchange="toggleSocket" checked="{{isOpen}}"/></view></view><view class="weui-cell"><view class="weui-cell__bd">消息</view><view class="weui-cell__ft">Hello, 小程序!</view></view></view></view><view class="btn-area"><button type="primary" size="40" bindtap="sendMessage" disabled="{{socketStatus != 'connected'}}" loading="{{loading}}">点我发送</button></view></view>
</view>
const tunnelUrl = require('../../../../../config').tunnelUrlfunction showModal(title, content) {wx.showModal({title,content,showCancel: false})
}function showSuccess(title) {wx.showToast({title,icon: 'success',duration: 1000})
}Page({data: {socketStatus: 'closed',isOpen: false,sendText: 'hello, 小程序'},socketMsgQueue: [],// 注册连接打开事件registerOpen() {wx.onSocketOpen((res) => {console.log('当前webscoket通道已打开并开始发送数据', res);this.sendAllMessage();this.setData({socketStatus: 'connected',isOpen: true});});},// 注册接受到websocket消息事件registerReceive() {wx.onSocketMessage(function (res) {console.log('收到服务器内容：' + res.data)})},// 注册socket出错事件registerError() {wx.onSocketError((res) => {this.setData({socketStatus: 'closed',isOpen: false})console.log('socket连接出错，原因是:', res);});},// 切换switch开关toggleSocket: function(e) {if(e.detail.value) {wx.connectSocket({url: tunnelUrl,protocols: ['echo-protocol'],success: (res) => {console.log('打开一个socket连接',res);this.registerOpen();this.registerReceive();this.registerError();}});} else {wx.closeSocket({success: (res) => {console.log('关闭socket连接: ', res);wx.onSocketClose((res) => {console.log('当前socket通道已关闭', res);this.setData({socketStatus: 'closed',isOpen: false});})},fail: (res) => {console.log('关闭socket通道出错,原因是:', res);},complete: (res) => {console.log('操作完成！')}});}},// 点击按钮发送消息sendMessage: function() {let text = this.data.sendText;this.sendSingleMessage(text+Math.random()*100);},// 发送单条websocket消息sendSingleMessage: function(text) {let isOpen = this.data.isOpen;if (isOpen) {wx.sendSocketMessage({data: text})} else {this.socketMsgQueue.push(text)}},// 发送队列所有websocket消息sendAllMessage: function() {for (var i = 0; i < this.socketMsgQueue.length; i++) {this.sendSingleMessage(this.socketMsgQueue[i])}this.socketMsgQueue = []}})