微信小程序webSocket的设置

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

小程序发布一个多月了,慢慢的也摸索的差不多了,今天加了一个webSocket,遇到点坑,写来分享下,水平有限。

小程序最大的优点就是给的东西很全,缺点也是有些封闭了,

关于websocket的设置,API里边已经给了,

wx.connectSocket(OBJECT)

创建一个 WebSocket 连接;一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该连接,并重新创建一个 WebSocket 连接。

OBJECT参数说明:

参数类型必填说明
urlString开发者服务器接口地址,必须是 wss 协议,且域名必须是后台配置的合法域名
dataObject请求的数据
headerObjectHTTP Header , header 中不能设置 Referer
methodString默认是GET,有效值为: OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

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参数说明:

参数类型必填说明
dataString/ArrayBuffer需要发送的内容
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

var socketOpen = falsevar 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返回参数:

参数类型说明
dataString/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

  1. tip: createSocket 链接默认和最大超时时间都是 60s
  2. tip: 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版。

在app.js的onshow中打开websocket,并设置在错误和失败的监听,当连接断开了的时候需要进行重新连接 在app.js的onhide的关闭websocket 这样避免用户打开小程序之后通过Home键退出的时候防止websocket的断开

点这里可以跳转到人工智能网站

发表评论