微信小程序webSocket的设置
2017-02-24 09:21
477 查看
小程序发布一个多月了,慢慢的也摸索的差不多了,今天加了一个webSocket,遇到点坑,写来分享下,水平有限。
小程序最大的优点就是给的东西很全,缺点也是有些封闭了,
关于websocket的设置,API里边已经给了,
OBJECT参数说明:
示例代码:
示例代码:
示例代码:
OBJECT参数说明:
示例代码:
CALLBACK返回参数:
示例代码:
在app.js的onshow中打开websocket,并设置在错误和失败的监听,当连接断开了的时候需要进行重新连接
在app.js的onhide的关闭websocket
这样避免用户打开小程序之后通过Home键退出的时候防止websocket的断开
小程序最大的优点就是给的东西很全,缺点也是有些封闭了,
关于websocket的设置,API里边已经给了,
wx.connectSocket(OBJECT)
创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名 |
data | Object | 否 | 请求的数据 |
header | Object | 否 | HTTP Header , header 中不能设置 Referer |
method | String | 否 | 默认是GET,有效值为: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.connectSocket({ url: 'test.php', data:{ x: '', y: '' }, header:{ 'content-type': 'application/json' }, method:"GET" })
wx.onSocketOpen(CALLBACK)
监听WebSocket连接打开事件。示例代码:
wx.connectSocket({ url: 'test.php' }) wx.onSocketOpen(function(res) { console.log('WebSocket连接已打开!') })
wx.onSocketError(CALLBACK)
监听WebSocket错误。示例代码:
wx.connectSocket({ url: 'test.php' }) wx.onSocketOpen(function(res){ console.log('WebSocket连接已打开!') }) wx.onSocketError(function(res){ console.log('WebSocket连接打开失败,请检查!') })
wx.sendSocketMessage(OBJECT)
通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
data | String/ArrayBuffer | 是 | 需要发送的内容 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
var socketOpen = false var socketMsgQueue = [] wx.connectSocket({ url: 'test.php' }) wx.onSocketOpen(function(res) { socketOpen = true for (var i = 0; i < socketMsgQueue.length; i++){ sendSocketMessage(socketMsgQueue[i]) } socketMsgQueue = [] }) function sendSocketMessage(msg) { if (socketOpen) { wx.sendSocketMessage({ data:msg }) } else { socketMsgQueue.push(msg) } }
wx.onSocketMessage(CALLBACK)
监听WebSocket接受到服务器的消息事件。CALLBACK返回参数:
参数 | 类型 | 说明 |
---|---|---|
data | String/ArrayBuffer | 服务器返回的消息 |
wx.connectSocket({ url: 'test.php' }) wx.onSocketMessage(function(res) { console.log('收到服务器内容:' + res.data) })
wx.closeSocket()
关闭WebSocket连接。wx.onSocketClose(CALLBACK)
监听WebSocket关闭。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 已关闭!') })
Bug & Tip
tip: createSocket 链接默认和最大超时时间都是 60s
tip: 网络请求的 referer 是不可以设置的,格式固定为
https://servicewechat.com/{appid}/{version}/page-frame.html,其中
{appid}为小程序的 appid,
{version}为小程序的版本号,版本号为 0 表示为开发版。
在app.js的onshow中打开websocket,并设置在错误和失败的监听,当连接断开了的时候需要进行重新连接
在app.js的onhide的关闭websocket
这样避免用户打开小程序之后通过Home键退出的时候防止websocket的断开
相关文章推荐
- 微信小程序三(设置页面标题)
- 微信小程序 websocket
- 微信小程序之WebSocket
- 微信小程序全局窗口属性设置和单个窗口属性设置
- 微信小程序设置头像
- 微信小程序示WebSocket长连接应用场景例利用腾讯云仅限开发案例二
- 微信小程序-page.json中设置背景色不生效解决办法
- 微信小程序15---将组件设置为圆形
- 微信小程序-WebSocket
- 微信小程序——View背景设置
- 微信小程序例子——使用slider设置数据值和switch开关组件
- 微信小程序 网络API Websocket详解
- 【微信小程序开发•系列文章七】websocket
- 微信小程序 websocket
- 【微信小程序常见问题】下拉框设置picker哪个属性。
- 微信小程序四(设置底部导航)
- 微信小程序设置http请求的步骤详解
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案二
- http转https 和 微信小程序设置了合法请求域名,小程序一直提示不在合法域名列别中
- 微信小程序 --动态设置标题栏的文字