微信小程序webSocket的使用方法

在微信小程序中，使用 WebSocket 可以实现实时的双向通信，适合于需要实时更新数据的场景，比如聊天应用、在线游戏、实时数据监控等。下面是关于如何在微信小程序中使用 WebSocket 的详细步骤和代码示例。

一、WebSocket 使用步骤

1. 创建 WebSocket 连接：
   使用 wx.connectSocket() 方法来建立 WebSocket 连接。

2. 监听 WebSocket 事件：
   通过监听 WebSocket 的各种事件（如连接打开、消息接收、连接关闭等）来处理数据。

3. 发送消息：
   使用 wx.sendSocketMessage() 方法发送数据到服务器。

4. 关闭连接：
   当不再需要 WebSocket 连接时，使用 wx.closeSocket() 方法关闭连接。

// 在你的页面或组件的 JS 文件中

Page({
  data: {
    socketOpen: false,
    messages: [] // 用于存储接收到的消息
  },
  
  onLoad: function() {
    this.initWebSocket(); // 初始化 WebSocket
  },

  initWebSocket: function() {
    // 创建 WebSocket 连接
    const that = this;
    const socket = wx.connectSocket({
      url: 'wss://your-websocket-url', // WebSocket 服务器的 URL
      header: {
        'content-type': 'application/json' // 指定发送格式
      },
      protocols: ['protocol1', 'protocol2'] // 可选，自定义协议
    });
    
    // 监听 WebSocket 连接打开事件
    socket.onOpen(() => {
      console.log('WebSocket连接已打开');
      that.setData({ socketOpen: true });
    });

    // 监听 WebSocket 接收到消息事件
    socket.onMessage((res) => {
      console.log('收到消息:', res.data);
      // 更新消息列表
      that.setData({
        messages: that.data.messages.concat(res.data)
      });
    });

    // 监听 WebSocket 错误事件
    socket.onError((error) => {
      console.error('WebSocket连接发生错误:', error);
    });

    // 监听 WebSocket 连接关闭事件
    socket.onClose(() => {
      console.log('WebSocket连接已关闭');
      that.setData({ socketOpen: false });
    });
    
    this.socket = socket; // 保存 socket 以便后续使用
  },

  sendMessage: function(message) {
    if (this.data.socketOpen) {
      this.socket.send({
        data: message,
        success: () => {
          console.log('消息发送成功:', message);
        },
        fail: (error) => {
          console.error('消息发送失败:', error);
        }
      });
    } else {
      console.log('WebSocket 未连接');
    }
  },

  closeWebSocket: function() {
    if (this.socket) {
      this.socket.close();
    }
  },

  onUnload: function() {
    this.closeWebSocket(); // 页面卸载时关闭 WebSocket 连接
  },
  
  // 示例按钮点击发送消息
  onSendButtonClick: function() {
    const message = 'Hello, WebSocket!'; // 发送的消息
    this.sendMessage(message);
  }
});

1. 创建 WebSocket 连接：

• 使用 wx.connectSocket() 创建 WebSocket 连接，指定服务器 URL 和请求头。

2. 监听事件：

• onOpen: 连接成功的回调，设置状态并可执行后续操作。

• onMessage: 接收服务器发送的消息，可更新界面或进行后续处理。

• onError: 监听连接错误，便于调试。

• onClose: 监听连接关闭事件，可以做一些资源清理等操作。

3. 发送消息：

• 使用 this.socket.send() 发送消息。需要判断连接是否打开。

4. 关闭连接：

• 使用 this.socket.close() 关闭 WebSocket 连接，建议在页面卸载时进行清理。

5. 示例按钮：

• 可以用按钮触发发送消息，以便测试功能。