Skip to content

qin.connectSocket ​

创建一个 WebSocket 连接。

在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。

OBJECT 参数说明

参数名类型必填说明平台差异说明
urlString是服务器接口地址小程序中必须是 wss:// 协议
headerObject否HTTP Header , header 中不能设置 Referer小程序
methodString否默认是GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT仅微信小程序支持
protocolsArray<String>否子协议数组H5、微信小程序、抖音小程序
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行) 

示例代码

js
qin.connectSocket({
  url: 'wss://www.example.com/socket',
  header: {
    'content-type': 'application/json'
  },
  protocols: ['protocol1'],
  method: 'GET'
});
qin.connectSocket({
  url: 'wss://www.example.com/socket',
  header: {
    'content-type': 'application/json'
  },
  protocols: ['protocol1'],
  method: 'GET'
});

返回值

如果希望返回一个 socketTask 对象,需要至少传入 success / fail / complete 参数中的一个。例如:

js
var socketTask = qin.connectSocket({
  url: 'wss://www.example.com/socket', //仅为示例,并非真实接口地址。
  complete: ()=> {}
});
var socketTask = qin.connectSocket({
  url: 'wss://www.example.com/socket', //仅为示例,并非真实接口地址。
  complete: ()=> {}
});

如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象: Promise 封装

注意事项

  • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
  • 微信小程序平台 1.7.0 及以上版本,最多可以同时存在 5 个 WebSocket 连接。老版本只支持一个socket连接。

qin.onSocketOpen ​

监听 WebSocket 连接打开事件。

平台兼容性

抖音小程序不支持

CALLBACK 返回参数

属性类型说明
headerObject连接成功的 HTTP 响应 Header

示例代码:

js
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});
qin.onSocketOpen(() => {
  console.log('WebSocket连接已打开!');
});
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});
qin.onSocketOpen(() => {
  console.log('WebSocket连接已打开!');
});

qin.onSocketError ​

监听 WebSocket 错误。

平台兼容性

抖音小程序不支持

示例代码

js
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});
qin.onSocketOpen(() => {
  console.log('WebSocket连接已打开!');
});
qin.onSocketError(() => {
  console.log('WebSocket连接打开失败,请检查!');
});
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});
qin.onSocketOpen(() => {
  console.log('WebSocket连接已打开!');
});
qin.onSocketError(() => {
  console.log('WebSocket连接打开失败,请检查!');
});

qin.sendSocketMessage(OBJECT) ​

通过 WebSocket 连接发送数据,需要先 qin.connectSocket ,并在 qin.onSocketOpen 回调之后才能发送。

平台兼容性

抖音小程序不支持

OBJECT 参数说明:

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

示例代码

js
let socketOpen = false;
let socketMsgQueue = [];

qin.connectSocket({
  url: 'wss://www.example.com/socket'
});

qin.onSocketOpen(() => {
  socketOpen = true;
  for (let i = 0; i < socketMsgQueue.length; i++) {
    sendSocketMessage(socketMsgQueue[i]);
  }
  socketMsgQueue = [];
});

function sendSocketMessage(theMsg) {
  if (socketOpen) {
    qin.sendSocketMessage({
      data: theMsg,
    });
  } else {
    socketMsgQueue.push(theMsg);
  }
}
let socketOpen = false;
let socketMsgQueue = [];

qin.connectSocket({
  url: 'wss://www.example.com/socket'
});

qin.onSocketOpen(() => {
  socketOpen = true;
  for (let i = 0; i < socketMsgQueue.length; i++) {
    sendSocketMessage(socketMsgQueue[i]);
  }
  socketMsgQueue = [];
});

function sendSocketMessage(theMsg) {
  if (socketOpen) {
    qin.sendSocketMessage({
      data: theMsg,
    });
  } else {
    socketMsgQueue.push(theMsg);
  }
}

qin.onSocketMessage ​

监听 WebSocket 接受到服务器的消息事件。

平台兼容性

抖音小程序不支持

CALLBACK 返回参数

参数类型说明
dataString/ArrayBuffer服务器返回的消息

示例代码:

js
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});

qin.onSocketMessage((theRes) => {
  console.log('收到服务器内容:' + theRes.data);
});
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});

qin.onSocketMessage((theRes) => {
  console.log('收到服务器内容:' + theRes.data);
});

qin.closeSocket ​

关闭 WebSocket 连接。

平台兼容性

抖音小程序不支持

OBJECT 参数说明

参数名类型必填说明
codeNumber否一个数字值表示关闭连接的状态号,表示连接被关闭的原因。如果这个参数没有被指定,默认的取值是 1000 (表示正常连接关闭)
reasonString否一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本(不是字符)
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)

qin.onSocketClose ​

监听WebSocket关闭。

平台兼容性

抖音小程序不支持

js
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});

// 注意这里有时序问题,
// 如果 qin.connectSocket 还没回调 qin.onSocketOpen,而先调用 qin.closeSocket,那么就做不到关闭 WebSocket 的目的。
// 必须在 WebSocket 打开期间调用 qin.closeSocket 才能关闭。
qin.onSocketOpen(() => {
  qin.closeSocket();
});

qin.onSocketClose(() => {
  console.log('WebSocket 已关闭!');
});
qin.connectSocket({
  url: 'wss://www.example.com/socket',
});

// 注意这里有时序问题,
// 如果 qin.connectSocket 还没回调 qin.onSocketOpen,而先调用 qin.closeSocket,那么就做不到关闭 WebSocket 的目的。
// 必须在 WebSocket 打开期间调用 qin.closeSocket 才能关闭。
qin.onSocketOpen(() => {
  qin.closeSocket();
});

qin.onSocketClose(() => {
  console.log('WebSocket 已关闭!');
});