【实例简介】后台基于腾讯云提供的小程序解决方案，修改config.js中的host即可
【实例截图】
【核心代码】
/**
* @fileOverview 演示会话服务和 WebSocket 信道服务的使用方式
*/
// 引入 QCloud 小程序增强 SDK
var qcloud = require('../../vendor/qcloud-weapp-client-sdk/index');
// 引入配置
var config = require('../../config');
// 显示繁忙提示
var showBusy = text => wx.showToast({
title: text,
icon: 'loading',
duration: 10000
});
// 显示成功提示
var showSuccess = text => wx.showToast({
title: text,
icon: 'success'
});
// 显示失败提示
var showModel = (title, content) => {
wx.hideToast();
wx.showModal({
title,
content: JSON.stringify(content),
showCancel: false
});
};
/**
* 使用 Page 初始化页面，具体可参考微信公众平台上的文档
*/
Page({
/**
* 初始数据，我们把服务地址显示在页面上
*/
data: {
loginUrl: config.service.loginUrl,
requestUrl: config.service.requestUrl,
tunnelUrl: config.service.tunnelUrl,
tunnelStatus: 'closed',
tunnelStatusText: {
closed: '已关闭',
connecting: '正在连接...',
connected: '已连接'
}
},
/**
* 点击「登录」按钮，测试登录功能
*/
doLogin() {
showBusy('正在登录');
// 登录之前需要调用 qcloud.setLoginUrl() 设置登录地址，不过我们在 app.js 的入口里面已经调用过了，后面就不用再调用了
qcloud.login({
success(result) {
showSuccess('登录成功');
console.log('登录成功', result);
},
fail(error) {
showModel('登录失败', error);
console.log('登录失败', error);
}
});
},
/**
* 点击「清除会话」按钮
*/
clearSession() {
// 清除保存在 storage 的会话信息
qcloud.clearSession();
showSuccess('会话已清除');
},
/**
* 点击「请求」按钮，测试带会话请求的功能
*/
doRequest() {
showBusy('正在请求');
// qcloud.request() 方法和 wx.request() 方法使用是一致的，不过如果用户已经登录的情况下，会把用户的会话信息带给服务器，服务器可以跟踪用户
qcloud.request({
// 要请求的地址
url: this.data.requestUrl,
// 请求之前是否登陆，如果该项指定为 true，会在请求之前进行登录
login: true,
success(result) {
showSuccess('请求成功完成');
console.log('request success', result);
},
fail(error) {
showModel('请求失败', error);
console.log('request fail', error);
},
complete() {
console.log('request complete');
}
});
},
switchTunnel(e) {
const turnedOn = e.detail.value;
if (turnedOn && this.data.tunnelStatus == 'closed') {
this.openTunnel();
} else if (!turnedOn && this.data.tunnelStatus == 'connected') {
this.closeTunnel();
}
},
/**
* 点击「打开信道」，测试 WebSocket 信道服务
*/
openTunnel() {
// 创建信道，需要给定后台服务地址
var tunnel = this.tunnel = new qcloud.Tunnel(this.data.tunnelUrl);
// 监听信道内置消息，包括 connect/close/reconnecting/reconnect/error
tunnel.on('connect', () => {
console.log('WebSocket 信道已连接');
this.setData({ tunnelStatus: 'connected' });
});
tunnel.on('close', () => {
console.log('WebSocket 信道已断开');
this.setData({ tunnelStatus: 'closed' });
});
tunnel.on('reconnecting', () => {
console.log('WebSocket 信道正在重连...')
showBusy('正在重连');
});
tunnel.on('reconnect', () => {
console.log('WebSocket 信道重连成功')
showSuccess('重连成功');
});
tunnel.on('error', error => {
showModel('信道发生错误', error);
console.error('信道发生错误：', error);
});
// 监听自定义消息(服务器进行推送)
tunnel.on('speak', speak => {
showModel('信道消息', speak);
console.log('收到说话消息：', speak);
});
// 打开信道
tunnel.open();
this.setData({ tunnelStatus: 'connecting' });
},
/**
* 点击「发送消息」按钮，测试使用信道发送消息
*/
sendMessage() {
// 使用 tunnel.isActive() 来检测当前信道是否处于可用状态
if (this.tunnel && this.tunnel.isActive()) {
// 使用信道给服务器推送「speak」消息
this.tunnel.emit('speak', {
'word': 'I say something at ' new Date(),
});
}
},
/**
* 点击「测试重连」按钮，测试重连
* 也可以断开网络一段时间之后再连接，测试重连能力
*/
testReconnect() {
// 不通过 SDK 关闭连接，而是直接用微信断开来模拟连接断开的情况下，考察 SDK 自动重连的能力
wx.closeSocket();
},
/**
* 点击「关闭信道」按钮，关闭已经打开的信道
*/
closeTunnel() {
if (this.tunnel) {
this.tunnel.close();
}
this.setData({ tunnelStatus: 'closed' });
},
/**
* 点击「聊天室」按钮，跳转到聊天室综合 Demo 的页面
*/
openChat() {
// 微信只允许一个信道再运行，聊天室使用信道前，我们先把当前的关闭
this.closeTunnel();
wx.navigateTo({ url: '../chat/chat' });
},
openDrawguess() {
this.closeTunnel();
wx.navigateTo({ url: '../drawguess/index' });
},
openUpload() {
wx.navigateTo({ url: '../upload/index' });
}
});
