1. 文件上传
1.1. 整合minio
图片、视频、语音、文档本质上都是文件,要实现文件消息的推送,首先我们需要一个文件存储服务器。盒子使用Minio作为文件存储服务。
整合Minio并不复杂,基本上遵循三步走战略即可:导包、配置、调接口,网上也有相当多案例和资料,这里不再重复讲述。
盒子内部对Minio的api作了简单的进一步封装:
类 |
方法 |
说明 |
MinioUtil |
bucketExists |
查看存储bucket是否存在 |
MinioUtil |
makeBucket |
创建存储bucket |
MinioUtil |
setBucketPublic |
设置bucket权限为public |
MinioUtil |
upload |
文件上传 |
MinioUtil |
remove |
文件删除 |
1.2. 文件上传
文件上传编写了两个接口:
类 |
方法 |
说明 |
FileService |
uploadFile |
上传普通文件 |
FileService |
uploadImage |
上传图片同时返回原图和缩略图 |
注:除了在全屏展示大图时使用原图,前端其他所有地方都是展示缩略图
1.3. 极速秒传
小伙伴们是否体验过百度云的极速秒传功能,几G大的文件瞬间就上传完成了,神奇的不得了。
其实实现起来也非常简单,只需要在上传前对文件的内容生成md5值,后端拿到这个md5去数据库(上传文件后需要入库)查询是否已经存在相同的文件,如果已存在,则直接返回文件原来的url,然后客户端给文件打上”极速秒传”标签。
不过这个功能还是很有实际意义的,能够有效减少重复文件带来的带宽和服务器磁盘压力。
盒子目前未实现这块功能,建议小伙伴们可以自行实现
2. 文件、图片、语音消息
我们之前已经实现了发送文字消息接口,现在文件上传接口也有了,实现文件消息就简单了。
我们可以仿照文字消息接口,为文件、图片、语音消息分别编写单独的消息接口。
但盒子采用了更简便的方式:
直接复用原先编写好的的文字消息接口,将文件、图片、语音的url以及其他信息以json的格式存储到content字段中。
文件消息流程如下:
由于不同类型的文件展示要求不同,content中包含的内容也不一样:
类型 |
content字段 |
说明 |
文件 |
name |
文件名 |
size |
文件大小(字节) |
|
url |
文件url |
|
图片 |
originUrl |
原图(大图展示时显示) |
thumbUrl |
缩略图(默认展示) |
|
语音 |
duration |
语音时长(秒) |
url |
语音文件url |
3. 语音采集
前端的语音采集使用了开源插件js-audio-recorder,感兴趣的小伙伴们可以自行去了解。
前端相关代码:
文件 |
方法 |
功能 |
ChatVoice.vue |
全部 |
录音采集 |
暂无评论内容