WebSocket简单介绍
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
列表说明
- wx.connectSocket 的最大并发限制是 5 个。
- 小程序进入后台运行后,如果 5s 内网络请求没有结束,会回调错误信息
fail interrupted
;在回到前台之前,网络请求接口调用都会无法调用。
创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。
通过 WebSocket 连接发送数据。需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发
送。
| |
创建一个 WebSocket 连接 | wx.connectSocket |
监听WebSocket连接打开事件 | wx.onSocketOpen |
监听WebSocket错误 | wx.onSocketError |
通过 WebSocket 连接发送数据 | wx.sendSocketMessage |
监听WebSocket接受到服务器的消息事件 | wx.onSocketMessage |
关闭WebSocket连接 | wx.closeSocket |
监听WebSocket关闭 | wx.onSocketClose |
详例
点击查询,同时发起三次网络请求,给深度学习解析
search: function (e) {
// 调用ws接口
let socketOpen = false
let socketMsgQueue = []
wx.connectSocket({ //请求socket
url: 'ws接口',
success: res => {
console.log("连接成功", res)
wx.request({
url: 'HTTPS接口1',
method: "POST",
data: {
uploadFile: this.data.tempFilePaths
},
success: res => {
console.log("第二次请求成功", res.data.data)
wx.request({
url: 'HTTPS接口2',
method: "GET",
header: {
'content-type': 'application/json' // 默认值
},
data: {
pictureId: res.data.data
},
success: res => {
console.log("第三次请求成功", res)
}
})
}
})
}
})
wx.onSocketOpen(function (res) { //监听socket
console.log(res)
socketOpen = true
for (let i = 0; i < socketMsgQueue.length; i++) {
sendSocketMessage(socketMsgQueue[i])
}
//-----页面内使用长链接接口发送和接收数据时也是如下方法:
let streamconfig = {
hm: "fsdg"
}
//发送数据
wx.sendSocketMessage({ //
data: JSON.stringify(streamconfig),
success: res => {
console.log('发送数据')
console.log(res)
}
})
//接收数据
wx.onSocketMessage(res => {
console.log(res)
})
})
}
没有疯装,将就先用