SocketTask 创建
/*SocketTask*/
wx.connectSocket(Object object)
// ps (一般情况下不会使用到其他参数)
/**
常用参数:
url: --开发者服务器 wss 接口地址
header: --HTTP Header,Header 中不能设置 Referer
timeout:--超时时间,单位为毫秒
success: --接口调用成功的回调函数
fail: --接口调用失败的回调函数
complete:--接口调用结束的回调函数(调用成功、失败都会执行)
*/
wx.connectSocket({
url: 'wss://example.qq.com',
header:{
'content-type': 'application/json'
}
})
监听事件
只需要开启一个SocketTask连接
/**
此处一般定义一个变量去判断是否在创建完SocketTask连接后,成功调用 wx.onSocketOpen方法;
此处也是问题多发生地,因为在创建完SocketTask连接后,可能会出现不会进入open 监听方法中
#### 问题分析
01 检查connectSocket url 地址是否正确
02 是否建立连接时报错(比如10000 ,10001 等错误信息)
*/
wx.onSocketOpen(() => {
// 开启开关
this.setData({
socketOpen: true
});
});
/**
此处监听Socket是否有数据返回,一般异步多次返回 具体看业务需求/接口数据
*/
wx.onSocketMessage((res) => {
// 此处去接收返回值,做相关业务
});
/**
监听Socket异常
*/
wx.onSocketError((res) => {
this.addToLog("WebSocket error");
});
/**
Socket 关闭 (主动关闭,被动关闭)
一般情况下,开启长连接微信小程序不会立马关闭
如果出现异常,检查Socket域名配置,或者是否是本地调试未开启 不检验合法域名选项
*/
wx.onSocketClose((res) => {
// 关闭开关
this.setData({
socketOpen: false
});
});
完整demo
wxml 文件:
<!-- index.wxml -->
<view class="container">
<view class="logs">
<block wx:for="{{logs}}" wx:key="index">
<view class="log-item">{{item}}</view>
</block>
</view>
</view>
js 文件:
Page({
data: {
logs: [],
socketOpen: false,
socketMsgQueue: [],
},
onLoad: function () {
this.connectSocket();
},
connectSocket: function () {
wx.connectSocket({
url: "ws://localhost:8080",
});
wx.onSocketOpen(() => {
this.setData({
socketOpen: true
});
this.sendSocketMessage("Hello, WebSocket!");
});
wx.onSocketMessage((res) => {
this.addToLog("Receive message: " + res.data);
});
wx.onSocketError((res) => {
this.addToLog("WebSocket error");
});
wx.onSocketClose((res) => {
this.setData({
socketOpen: false
});
this.addToLog("WebSocket closed");
});
},
closeSocket: function () {
wx.closeSocket({
success: () => {
this.setData({
socketOpen: false
});
this.addToLog("WebSocket closed");
},
// 此处重点
// 据本人微信小程序相关WebSocket经验,一般报错无法在创建WebSocket fail中获取,而是直接触发 close 方法时报错.
//这也是很多小伙伴发现自己的open 方法不触发,自己又监听不到错误的原因之一,因此这块的fail 很重要
fail: () => {
this.addToLog("WebSocket close failed");
}
});
},
sendSocketMessage: function (msg) {
if (this.data.socketOpen) {
wx.sendSocketMessage({
data: msg
});
} else {
this.data.socketMsgQueue.push(msg);
}
},
addToLog: function (log) {
this.data.logs.push(log);
this.setData({
logs: this.data.logs
});
}
})
说明:
首先,在
onLoad
函数中调用connectSocket
函数连接 WebSocket。
connectSocket
函数的实现如下:a. 调用
wx.connectSocket
方法连接 WebSocket。b. 监听 WebSocket 的打开事件,并发送一条消息:“Hello, WebSocket!”。
c. 监听 WebSocket 的消息事件,并将接收到的消息添加到日志列表中。
d. 监听 WebSocket 的错误事件,并将错误消息添加到日志列表中。
e. 监听 WebSocket 的关闭事件,并将关闭消息添加到日志列表中。
实现关闭 WebSocket 的函数
closeSocket
。实现发送消息的函数
sendSocketMessage
。如果 WebSocket 已经打开,则调用wx.sendSocketMessage
方法发出消息;否则将待发送的消息推入一个消息队列中。实现一个
addToLog
函数,用于将日志添加到日志列表中。
开启多个SocketTask连接
微信官方提供了SocketTask 统一管理方法
demo
let scoket_one , scoket_two;
scoket_one = wx.connectSocket({
url: 'wss://test.com/ws1',
success: function (resConnect) {
//打开连接成功
}
})
scoket_one.onOpen((res)=>{
})
scoket_one.onMessage( (err) =>{
console.log(err)
})
scoket_one.onClose( (res) =>{
console.log(res,'scoket_one关闭')
})
scoket_two = wx.connectSocket({
url: 'wss://test.com/ws2',
success: (res)=> {
//打开连接成功
}
})
scoket_two.onOpen((res)=>{
})
scoket_two.onMessage((err)=> {
console.log(err)
})
scoket_two.onClose( (res) =>{
console.log(res,'scoket_two关闭')
})