微信小程序API之网络(四)WebSocket
2017-10-26 16:46
459 查看
创建一个WebSocket连接进行使用,微信小程序同时只能有一个WebSocket连接,如果已经存在了一个WebSocket连接,会将该连接关闭,重新开启一个WebSocket连接。Socket可以用于即时通信,前端通过socket接收服务器推送的消息。
1.使用wx.connectSocket(OBJECT)连接,OBJECT的参数说明如下↓
2.WebSocket的监听事件
(1)使用wx.onSocketOpen(CALLBACK)可以监听WebSocket连接打开事件。
(2)使用wx.onSocketError(CALLBACK)可以监听WebSocket错误。
(3)在js文件里调用connectSocket ,url随便填写了一个不存在的,既没有success的回调,也没有fail的回调。console只输出了connect....,目前不会编写php,可能暂时没办法测试了。
3.通过WebSocket连接发送数据,使用wx.sendSocketMessage(OBJECT)完成,但是需要先进行wx.connectSocket,并在监听开始的wx.onSocketOpen回调之后才可以进行发送。(因无法完成onSocketOpen的回调,该API也无法进行演示。
)
(1)附上wx.sendSocketMessage的参数说明
(2)js中的示例代码
4.与发送消息对应,这部分记录接收到的来自服务器的消息,使用wx.onSocketMessage(CALLBACK)。
CALLBACK返回参数如下↓
示例代码
5.最后是socket的关闭,使用wx.closeSocket(OBJECT),参数列表如下↓
(1)使用wx.onSocketClose(CALLBACK)监听WebSocket关闭。
1.使用wx.connectSocket(OBJECT)连接,OBJECT的参数说明如下↓
参数 | 类型 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|
url | String | 是 | 开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名 | |
header | Object | 否 | HTTP Header , header 中不能设置 Referer | |
method | String | 否 | 默认是GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT | |
protocols | StringArray | 否 | 子协议数组 | 1.4.0 |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
(1)使用wx.onSocketOpen(CALLBACK)可以监听WebSocket连接打开事件。
(2)使用wx.onSocketError(CALLBACK)可以监听WebSocket错误。
(3)在js文件里调用connectSocket ,url随便填写了一个不存在的,既没有success的回调,也没有fail的回调。console只输出了connect....,目前不会编写php,可能暂时没办法测试了。
connect: function () { console.log("connect...") wx.connectSocket({ url: 'xxx.xxx.xxx.xxx:8080/wxapp/test.php', success: function (res) { console.log("success") }, fail: function (res) { console.log("fail") }, complete: function (res) { console.log(res) }, }) }
3.通过WebSocket连接发送数据,使用wx.sendSocketMessage(OBJECT)完成,但是需要先进行wx.connectSocket,并在监听开始的wx.onSocketOpen回调之后才可以进行发送。(因无法完成onSocketOpen的回调,该API也无法进行演示。
)
(1)附上wx.sendSocketMessage的参数说明
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
data | String/ArrayBuffer | 是 | 需要发送的内容 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
var socketOpen = false//布尔值记录socket是否开着,初始为false var socketMsgQueue = []//记录要发送的socket消息的队列 wx.connectSocket({ url: 'test.php'//同样,该处为一个虚拟的url }) wx.onSocketOpen(function(res) { socketOpen = true//监测到open后,将布尔值置为true for (var i = 0; i < socketMsgQueue.length; i++){ sendSocketMessage(socketMsgQueue[i])//依次发送消息 } socketMsgQueue = []//发送完将队列置空 }) function sendSocketMessage(msg) { if (socketOpen) {/*如果open则发送该条消息,否则将其加入消息队列*/ wx.sendSocketMessage({ data:msg }) } else { socketMsgQueue.push(msg) } }
4.与发送消息对应,这部分记录接收到的来自服务器的消息,使用wx.onSocketMessage(CALLBACK)。
CALLBACK返回参数如下↓
参数 | 类型 | 说明 |
---|---|---|
data | String/ArrayBuffer | 服务器返回的消息 |
wx.connectSocket({ url: 'test.php' }) wx.onSocketMessage(function(res) { console.log('收到服务器内容:' + res.data) })
5.最后是socket的关闭,使用wx.closeSocket(OBJECT),参数列表如下↓
参数 | 类型 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|
code | Number | 否 | 一个数字值表示关闭连接的状态号,表示连接被关闭的原因。如果这个参数没有被指定,默认的取值是1000 (表示正常连接关闭) | 1.4.0 |
reason | String | 否 | 一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于123字节的UTF-8 文本(不是字符) | 1.4.0 |
success | Function | 否 | 接口调用成功的回调函数 | |
fail | Function | 否 | 接口调用失败的回调函数 | |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.connectSocket({ url: 'test.php' }) //注意这里有时序问题, //如果 wx.connectSocket 还没回调 wx.onSocketOpen,而先调用 wx.closeSocket,那么就做不到关闭 WebSocket 的目的。 //必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。 wx.onSocketOpen(function() { wx.closeSocket() }) wx.onSocketClose(function(res) { console.log('WebSocket 已关闭!') })
相关文章推荐
- 微信小程序 网络API Websocket详解
- 微信小程序 网络API 上传、下载详解
- 微信小程序API之网络(二)上传数据
- 微信小程序API之网络(三)下载数据
- 微信小程序API之网络(一)发起请求
- 第三篇、微信小程序-网络请求API
- 微信小程序请求网络API 400错误的解决方法
- 微信小程序 网络请求API详解
- 微信小程序 5 网络api
- 【微信小程序】网络请求接口封装实例
- 关于小程序中网络相关API的说明
- 微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 原创:微信小程序调用【统一下单】、【支付】、【支付回调】api并处理请求
- PHP:微信小程序调用【统一下单】【微信支付】【支付回调】API;XML转Array,Array转XML方法(通用)
- 微信小程序开发—快速掌握组件及API的方法
- 微信小程序实践——用Promise 封装API
- 微信小程序开发(六) - API
- 微信小程序8 位置与设备api
- 截取程序的网络封包(Delphi Hook API)