微信小程序中使用wx.onSocketOpen 的demo

下面是一个简单的微信小程序使用`wx.onSocketOpen`的示例代码：

Page({
  data: {
    socketMsg: '',
    socketOpen: false
  },
  onLoad: function () {
    // 打开WebSocket连接
    wx.connectSocket({
      url: 'wss://example.com/socket',
      success: () => {
        console.log('WebSocket连接成功')
      }
    })
    // 监听WebSocket连接打开事件
    wx.onSocketOpen(() => {
      console.log('WebSocket连接已打开')
      this.setData({
        socketOpen: true
      })
    })
    // 监听WebSocket接收到服务器的消息事件
    wx.onSocketMessage((res) => {
      console.log('收到服务器消息：', res.data)
      this.setData({
        socketMsg: res.data
      })
    })
    // 监听WebSocket错误事件
    wx.onSocketError((res) => {
      console.error('WebSocket连接错误：', res)
    })
    // 监听WebSocket关闭事件
    wx.onSocketClose(() => {
      console.log('WebSocket连接已关闭')
      this.setData({
        socketOpen: false
      })
    })
  },
  // 发送消息给服务器
  sendMsg: function () {
    if (this.data.socketOpen) {
      wx.sendSocketMessage({
        data: 'Hello, WebSocket!'
      })
    } else {
      wx.showToast({
        title: 'WebSocket未连接',
        icon: 'none'
      })
    }
  }
})

在这个示例代码中，我们使用`wx.connectSocket`打开一个WebSocket连接，并在成功连接后，使用`wx.onSocketOpen`监听WebSocket连接打开事件。当WebSocket连接打开时，我们将`socketOpen`数据设置为`true`。

在接下来的代码中，我们使用`wx.onSocketMessage`监听WebSocket接收到服务器的消息事件，并将接收到的消息通过`setData`方法保存到`socketMsg`数据中。

当WebSocket连接发生错误时，我们使用`wx.onSocketError`监听错误事件，并在控制台输出错误信息。

最后，我们使用`wx.onSocketClose`监听WebSocket关闭事件，并将`socketOpen`数据设置为`false`。

除此之外，在这个示例代码中还包含了一个`sendMsg`方法，用于发送消息给服务器。在点击发送按钮时，我们通过判断`socketOpen`数据的值来确定WebSocket是否已连接。如果已连接，我们使用`wx.sendSocketMessage`方法发送一条消息。如果未连接，我们使用`wx.showToast`方法显示一个提示信息。

希望这个示例代码能够帮助你理解如何在微信小程序中使用`wx.onSocketOpen`。