鸿蒙NEXT版仿微信聊天App的接收图片

aqi00

发布于 2024-11-25 11:29:53

8200

代码可运行

运行总次数：0

代码可运行

上一节我们通过自定义图片分段结构实现了向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成功实现了设备间的图片消息收发功能。