鸿蒙NEXT开发笔记（十四）仿微信聊天App的发送图片

上一节我们综合使用util、image等工具库，把BASE64字符串成功解码为PixelMap像素图。接下来以BASE64串作为图片数据的载体，向后端的SocketIO服务器发送一段一段的图片消息，具体的发送过程分为下列三个步骤。

一、定义图片消息结构

因为图片可能会分段编码为BASE64串传输，所以每次传输的数据包都要携带序号、长度、内容等信息，这样既方便发送端有序地切分图片数据，也方便接收端按顺序重新组装完整的图片。那么定义一个图片分段结构，包括分段序号、分段名称、分段内容、分段长度等字段，详细的定义代码如下：

export interface ImagePart {
  seq: number; // 分段序号
  name: string; // 分段名称
  data: string; // 分段数据
  length: number; // 分段长度
}

二、把图片文件分为多个消息分段

为了按照固定大小切分图片数据，发送端得设置每段的数据包大小数值，不仅要求发送端按照该数值切割图片，接收端也要根据该数值拼接图片。固定的数据包大小声明代码如下：

private blockSize = 50*1024; // 每段的数据包大小

接下来先让图片数据总长度除以上面的数据包固定大小，得到切割的分段数量；再对图片数据按照固定长度依次切割，并将各段数据编码成BASE64字符串。详细的图片分段代码如下：

let count = Math.floor(buf.length/this.blockSize) + 1;
// 下面把图片数据经过BASE64编码后发给SocketIO服务器
for (let i=0; i<count; i++) {
  console.info('sendImage i='+i);
  let encodeData = '';
  if (i == count-1) { // 是最后一段图像数据
    let remain = buf.length % this.blockSize;
    let temp = buffer.alloc(remain);
    buf.copy(temp, 0, i*this.blockSize, i*this.blockSize+remain)
    encodeData = temp.toString('base64');
  } else { // 不是最后一段图像数据
    let temp = buffer.alloc(this.blockSize);
    buf.copy(temp, 0, i*this.blockSize, (i+1)*this.blockSize)
    encodeData = temp.toString('base64');
  }
  // 这里暂时省略向SocketIO服务器发送图片的操作
}

三、把各分段的图片消息依次发给SocketIO服务器

把每个图片分段编码为BASE64串之后，即可将包括序号、长度、内容等等在内的ImagePart分段消息封装为JSON字符串，并提交给三方的SocketIO库发给后端的SocketIO服务器。具体的SocketIO消息发送代码如下：

// 往SocketIO服务器发送本段的图片数据
let part: ImagePart = {seq:i, name:fileName, data:encodeData, length:buf.length}
let data = JSON.stringify(part)
this.client?.emit('send_image', data); // 发送图像数据

那么SocketIO服务器监听图片发送接口send_image，在收到图片消息后，把该消息通过receive_image接口转发给原设备。完整的服务端监听代码参见《Android Studio开发实战：从零基础到App上线(第3版)》一书的“13.5  实战项目：仿微信的私聊和群聊”。
综合上述几个步骤的图片分段、编码与发送过程，才算实现了仿微信聊天App的图片消息发送功能。

下一篇文章会介绍如何从SocketIO服务器接收图片消息。