websocket.md 6.5 KB
Newer Older
DCloud_JSON's avatar
DCloud_JSON 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
### uni.connectSocket(OBJECT)
创建一个 [WebSocket](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket) 连接。

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

**OBJECT 参数说明**

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

**示例代码**

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

**返回值**

如果希望返回一个 [socketTask](/api/request/socket-task) 对象,需要至少传入 success / fail / complete 参数中的一个。例如:

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

如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象:[Promise 封装](/api/README?id=promise-%E5%B0%81%E8%A3%85)

**注意事项**

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


### uni.onSocketOpen(CALLBACK)
监听WebSocket连接打开事件。

**平台兼容性**

抖音小程序不支持

**CALLBACK 返回参数**

|属性|类型|说明|
|:-|:-|:-|
|header|Object|连接成功的 HTTP 响应 Header|

**示例代码:**

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


### uni.onSocketError(CALLBACK)
监听WebSocket错误。

**平台兼容性**

抖音小程序不支持

**示例代码**

```javascript
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](/api/request/websocket?id=connectsocket),并在 [uni.onSocketOpen](/api/request/websocket?id=onsocketopen) 回调之后才能发送。

**平台兼容性**

抖音小程序不支持

**OBJECT 参数说明:**

|参数名|类型|必填|说明|
|:-|:-|:-|:-|
|data|String/ArrayBuffer|是|需要发送的内容|
|success|Function|否|接口调用成功的回调函数|
|fail|Function|否|接口调用失败的回调函数|
|complete|Function|否|接口调用结束的回调函数(调用成功、失败都会执行)|

**示例代码**

```javascript
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);
  }
}
```

hbcui1984's avatar
hbcui1984 已提交
147
**注意事项**
taohebin@dcloud.io's avatar
taohebin@dcloud.io 已提交
148 149 150

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

DCloud_JSON's avatar
DCloud_JSON 已提交
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
### uni.onSocketMessage(CALLBACK)
监听WebSocket接受到服务器的消息事件。

**平台兼容性**

抖音小程序不支持

**CALLBACK 返回参数**

|参数|类型|说明|
|:-|:-|:-|
|data|String/ArrayBuffer|服务器返回的消息|

**示例代码:**

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

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

### uni.closeSocket(OBJECT)
关闭 WebSocket 连接。

**平台兼容性**

抖音小程序不支持

**OBJECT 参数说明**

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

### uni.onSocketClose(CALLBACK)
监听WebSocket关闭。

**平台兼容性**

抖音小程序不支持

```javascript
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 已关闭!');
});
```