微信小程序如何实现websoket

微信小程序通过内置的 `wx.connectSocket` 等 API 原生支持 WebSocket，无需额外引入第三方库，核心是建立连接、监听状态、发送/接收消息及关闭连接。

### 核心实现步骤

1. **建立 WebSocket 连接**

   - 调用 `wx.connectSocket` 指定后端 WebSocket 服务地址（协议为 `ws://` 或加密的 `wss://`）。

   - 可通过 `header` 传递自定义参数（如 Token），`protocols` 指定子协议。

2. **监听连接状态与消息**

   - 用 `wx.onSocketOpen` 监听连接成功事件，连接成功后才可发送消息。

   - 用 `wx.onSocketMessage` 接收后端推送的消息（含文本、二进制数据）。

   - 用 `wx.onSocketError` 监听连接错误，`wx.onSocketClose` 监听连接关闭。

3. **发送消息与关闭连接**

   - 连接成功后，通过 `wx.sendSocketMessage` 发送文本或二进制消息。

   - 无需连接时，用 `wx.closeSocket` 主动关闭，关闭结果通过 `wx.onSocketClose` 回调。

### 完整代码示例

```javascript

// 1. 建立连接

wx.connectSocket({

  url: 'wss://your-server.com/ws', // 后端 WebSocket 地址

  header: {

    'Authorization': 'your-token' // 可选：传递身份验证信息

  },

  protocols: ['protocol1'], // 可选：指定子协议

  success: (res) => {

    console.log('连接请求发送成功', res);

  }

});

// 2. 监听连接成功

wx.onSocketOpen((res) => {

  console.log('WebSocket 连接已打开', res);

  // 连接成功后发送消息

  wx.sendSocketMessage({

    data: JSON.stringify({ type: 'hello', content: '小程序请求' }), // 文本消息

    // data: ArrayBuffer.from([1,2,3]) // 二进制消息（需转换为 ArrayBuffer）

  });

});

// 3. 接收后端消息

wx.onSocketMessage((res) => {

  console.log('收到后端消息', res);

  // 处理文本消息（若为二进制需解析 ArrayBuffer）

  const message = JSON.parse(res.data);

  // 业务逻辑处理（如更新页面数据、触发通知）

});

// 4. 监听错误与关闭

wx.onSocketError((err) => {

  console.error('WebSocket 连接错误', err);

  // 可尝试重连（需加重试机制，避免频繁重试）

});

wx.onSocketClose((res) => {

  console.log('WebSocket 连接已关闭', res);

  // 连接关闭后的处理（如提示用户、自动重连）

});

// 5. 主动关闭连接（按需调用）

function closeWebSocket() {

  wx.closeSocket({

    success: (res) => {

      console.log('主动关闭连接成功', res);

    }

  });

}

```

### 关键注意事项

- **协议要求**：小程序仅支持 `ws://`（非加密）和 `wss://`（加密）协议，不支持 `http://` 或 `https://`。

- **域名配置**：后端 WebSocket 地址需在小程序后台「开发 → 开发设置 → 服务器域名」中配置（`wss://` 对应 `request` 域名，`ws://` 需单独配置）。

- **消息格式**：发送对象需序列化为 JSON 字符串，接收后反序列化；二进制消息需用 `ArrayBuffer` 格式。

- **重连机制**：网络波动可能导致连接断开，需手动实现重连逻辑（如连接关闭后延迟 3 秒重试，限制重试次数）。

- **生命周期管理**：页面卸载时需主动关闭连接（在 `onUnload` 中调用 `wx.closeSocket`），避免资源泄漏。

### 结尾交付物提议

要不要我帮你整理一份 **WebSocket 封装工具类**（含自动重连、消息队列、错误处理），可直接导入小程序项目复用？