鸿蒙NEXT版仿微信聊天App的发送图片
鸿蒙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服务器接收图片消息。
腾讯云开发者
