uni-app 使用报Bug

uni-app 使用报Bug

操作步骤：

  • 真机运行提供的demo

预期结果：

  • 真机 socket连接成功, 首发二进制消息成功

实际结果：

  • 真机 socket连接成功, 发二进制消息报错
    [Vue warn]: Error in event handler for “api.onSocketTaskStateChange”: “Error: Unknown type: [object ArrayBuffer]”

bug描述：

uniapp 使用 插件库 hyoga-uni-socket.io插件（基于socket.io ），连接socket成功， H5 模式首发二进制消息没有问题，但是真机发送二进制消息失败，是HBuilderX 底层websocket 不支持
二进制消息吗？
以下为报错信息， demo已上传，麻烦能排查一下
[Vue warn]: Error in event handler for “api.onSocketTaskStateChange”: “Error: Unknown type: [object ArrayBuffer]”

信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.12
手机系统 iOS
手机系统版本号 iOS 14
手机厂商 苹果
手机机型 iphone8 plus
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 使用报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

您好，这个问题最后怎么解决的呀?

更多关于uni-app 使用报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的信息，这个问题的核心在于uni-app App端WebSocket对二进制数据的支持限制。

问题分析：

  1. 平台差异：uni-app的WebSocket API在不同平台实现不同。H5端直接使用浏览器原生WebSocket，完整支持ArrayBuffer等二进制类型。但App端（iOS/Android）使用的是原生WebSocket封装，对二进制数据的支持存在限制。

  2. 错误根源：[object ArrayBuffer]错误表明App端的WebSocket实现无法识别ArrayBuffer类型。虽然uni-app官方文档提到支持发送ArrayBuffer，但在实际插件或特定使用场景下可能出现兼容性问题。

  3. 插件因素：hyoga-uni-socket.io插件在App端可能依赖uni-app的WebSocket API，而该API在二进制处理上可能存在平台限制。

解决方案：

  1. 数据转换：将二进制数据转换为Base64字符串发送，接收端再转换回二进制。

    // 发送前转换
const base64Data = arrayBufferToBase64(arrayBuffer);
socket.emit('message', base64Data);

// 接收后转换
function base64ToArrayBuffer(base64) {
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

  2. 使用ArrayBufferView：尝试使用Uint8Array等TypedArray替代ArrayBuffer：

    const uint8Array = new Uint8Array(arrayBuffer);
socket.emit('message', uint8Array);
回到顶部