发送图片/语音/视频/文件消息 - IM即时通讯
前置条件
配置第三方存储服务
GoEasy IM发送图片,语音,视频,文件消息需要与第三方文件存储服务配合。
第三方云存储服务配置教程:
- 阿里云OSS对象存储集成指南
- 腾讯云COS对象存储集成指南
- 更多存储厂商,正在持续推进,敬请期待
为什么需要配置第三方存储服务?
因为语音,图片,视频和文件等消息通常体积较大,与IM服务对即时性和发送速度的追求有天生的对立矛盾。
业内的惯例,不论微信,QQ还是其他的IM应用对于图片和视频等文件类消息,通常实现思路均为:
- 先上传到文件存储服务器,得到文件路径。
- 将文件路径发送至接收方,接收方收到文件路径。
当您在QQ或微信中收到视频,有时候需要等一会儿,才能开始播放,就是因为第一时间只收到了路径,需要从文件存储服务上加载。
创建消息
var im = goeasy.im;
//文字消息
var message = im.createTextMessage({
text: 'xxxx',
to: {
type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP
id: 'user002',
data: {"avatar": "/www/xxx.png", "nickname": "Neo"} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data
}
});
//图片消息
var message = im.createImageMessage({
file: imagefile, //H5获得的图片file对象,Uniapp和小程序调用chooseImage,success时得到的res.tempFiles数组中的元素,比如res.tempFiles[0]即为选择的第一张图片
to: {
type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP
id: 'user002',
data: {"avatar": "/www/xxx.png", "nickname": "Neo"} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data
},
onProgress: function (event) {
console.log('file uploading:', event)
} //获取上传进度
});
//语音消息
var message = im.createAudioMessage({
file: audioFile,//H5的音频file对象,Uniapp和小程序中录音组件RecorderManager.onStop得到的res对象
to: {
type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP
id: 'user002',
data: {"avatar": "/www/xxx.png", "nickname": "Neo"} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data
},
onProgress: function (event) {
console.log('file uploading:', event)
}//获取上传进度
});
//视频消息
var message = im.createVideoMessage({
file: videoFile, //H5获得的视频file对象, Uniapp和小程序调用chooseVideo,success时得到的res对象
to: {
type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP
id: 'user002',
data: {"avatar": "/www/xxx.png", "nickname": "Neo"} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data
},
onProgress: function (event) {
console.log('file uploading:', event)
}//获取上传进度
});
//文件消息
var message = im.createFileMessage({
file: document.getElementById('testFile').files[0], //Html获得file对象
to: {
type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊,群聊为GoEasy.IM_SCENE.GROUP
id: 'user002',
data: {"avatar": "/www/xxx.png", "nickname": "Neo"} //好友扩展数据, 任意格式的字符串或者对象,用于更新会话列表conversation.data
},
onProgress: function (event) {
console.log('file uploading:', event)
}//获取上传进度
});
发送消息
发送语音、视频、图片、文件消息的发送之前,必须完成存储服务的配置,详见集成教程
//发送单聊消息
im.sendMessage({
message: message,
onSuccess: function () { //发送成功
console.log('Message sent successfully.', message);
},
onFailed: function (error) { //发送失败
console.log('Failed to send message,code:' + error.code + ',error' + error.content);
}
});
接收消息
var onPrivateMessageReceived = function (message) {
//文字消息
// {
// "messageId": "8f0e27a0c7e111eab347b726da4416bd",
// "timestamp": 1594958217087,
// "type": "text",
// "senderId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
// "payload": {
// "text": "Hello, GoEasyIM"
// },
// "receiverId": "fdee46b0-4b01-4590-bdba-6586d7617f95"
// }
//语音消息
//{
// "messageId": "312c8900c7e211ea9744b7abe1fd7831",
// "type": "audio",
// "timestamp": 1594958490234,
// "senderId": "fdee46b0-4b01-4590-bdba-6586d7617f95",
// "payload": {
// "name": "20200717120129175.m4a",
// "contentType": "audio/m4a",
// "url": "https://goeasy-hangzhou.oss-cn-hangzhou.aliyuncs.com/goeasy-im/20200717120129175.m4a",
// "duration": 2.46
// "size": 15220,
// },
// "receiverId": "3bb179af-bcc5-4fe0-9dac-c05688484649"
// };
//图片消息
// {
// "messageId": "9498cf40c7d711eab228bf40d56471fe",
// "type": "image",
// "timestamp": 1594953936702,
// "senderId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
// "payload": {
// "name": "04531220.jpg",
// "contentType": "image/jpeg",
// "url": "https://goeasy-hangzhou.oss-cn-hangzhou.aliyuncs.com/goeasy-im/04531220.jpg",
// "width": 1758,
// "height": 765
// "size": 62988,
// },
// "receiverId": "fdee46b0-4b01-4590-bdba-6586d7617f95"
// }
//视频消息
// {
// "messageId": "373e36c0c7df11eab228bf40d56471fe",
// "type": "video",
// "timestamp": 1594957262738,
// "senderId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
// "payload": {
// "video": {
// "name": "1593738719905558_20200717114010716.mp4",
// "contentType": "video/mp4",
// "url": "https://goeasy-im.oss-cn-hangzhou.aliyuncs.com/goeasy-im/1593738719905558_20200717114010716.mp4",
// "duration": 46.766667,
// "width": 544,
// "height": 960
// "size": 7404683,
// },
// "thumbnail": {
// "url": "https://goeasy-im.oss-cn-hangzhou.aliyuncs.com/goeasy-im/1593738719905558_20200717114010716.mp4?x-oss-process=video/snapshot,t_0000,f_jpg,w_544,m_fast",
// "width": 544,
// "height": 960,
// "contentType": "image/jpg"
// }
// },
// "receiverId": "fdee46b0-4b01-4590-bdba-6586d7617f95"
// }
//文件消息
// {
// "messageId": "9498cf40c7d711eab228bf40d56471fe",
// "type": "file",
// "timestamp": 1594953936702,
// "senderId": "3bb179af-bcc5-4fe0-9dac-c05688484649",
// "payload": {
// "name": "GoEasy_59316_202009301328.pdf",
// "contentType": "application/pdf",
// "url": "https://goeasy-hangzhou.oss-cn-hangzhou.aliyuncs.com/goeasy-im/GoEasy_59316_202009301328.pdf",
// "size": 520261,
// },
// "receiverId": "fdee46b0-4b01-4590-bdba-6586d7617f95"
// }
console.log('收到消息:senderId:' + message.senderId + ', content:' + message.payload);
};
//监听和接收单聊消息
im.on(GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED, onPrivateMessageReceived);