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

上一节我们综合使用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服务器接收图片消息。