uni-app里面创建一个 WebSocket 连接

uni.connectSocket(OBJECT)

创建一个 WebSocket 连接。

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

OBJECT 参数说明

参数名类型必填说明平台差异说明
urlString服务器接口地址小程序中必须是 wss:// 协议
multipleBoolean是否多实例。传入 true 时,将返回一个包含 SocketTask 实例。仅支付宝小程序支持
headerObjectHTTP Header , header 中不能设置 Referer小程序、App 2.9.6+
methodString默认是GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT仅微信小程序支持
protocolsArray<String>子协议数组App、H5、微信小程序、百度小程序、抖音小程序、飞书小程序
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

复制代码

返回值

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

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

复制代码

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

注意事项

  • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout
  • App平台,2.2.6以下的版本,不支持 ArrayBuffer 类型的数据收发。老版本不愿升级也可以使用 plus-websocket插件 插件替代。
  • App平台2.2.6以下的版本,所有 vue 页面只能使用一个 websocket 连接。App下可以使用 plus-websocket 插件替代实现多连接。
  • 微信小程序平台1.7.0 及以上版本,最多可以同时存在5个WebSocket 连接。老版本只支持一个socket连接。
  • 百度小程序平台自基础库版本 1.9.4 及以后支持多个socket连接。老版本只支持一个socket连接。
  • QQ小程序、支付宝小程序平台最多支持同时存在5个socket连接。
  • uni-push2.0在web、小程序以及APP的非离线模式下的底层实现都是基于一个socket。如果你的项目需要再次使用socket,请通过socketTask实现。

#uni.onSocketOpen(CALLBACK)

监听WebSocket连接打开事件。

平台兼容性

抖音小程序不支持

CALLBACK 返回参数

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

示例代码:

uni.connectSocket({
  url: 'wss://www.example.com/socket'
});
uni.onSocketOpen(function (res) {
  console.log('WebSocket连接已打开!');
});

复制代码

#uni.onSocketError(CALLBACK)

监听WebSocket错误。

平台兼容性

抖音小程序不支持

示例代码

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

复制代码

#uni.sendSocketMessage(OBJECT)

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

平台兼容性

抖音小程序不支持

OBJECT 参数说明:

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

示例代码

var socketOpen = false;
var socketMsgQueue = [];

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

uni.onSocketOpen(function (res) {
  socketOpen = true;
  for (var i = 0; i < socketMsgQueue.length; i++) {
    sendSocketMessage(socketMsgQueue[i]);
  }
  socketMsgQueue = [];
});

function sendSocketMessage(msg) {
  if (socketOpen) {
    uni.sendSocketMessage({
      data: msg
    });
  } else {
    socketMsgQueue.push(msg);
  }
}

复制代码

注意事项

  • 出于性能的权衡,在Android端底层实现上发送队列占用的内存不能超过16M,一旦超过将导致连接被关闭。

#uni.onSocketMessage(CALLBACK)

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

平台兼容性

抖音小程序不支持

CALLBACK 返回参数

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

示例代码:

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

uni.onSocketMessage(function (res) {
  console.log('收到服务器内容:' + res.data);
});

复制代码

#uni.closeSocket(OBJECT)

关闭 WebSocket 连接。

平台兼容性

抖音小程序不支持

OBJECT 参数说明

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

#uni.onSocketClose(CALLBACK)

监听WebSocket关闭。

平台兼容性

抖音小程序不支持

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

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

uni.onSocketClose(function (res) {
  console.log('WebSocket 已关闭!');
});
  • 22
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值