HarmonyOS鸿蒙Next中“仿微信聊天”App开发技术分享（十五）从SocketIO服务器接收图片

HarmonyOS鸿蒙Next中“仿微信聊天”App开发技术分享（十五）从SocketIO服务器接收图片

上一节我们通过自定义图片分段结构实现了向SocketIO服务器发送图片的功能，那么还需实现从SocketIO服务器接收图片的功能，才叫完成图片消息收发的闭环操作。接下来以BASE64串作为图片数据的载体，在接收完所有图片分段数据后，将其解码并重新拼接为原始的图片。具体的接收过程分为下列两个步骤。

一、从SocketIO服务器接收各分段的图片消息

上一节提到，SocketIO服务器会把收到的图片消息通过receive_image接口转发给原设备，那么接收端利用三方的SocketIO库监听receive_image接口，一旦监听到图片消息到达，就转入对应的图片接收处理逻辑。具体的SocketIO接口监听代码如下：

this.client.on('receive_image', (data: string) => {
  console.info('receive_image: '+data)
  this.receiveImage(data)
})

二、把各图片分段聚合为原始图片

由于单张图片可能分为多段消息传输，因此接收端得声明每次接收的图片文件名，以及该图片已经接收的消息包数量，以便确认同一文件名的消息包是否均已收到。详细的消息相关变量声明代码如下：

private lastFile = ''; // 上次的文件名
private receiveCount = 0; // 接收包的数量
private resultUint8: Uint8Array | null = null; // 整体结果的字节数组

接着对收到的图片分段消息进行解码，并根据规则把各分段重新聚合成原始图片。具体的解码过程说明如下：

  1. 把每次接收的JSON串解析为ImagePart结构，该结构的详细定义见上一篇文章《向SocketIO服务器发送图片》；
  2. 再把每个分段的BASE64串解码为字节数组，并填入整体结果数组的指定区域；
  3. 所有分段都接收完毕，从整体结果的字节数组中解码得到像素图；

详细的各图片分段聚合为原图的代码如下：

// 接收图片
receiveImage(data: string) {
  let part = JSON.parse(data) as ImagePart
  if (part.name != this.lastFile) { // 与上次文件名不同，表示开始接收新文件
    this.lastFile = part.name;
    this.receiveCount = 0;
    this.resultUint8 = new Uint8Array(part.length)
  }
  this.receiveCount++;
  // 把接收到的图片数据通过BASE64解码为字节数组
  let helper = new util.Base64Helper();
  let temp = helper.decodeSync(part.data, util.Type.MIME).buffer as ArrayBuffer;
  this.resultUint8?.set(new Uint8Array(temp), part.seq*this.blockSize)
  // 所有数据包都接收完毕
  if (this.receiveCount >= Math.floor(part.length/this.blockSize)+1) {
    // 这里暂时省略把缓存数据解码为像素图
  }
}

综合上述几个步骤的分段接收、聚合与解码过程，才算实现了仿微信聊天App的图片消息接收功能。结合上一篇文章介绍的图片消息发送功能，即可跑通完整的图片消息收发过程。

最后编译运行App，在鸿蒙真机上先选择一张相册图片，再点击发送按钮，命令向SocketIO服务器发送图片消息。之后收到SocketIO服务器原样返回的图片消息，收发前后的图片渲染效果如下图所示，可知利用SocketIO成功实现了设备间的图片消息收发功能。

图片

下一篇文章会介绍如何利用SocketIO库实现仿微信的群聊功能。


更多关于HarmonyOS鸿蒙Next中“仿微信聊天”App开发技术分享（十五）从SocketIO服务器接收图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中接收SocketIO服务器图片，需使用@ohos/net.socketio模块。首先建立SocketIO连接，监听图片消息事件。收到二进制数据后，使用ArrayBuffer处理原始字节。通过image组件显示图片时，需将字节数据转为PixelMap或Base64格式。关键代码示例：

socket.on('image', (data) => {
  let arrayBuffer = data.buffer;
  // 转换为PixelMap或Base64
  imageComponent.src = arrayBufferToBase64(arrayBuffer);
});

注意处理网络线程与UI线程的通信。二进制数据传输需确保SocketIO配置支持。

更多关于HarmonyOS鸿蒙Next中“仿微信聊天”App开发技术分享（十五）从SocketIO服务器接收图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现SocketIO图片接收功能的关键点如下：

  1. 数据接收处理方面：
  • 使用SocketIO的on()方法监听receive_image事件
  • 通过JSON.parse解析接收到的图片分段数据
  • 采用Base64Helper进行数据解码
  1. 分段重组逻辑：
  • 通过lastFile变量跟踪当前接收的文件名
  • 使用receiveCount记录已接收分段数
  • 利用Uint8Array存储重组后的完整图片数据
  1. 性能优化建议：
  • 分段接收时注意内存管理，及时释放临时变量
  • 大图片接收建议增加进度提示
  • 考虑加入数据校验机制确保完整性

代码实现上需要注意：

  1. 使用TypeScript强类型定义
  2. 处理好异步操作
  3. 添加必要的错误处理

这个方案完整实现了图片收发闭环，是开发IM类应用的典型实现方式。

回到顶部