websocket API
wx.connectSocket：创建一个 WebSocket 连接 ；
sotk.onOpen：监听 WebSocket 连接打开事件 ；
sotk.onClose：监听 WebSocket 连接关闭事件 ；
sotk.onError：监听 WebSocket 错误事件 ；
sotk.onMessage：监听
WebSocket 接受到服务器的消息事件 ；（重要：负责监听接收数据）
sotk.send：通过
WebSocket 连接发送数据 。（重要：负责发送数据）
var sotk = null;
var socketOpen = false;
var wsbasePath = "ws://开发者服务器 wss 接口地址/";
//开始webSocket
webSocketStart(e){
sotk = wx.connectSocket({
url: wsbasePath,
success: res => {
console.log('小程序连接成功：', res);
},
fail: err => {
console.log('出现错误啦！！' + err);
wx.showToast({
title: '网络异常！',
})
}
})
this.webSokcketMethods();
},
//监听指令
webSokcketMethods(e){
let that = this;
sotk.onOpen(res => {
socketOpen = true;
console.log('监听 WebSocket 连接打开事件。', res);
})
sotk.onClose(onClose => {
console.log('监听 WebSocket 连接关闭事件。', onClose)
socketOpen = false;
})
sotk.onError(onError => {
console.log('监听 WebSocket 错误。错误信息', onError)
socketOpen = false
})
sotk.onMessage(onMessage => {
var data = JSON.parse(onMessage.data);
console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息',data);
})
},
//发送消息
sendSocketMessage(msg) {
let that = this;
if (socketOpen){
console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
sotk.send({
data: JSON.stringify(msg)
}, function (res) {
console.log('已发送', res)
})
}
},
//关闭连接
closeWebsocket(str){
if (socketOpen) {
sotk.close(
{
code: "1000",
reason: str,
success: function () {
console.log("成功关闭websocket连接");
}
}
)
}
},
实现逻辑
1、通过onMessage监听收到的信息，接收到的信息会返回一个type值，通过type值判断接收到的数据是什么数据，之后分别进行处理、赋值即可；
2、通过sendSocketMessage发送数据，根据后端定义的字段发送请求，字段中也包含type值，告诉websocket是处理什么类型的值。
webSokcketMethods(e) {
this.websocket.onMessage(onMessage => {
console.log(this.data)
var data = JSON.parse(onMessage.data);
console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', data);
if (data.client_id) {
this.setData({
client_id: data.client_id
})
}
if (data.msg_type === 'init') {
this.joinLive()
}
if (data.msg_type === 'join') {
wx.hideLoading()
this.endtrain(data.msg_content)
this.setData({
is_join: true,
lookNumber: data.online_num
})
if (data.message_list) {
this.setData({
commentList: data.message_list,
toLast: 'item' + data.message_list.length,
lookNumber: data.online_num,
followNumber: data.subscribe_num
})
}
}
if (data.msg_type == 'message') {
var commentItem = {
name: data.from_name,
content: data.content
}
var commentArr = this.data.commentList
console.log(commentArr)
commentArr.push(commentItem)
this.setData({
commentList: commentArr,
toLast: 'item' + commentArr.length,
})
if (this.data.platform === 'android') {
this.messageScroll()
}
}
if (data.msg_type == 'subscribe') {
this.setData({
followNumber: data.subscribe_num
})
this.endtrain(data.msg_content)
}
if (data.msg_type == 'leave') {
this.endtrain(data.msg_content)
}
if (data.msg_type == 'buy') {
this.endtrain(data.msg_content)
}
})
},
// 加入直播间
joinLive() {
var data = {
msg_type: 'join',
room_id: this.data.liveRoomId,
live_id: this.data.liveId,
from_uid: this.data.anchorUid,
client_id: this.data.client_id,
is_anchor: true,
from_name: this.data.anchorName
}
console.log('通过 WebSocket 连接发送数据', JSON.stringify(data))
this.websocket.send({
data: JSON.stringify(data),
success: function (res) {
console.log(res)
},
fail: function (err) {
console.log(err)
}
})
},
// 商品上架
goodsShelfOn(goodsId, goodsName, goodsPrice, defaultImage, status) {
var data = {
msg_type: 'on_off_shelf',
room_id: this.data.liveRoomId,
live_id: this.data.liveId,
from_uid: this.data.anchorUid,
client_id: this.data.client_id,
from_name: this.data.anchorName,
goods_id: goodsId,
goods_name: goodsName,
goods_price: goodsPrice,
default_image: defaultImage,
status: 'on'
}
console.log('通过 WebSocket 连接发送数据', JSON.stringify(data))
this.websocket.send({
data: JSON.stringify(data),
success: function (res) {
console.log(res)
},
fail: function (err) {
console.log(err)
}
})
}
心跳检测、断线重连
在实际应用中，需要不断判断websocket处于连接阶段。
wechat-websocket.js文件
export default class websocket {
constructor({ heartCheck, isReconnection }) {
// 是否连接
this._isLogin = false;
// 当前网络状态
this._netWork = true;
// 是否人为退出
this._isClosed = false;
// 心跳检测频率
this._timeout = 3000;
this._timeoutObj = null;
// 当前重连次数
this._connectNum = 0;
// 心跳检测和断线重连开关，true为启用，false为关闭
this._heartCheck = heartCheck;
this._isReconnection = isReconnection;
this._onSocketOpened();
}
// 心跳重置
_reset() {
clearTimeout(this._timeoutObj);
return this;
}
// 心跳开始
_start() {
let _this = this;
this._timeoutObj = setInterval(() => {
wx.sendSocketMessage({
// 心跳发送的信息应由前后端商量后决定
data: JSON.stringify({
"msg_type": 'ping'
}),
success(res) {
console.log(res)
console.log("发送心跳成功");
},
fail(err) {
console.log(err)
// wx.showToast({
// title: "websocket已断开",
// icon: 'none'
// })
_this._reset()
}
});
}, this._timeout);
}
// 监听websocket连接关闭
onSocketClosed(options) {
wx.onSocketClose(err => {
console.log('当前websocket连接已关闭,错误信息为:' + JSON.stringify(err));
// 停止心跳连接
if (this._heartCheck) {
this._reset();
}
// 关闭已登录开关
this._isLogin = false;
// 检测是否是用户自己退出小程序
console.log(this._isClosed)
if (!this._isClosed) {
// 进行重连
if (this._isReconnection) {
this._reConnect(options)
}
}
})
}
// 检测网络变化
onNetworkChange(options) {
wx.onNetworkStatusChange(res => {
console.log('当前网络状态:' + res.isConnected);
if (!this._netWork) {
this._isLogin = false;
// 进行重连
if (this._isReconnection) {
this._reConnect(options)
}
}
})
}
_onSocketOpened() {
wx.onSocketOpen(res => {
console.log('websocket已打开');
// 打开已登录开关
this._isLogin = true;
// 发送心跳
if (this._heartCheck) {
this._reset()._start();
}
// 发送登录信息
wx.sendSocketMessage({
// 这里是第一次建立连接所发送的信息，应由前后端商量后决定
data: JSON.stringify({
"key": 'value'
})
})
// 打开网络开关
this._netWork = true;
})
}
// 接收服务器返回的消息
onReceivedMsg(callBack) {
wx.onSocketMessage(msg => {
if (typeof callBack == "function") {
callBack(msg)
} else {
console.log('参数的类型必须为函数')
}
})
}
// 建立websocket连接
initWebSocket(options) {
let _this = this;
if (this._isLogin) {
console.log("您已经登录了");
} else {
console.log('未登录')
// 检查网络
wx.getNetworkType({
success(result) {
if (result.networkType != 'none') {
console.log(result.networkType)
// 开始建立连接
wx.connectSocket({
url: options.url,
success(res) {
if (typeof options.success == "function") {
options.success(res)
} else {
console.log('参数的类型必须为函数')
}
},
fail(err) {
if (typeof options.fail == "function") {
options.fail(err)
} else {
console.log('参数的类型必须为函数')
}
}
})
} else {
console.log('网络已断开');
_this._netWork = false;
// 网络断开后显示model
wx.showModal({
title: '网络错误',
content: '请重新打开网络',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
}
})
}
}
// 发送websocket消息
sendWebSocketMsg(options) {
wx.sendSocketMessage({
data: options.data,
success(res) {
if (typeof options.success == "function") {
options.success(res)
} else {
console.log('参数的类型必须为函数')
}
},
fail(err) {
if (typeof options.fail == "function") {
options.fail(err)
} else {
console.log('参数的类型必须为函数')
}
}
})
}
// 重连方法，会根据时间频率越来越慢
_reConnect(options) {
let timer, _this = this;
if (this._connectNum < 20) {
timer = setTimeout(() => {
this.initWebSocket(options)
}, 3000)
this._connectNum += 1;
} else if (this._connectNum < 50) {
timer = setTimeout(() => {
this.initWebSocket(options)
}, 10000)
this._connectNum += 1;
} else {
timer = setTimeout(() => {
this.initWebSocket(options)
}, 450000)
this._connectNum += 1;
}
}
// 关闭websocket连接
closeWebSocket(){
wx.closeSocket();
this._isClosed = true;
}
}
微信官方文档
微信小程序心跳
微信websocket基础用法
转自：https://hehuiyun.github.io/2021/01/22/微信小程序websocket的用法/
