uniapp socket如何使用

在uni-app中如何使用WebSocket实现实时通信？具体步骤是什么？需要引入额外的插件或模块吗？能否提供一个简单的示例代码？在连接、发送消息和接收消息时需要注意哪些问题？

2 回复

在uni-app中使用Socket，可以通过uni.connectSocket创建连接，然后监听onOpen、onMessage等事件。示例：

uni.connectSocket({
  url: 'ws://example.com'
});
uni.onSocketOpen(() => {
  uni.sendSocketMessage({data: 'Hello'});
});
uni.onSocketMessage(res => {
  console.log(res.data);
});

记得在onUnload中调用uni.closeSocket关闭连接。


在 UniApp 中使用 WebSocket 进行实时通信，主要通过 uni.connectSocket、uni.onSocketOpen 等 API 实现。以下是基本使用步骤和示例代码：

1. 连接 WebSocket 服务器

使用 uni.connectSocket 建立连接，需指定服务器地址（如 ws:// 或 wss://）。

uni.connectSocket({
  url: 'wss://example.com/socket', // 替换为你的 WebSocket 服务器地址
  success: (res) => {
    console.log('连接成功', res);
  },
  fail: (err) => {
    console.log('连接失败', err);
  }
});

2. 监听连接打开事件

通过 uni.onSocketOpen 监听连接成功事件。

uni.onSocketOpen((res) => {
  console.log('WebSocket 连接已打开');
  // 连接成功后可以发送数据
  uni.sendSocketMessage({
    data: 'Hello Server',
    success: () => {
      console.log('消息发送成功');
    }
  });
});

3. 接收服务器消息

使用 uni.onSocketMessage 监听服务器发送的消息。

uni.onSocketMessage((res) => {
  console.log('收到服务器内容：', res.data);
});

4. 处理错误和关闭事件

  • 监听错误：uni.onSocketError 捕获连接错误。
  • 监听关闭：uni.onSocketClose 处理连接关闭。
uni.onSocketError((error) => {
  console.log('WebSocket 错误：', error);
});

uni.onSocketClose((res) => {
  console.log('WebSocket 连接已关闭');
});

5. 发送消息

通过 uni.sendSocketMessage 发送数据到服务器。

uni.sendSocketMessage({
  data: JSON.stringify({ message: 'Hello' }), // 可发送字符串或 ArrayBuffer
  success: () => {
    console.log('发送成功');
  }
});

6. 关闭连接

使用 uni.closeSocket 主动关闭连接。

uni.closeSocket();

注意事项：

  • 平台差异：部分小程序平台（如微信）可能要求配置合法域名。
  • 数据格式：默认支持字符串和 ArrayBuffer，复杂数据需序列化（如 JSON.stringify）。
  • 生命周期：建议在页面卸载时（如 onUnload）关闭连接，避免资源泄漏。

完整示例：

export default {
  methods: {
    connectSocket() {
      uni.connectSocket({
        url: 'wss://echo.websocket.org',
        success: () => {
          uni.onSocketOpen(() => {
            uni.sendSocketMessage({ data: 'Hello UniApp!' });
          });
          uni.onSocketMessage((res) => {
            console.log('接收:', res.data);
          });
        }
      });
    }
  },
  onUnload() {
    uni.closeSocket(); // 页面关闭时断开连接
  }
}

通过以上步骤，即可在 UniApp 中实现 WebSocket 通信。如有复杂需求（如重连机制），可结合定时器或状态管理扩展。

回到顶部