uniapp如何监听广播消息

在uniapp中如何实现监听广播消息的功能？我需要接收来自其他应用或系统发送的广播，比如网络状态变化、电池电量变化等。具体应该使用哪个API？是否有相关的代码示例可以参考？在安卓和iOS平台上实现方式是否有差异？

2 回复

在uni-app中，可以使用uni.onSocketMessage监听WebSocket消息。如果是原生广播，需使用条件编译调用原生API，如plus.globalEvent.addEventListener。


在 UniApp 中，可以通过 uni.onSocketMessage() 监听 WebSocket 服务器推送的广播消息。以下是具体步骤和代码示例：

实现步骤：

  1. 建立 WebSocket 连接：使用 uni.connectSocket() 连接到服务器。
  2. 监听消息事件：通过 uni.onSocketMessage() 接收服务器推送的数据。
  3. 处理消息内容：在回调函数中解析并处理广播消息。
  4. 关闭连接：使用 uni.closeSocket() 在适当时机断开连接。

代码示例：

// 1. 建立 WebSocket 连接
uni.connectSocket({
  url: 'wss://yourserver.com/socket', // 替换为你的 WebSocket 地址
  success: () => {
    console.log('WebSocket 连接成功');
  },
  fail: (err) => {
    console.error('连接失败:', err);
  }
});

// 2. 监听消息
uni.onSocketMessage((res) => {
  console.log('收到服务器消息:', res.data);
  // 解析数据（假设为 JSON 格式）
  try {
    const message = JSON.parse(res.data);
    // 处理消息逻辑，例如更新页面数据
    this.handleBroadcast(message);
  } catch (e) {
    console.error('消息解析失败:', e);
  }
});

// 3. 处理消息的函数示例
methods: {
  handleBroadcast(message) {
    // 根据消息类型执行不同操作
    if (message.type === 'notification') {
      uni.showToast({
        title: message.content,
        icon: 'none'
      });
    }
    // 更新数据或触发其他逻辑
  }
}

// 4. 关闭连接（例如在页面卸载时）
onUnload() {
  uni.closeSocket();
}

注意事项：

  • 兼容性：WebSocket 在 H5 和部分小程序平台支持，需确保后端服务兼容。
  • 错误处理：添加 uni.onSocketError() 监听连接错误。
  • 心跳机制：长时间连接建议通过定时发送心跳包保持活跃。

如果使用其他通信方式（如 SSE 或第三方推送服务），需引入对应 SDK 并调整监听逻辑。

回到顶部