• uni.connectSocket(OBJECT)
  • uni.onSocketOpen(CALLBACK)
  • uni.onSocketError(CALLBACK)
  • uni.sendSocketMessage(OBJECT)
  • uni.onSocketMessage(CALLBACK)
  • uni.closeSocket(OBJECT)
  • uni.onSocketClose(CALLBACK)

    uni.connectSocket(OBJECT)

    创建一个 WebSocket 连接。

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

    OBJECT 参数说明

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

    示例代码

    1. uni.connectSocket({
    2. url: 'wss://www.example.com/socket',
    3. data() {
    4. return {
    5. x: '',
    6. y: ''
    7. };
    8. },
    9. header: {
    10. 'content-type': 'application/json'
    11. },
    12. protocols: ['protocol1'],
    13. method: 'GET'
    14. });

    返回值

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

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

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

    注意事项

    • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
    • 目前不支持 ArrayBuffer 类型的数据收发,可以使用 plus-websocket 插件替代。
    • 自定义组件模式下是基于 weexv8 引擎运行,所有 vue 页面的 js 都是在同一个 weexjs 环境中运行。目前 weex 限制一个 js 环境中只支持一个 websocket 连接,所以导致所有 vue 页面只能使用一个 websocket 连接。临时解决方案:
    1. - 回退使用非自定义组件模式(不推荐)
    2. - 多个 websocket 在独立的 nvue 页面中使用
    3. - 使用 [plus-websocket](http://ext.dcloud.net.cn/plugin?id=647) 插件替代

    后续我们会修改 weex 的限制,以支持多个 websocket 连接

    uni.onSocketOpen(CALLBACK)

    监听WebSocket连接打开事件。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序

    CALLBACK 返回参数

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

    示例代码:

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

    uni.onSocketError(CALLBACK)

    监听WebSocket错误。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序

    示例代码

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

    uni.sendSocketMessage(OBJECT)

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

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序

    OBJECT 参数说明:

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

    示例代码

    1. var socketOpen = false;
    2. var socketMsgQueue = [];
    3. uni.connectSocket({
    4. url: 'wss://www.example.com/socket'
    5. });
    6. uni.onSocketOpen(function (res) {
    7. socketOpen = true;
    8. for (var i = 0; i < socketMsgQueue.length; i++) {
    9. sendSocketMessage(socketMsgQueue[i]);
    10. }
    11. socketMsgQueue = [];
    12. });
    13. function sendSocketMessage(msg) {
    14. if (socketOpen) {
    15. uni.sendSocketMessage({
    16. data: msg
    17. });
    18. } else {
    19. socketMsgQueue.push(msg);
    20. }
    21. }

    uni.onSocketMessage(CALLBACK)

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

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序

    CALLBACK 返回参数

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

    示例代码:

    1. uni.connectSocket({
    2. url: 'wss://www.example.com/socket'
    3. });
    4. uni.onSocketMessage(function (res) {
    5. console.log('收到服务器内容:' + res.data);
    6. });

    uni.closeSocket(OBJECT)

    关闭 WebSocket 连接。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序

    OBJECT 参数说明

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

    uni.onSocketClose(CALLBACK)

    监听WebSocket关闭。

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    1. uni.connectSocket({
    2. url: 'wss://www.example.com/socket'
    3. });
    4. // 注意这里有时序问题,
    5. // 如果 uni.connectSocket 还没回调 uni.onSocketOpen,而先调用 uni.closeSocket,那么就做不到关闭 WebSocket 的目的。
    6. // 必须在 WebSocket 打开期间调用 uni.closeSocket 才能关闭。
    7. uni.onSocketOpen(function () {
    8. uni.closeSocket();
    9. });
    10. uni.onSocketClose(function (res) {
    11. console.log('WebSocket 已关闭!');
    12. });

    发现错误?想参与编辑?在 GitHub 上编辑此页面!