【微信小程序 SocketTask 详解】

SocketTask 创建

/*SocketTask*/
wx.connectSocket(Object object)
// ps (一般情况下不会使用到其他参数)
/**
常用参数：
	url： --开发者服务器 wss 接口地址
	header： --HTTP Header，Header 中不能设置 Referer
	timeout：--超时时间，单位为毫秒
	success： --接口调用成功的回调函数
	fail： --接口调用失败的回调函数
	complete：--接口调用结束的回调函数（调用成功、失败都会执行）
*/
wx.connectSocket({
  url: 'wss://example.qq.com',
  header:{
    'content-type': 'application/json'
  }
})

监听事件

只需要开启一个SocketTask连接

/**
此处一般定义一个变量去判断是否在创建完SocketTask连接后,成功调用 wx.onSocketOpen方法；
此处也是问题多发生地，因为在创建完SocketTask连接后，可能会出现不会进入open 监听方法中
#### 问题分析
01 检查connectSocket url 地址是否正确
02 是否建立连接时报错（比如10000 ，10001 等错误信息）
*/ 
    wx.onSocketOpen(() => {
    // 开启开关
      this.setData({
        socketOpen: true
      });
    });
/**
此处监听Socket是否有数据返回，一般异步多次返回 具体看业务需求/接口数据
*/    
    wx.onSocketMessage((res) => {
   // 此处去接收返回值，做相关业务
    });
/**
监听Socket异常
*/
    wx.onSocketError((res) => {
      this.addToLog("WebSocket error");
    });
/**
Socket 关闭 （主动关闭，被动关闭） 
一般情况下，开启长连接微信小程序不会立马关闭
如果出现异常，检查Socket域名配置，或者是否是本地调试未开启 不检验合法域名选项
*/
    wx.onSocketClose((res) => {
    // 关闭开关
      this.setData({
        socketOpen: false
      });
    });

完整demo

wxml 文件：

<view class="container">
  <view class="logs">
    <block wx:for="{{logs}}" wx:key="index">
      <view class="log-item">{{item}}view>
    block>
  view>
view>

js 文件：

Page({
  data: {
    logs: [],
    socketOpen: false,
    socketMsgQueue: [],
  },

  onLoad: function () {
    this.connectSocket();
  },

  connectSocket: function () {
    wx.connectSocket({
      url: "ws://localhost:8080",
    });

    wx.onSocketOpen(() => {
      this.setData({
        socketOpen: true
      });

      this.sendSocketMessage("Hello, WebSocket!");
    });

    wx.onSocketMessage((res) => {
      this.addToLog("Receive message: " + res.data);
    });

    wx.onSocketError((res) => {
      this.addToLog("WebSocket error");
    });

    wx.onSocketClose((res) => {
      this.setData({
        socketOpen: false
      });
      this.addToLog("WebSocket closed");
    });
  },

  closeSocket: function () {
    wx.closeSocket({
      success: () => {
        this.setData({
          socketOpen: false
        });
        this.addToLog("WebSocket closed");
      },
      // 此处重点 
      // 据本人微信小程序相关WebSocket经验，一般报错无法在创建WebSocket fail中获取，而是直接触发 close 方法时报错.
      //这也是很多小伙伴发现自己的open 方法不触发，自己又监听不到错误的原因之一，因此这块的fail 很重要
      fail: () => {
        this.addToLog("WebSocket close failed");
      }
    });
  },

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

  addToLog: function (log) {
    this.data.logs.push(log);

    this.setData({
      logs: this.data.logs
    });
  }
})

说明：

1. 首先，在 onLoad 函数中调用 connectSocket 函数连接 WebSocket。

2. connectSocket 函数的实现如下：

   a. 调用 wx.connectSocket 方法连接 WebSocket。

   b. 监听 WebSocket 的打开事件，并发送一条消息：“Hello, WebSocket!”。

   c. 监听 WebSocket 的消息事件，并将接收到的消息添加到日志列表中。

   d. 监听 WebSocket 的错误事件，并将错误消息添加到日志列表中。

   e. 监听 WebSocket 的关闭事件，并将关闭消息添加到日志列表中。

3. 实现关闭 WebSocket 的函数 closeSocket。

4. 实现发送消息的函数 sendSocketMessage。如果 WebSocket 已经打开，则调用 wx.sendSocketMessage 方法发出消息；否则将待发送的消息推入一个消息队列中。

5. 实现一个 addToLog 函数，用于将日志添加到日志列表中。

开启多个SocketTask连接

微信官方提供了SocketTask 统一管理方法

demo

	let scoket_one , scoket_two;
	
  	scoket_one = wx.connectSocket({
      url: 'wss://test.com/ws1',
      success: function (resConnect) {
      //打开连接成功
      }
    })
    scoket_one.onOpen((res)=>{
     
    })
 
    scoket_one.onMessage( (err) =>{
      console.log(err)
    })
    scoket_one.onClose( (res) =>{
      console.log(res,'scoket_one关闭')
    })
 
    scoket_two = wx.connectSocket({
      url: 'wss://test.com/ws2',
      success:  (res)=> {
      //打开连接成功
      }
    })
    scoket_two.onOpen((res)=>{
    })
 
    scoket_two.onMessage((err)=> {
      console.log(err)
    })
    scoket_two.onClose( (res) =>{
      console.log(res,'scoket_two关闭')
    })