差别
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
im:web:basics:message [2020/06/28 11:12] zhangdong [消息回执] |
im:web:basics:message [2022/03/11 10:32] jennifer.zeng [消息] |
||
---|---|---|---|
行 1: | 行 1: | ||
====== 消息 ====== | ====== 消息 ====== | ||
- | 消息是客户端集成中最重要的功能之一,WebIM 消息的使用方法主要为 : | + | |
+ | 更新时间:2021-12-31 | ||
+ | |||
+ | 新版文档见:[[ccim:web:message1|消息管理]]。 | ||
+ | |||
+ | |||
+ | 消息是客户端集成中最重要的功能之一,WebIM 消息的使用方法主要为 : | ||
* 构造消息 | * 构造消息 | ||
| | ||
行 11: | 行 17: | ||
* 处理消息 | * 处理消息 | ||
- | * 拉取历史消息 | + | * 消息漫游 |
* 新消息提醒 | * 新消息提醒 | ||
行 20: | 行 26: | ||
===== 构造消息 ===== | ===== 构造消息 ===== | ||
<code javascript> | <code javascript> | ||
- | var msg = new WebIM.message('txt', id); | + | let msg = new WebIM.message('txt', id); |
- | msg.set(option); //消息内容option,下面会有详细介绍 | + | msg.set(option); //消息内容option,下面会有详细介绍 |
- | msg.setGroup('groupchat'); //用于设置当前聊天模式为多人聊天,如聊天室/群组。单聊不调用此方法 | + | msg.setChatType('groupChat'); //用于设置当前聊天模式为单聊、群聊(groupChat)、聊天室(chatRoom),不设置默认为单聊 |
</code> | </code> | ||
行 50: | 行 56: | ||
<code javascript> | <code javascript> | ||
// 单聊发送文本消息 | // 单聊发送文本消息 | ||
- | var sendPrivateText = function () { | + | function sendPrivateText() { |
- | var id = conn.getUniqueId(); // 生成本地消息id | + | let id = conn.getUniqueId(); // 生成本地消息id |
- | var msg = new WebIM.message('txt', id); // 创建文本消息 | + | let msg = new WebIM.message('txt', id); // 创建文本消息 |
msg.set({ | msg.set({ | ||
msg: 'message content', // 消息内容 | msg: 'message content', // 消息内容 | ||
to: 'username', // 接收消息对象(用户id) | to: 'username', // 接收消息对象(用户id) | ||
- | roomType: false, | + | chatType: 'singleChat', // 设置为单聊 |
ext: { | ext: { | ||
key: value, | key: value, | ||
行 65: | 行 71: | ||
success: function (id, serverMsgId) { | success: function (id, serverMsgId) { | ||
console.log('send private text Success'); | console.log('send private text Success'); | ||
- | }, // 对成功的相关定义,sdk会将消息id登记到日志进行备份处理 | + | }, |
fail: function(e){ | fail: function(e){ | ||
+ | // 失败原因: | ||
+ | // e.type === '603' 被拉黑 | ||
+ | // e.type === '605' 群组不存在 | ||
+ | // e.type === '602' 不在群组或聊天室中 | ||
+ | // e.type === '504' 撤回消息时超出撤回时间 | ||
+ | // e.type === '505' 未开通消息撤回 | ||
+ | // e.type === '506' 没有在群组或聊天室白名单 | ||
+ | // e.type === '501' 消息包含敏感词 | ||
+ | // e.type === '502' 被设置的自定义拦截捕获 | ||
+ | // e.type === '503' 未知错误 | ||
console.log("Send private text error"); | console.log("Send private text error"); | ||
- | } // 对失败的相关定义,sdk会将消息id登记到日志进行备份处理 | + | } |
}); | }); | ||
conn.send(msg.body); | conn.send(msg.body); | ||
行 78: | 行 94: | ||
<code javascript> | <code javascript> | ||
// 群组发送文本消息 | // 群组发送文本消息 | ||
- | var sendGroupText = function () { | + | function sendGroupText() { |
- | var id = conn.getUniqueId(); // 生成本地消息id | + | let id = conn.getUniqueId(); // 生成本地消息id |
- | var msg = new WebIM.message('txt', id); // 创建文本消息 | + | let msg = new WebIM.message('txt', id); // 创建文本消息 |
- | var option = { | + | let option = { |
msg: 'message content', // 消息内容 | msg: 'message content', // 消息内容 | ||
to: 'group id', // 接收消息对象(群组id) | to: 'group id', // 接收消息对象(群组id) | ||
- | roomType: false, // 群聊类型,true时为聊天室,false时为群组 | + | chatType: 'groupChat', // 群聊类型设置为群聊 |
ext: {}, // 扩展消息 | ext: {}, // 扩展消息 | ||
success: function () { | success: function () { | ||
行 94: | 行 110: | ||
}; | }; | ||
msg.set(option); | msg.set(option); | ||
- | msg.setGroup('groupchat'); // 群聊类型 | ||
conn.send(msg.body); | conn.send(msg.body); | ||
}; | }; | ||
行 103: | 行 118: | ||
<code javascript> | <code javascript> | ||
// 聊天室发送文本消息 | // 聊天室发送文本消息 | ||
- | var sendRoomText = function () { | + | function sendRoomText() { |
- | var id = conn.getUniqueId(); // 生成本地消息id | + | let id = conn.getUniqueId(); // 生成本地消息id |
- | var msg = new WebIM.message('txt', id); // 创建文本消息 | + | let msg = new WebIM.message('txt', id); // 创建文本消息 |
- | var option = { | + | let option = { |
msg: 'message content', // 消息内容 | msg: 'message content', // 消息内容 | ||
to: 'chatroom id', // 接收消息对象(聊天室id) | to: 'chatroom id', // 接收消息对象(聊天室id) | ||
- | roomType: true, // 群聊类型,true时为聊天室,false时为群组 | + | chatType: 'chatRoom', // 群聊类型设置为聊天室 |
ext: {}, // 扩展消息 | ext: {}, // 扩展消息 | ||
success: function () { | success: function () { | ||
行 119: | 行 134: | ||
}; | }; | ||
msg.set(option); | msg.set(option); | ||
- | msg.setGroup('groupchat'); // 群聊类型 | ||
conn.send(msg.body); | conn.send(msg.body); | ||
}; | }; | ||
</code> | </code> | ||
- | **注意:**单聊和群聊的表现示例基本一样,区别在于 | + | **注意:**单聊和群聊的表现示例基本一样,区别在于接受消息的对象不同,单聊 to 的对象为**用户 ID **,群组/聊天室 to 的对象为**群组/聊天室 ID** |
- | * 接受消息的对象不同,单聊 to 的对象为**用户 ID **,群组/聊天室 to 的对象为**群组/聊天室 ID** | + | |
| | ||
- | * 聊天室/群组 比单聊代码中调一个方法 ''msg.setGroup('groupchat') '' | ||
- | | ||
- | * 通过''roomType''区分聊天室、群组,true为聊天室,false为群组 | ||
- | === API === | + | ----- |
- | 示例中使用到的 API | + | |
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | + | |
- | + | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | + | |
- | + | ||
- | ---- | + | |
==== 发送表情消息 ==== | ==== 发送表情消息 ==== | ||
- | * 发送表情同发送文本消息,需要在对方客户端将表情文本进行解析成图片。 | + | 发送表情同发送文本消息,需要在对方客户端将表情文本进行解析成图片。 |
- | + | ||
- | * 示例代码为单聊,贴图发送至群组和聊天室时需参考**发送文本消息**修改''roomType''和''msg.setGroup('groupchat')''。 | + | |
单聊发送表情消息的代码示例如下: | 单聊发送表情消息的代码示例如下: | ||
行 163: | 行 165: | ||
msg: 'message content', // 消息内容 | msg: 'message content', // 消息内容 | ||
to: 'username', // 接收消息对象(用户id) | to: 'username', // 接收消息对象(用户id) | ||
- | roomType: false, | + | chatType: 'singleChat', |
success: function (id, serverMsgId) { | success: function (id, serverMsgId) { | ||
console.log('send private text Success'); | console.log('send private text Success'); | ||
行 180: | 行 182: | ||
当 type='txt' 时,data 表示**文本消息**。 | 当 type='txt' 时,data 表示**文本消息**。 | ||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#listen|listen]] | ||
- | | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | ||
- | | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | ||
---- | ---- | ||
==== 发送贴图消息 ==== | ==== 发送贴图消息 ==== | ||
- | * Web IM SDK本身不支持截图,使用下述代码可以实现用户粘贴图片至输入框后发送。 | + | Web IM SDK本身不支持截图,使用下述代码可以实现用户粘贴图片至输入框后发送。 |
- | + | ||
- | * 示例代码为单聊,贴图发送至群组和聊天室时需参考**发送文本消息**修改''roomType''和''msg.setGroup('groupchat')''。 | + | |
单聊发送贴图消息的代码示例如下: | 单聊发送贴图消息的代码示例如下: | ||
行 207: | 行 200: | ||
var msg = new WebIM.message('img', id); // 创建图片消息 | var msg = new WebIM.message('img', id); // 创建图片消息 | ||
msg.set({ | msg.set({ | ||
- | apiUrl: WebIM.config.apiURL, | ||
file: {data: blob, url: url}, | file: {data: blob, url: url}, | ||
to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
- | roomType: false, | + | chatType: 'singleChat', |
onFileUploadError: function (error) { | onFileUploadError: function (error) { | ||
console.log('Error'); | console.log('Error'); | ||
行 219: | 行 211: | ||
success: function (id) { | success: function (id) { | ||
console.log('Success'); | console.log('Success'); | ||
+ | }, | ||
+ | fail: function(e){ | ||
+ | console.log("Fail"); //如禁言、拉黑后发送消息会失败 | ||
} | } | ||
}); | }); | ||
行 227: | 行 222: | ||
}); | }); | ||
</code> | </code> | ||
- | |||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | ||
- | | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | ||
---- | ---- | ||
==== 发送URL图片消息 ==== | ==== 发送URL图片消息 ==== | ||
- | * 示例代码为单聊,贴图发送至群组和聊天室时需参考**发送文本消息**修改''roomType''和''msg.setGroup('groupchat')''。 | + | App端需要开发者自己实现下载,Web端需要在 WebIMConfig.js中 设置 ''useOwnUploadFun: true''。 |
单聊通过URL发送图片消息的代码示例如下: | 单聊通过URL发送图片消息的代码示例如下: | ||
行 263: | 行 252: | ||
} | } | ||
</code> | </code> | ||
- | |||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | ||
- | | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | ||
---- | ---- | ||
行 278: | 行 261: | ||
msg.set({ | msg.set({ | ||
- | msg: 'msg', | ||
to: 'username', //接收消息对象 | to: 'username', //接收消息对象 | ||
action : 'action', //用户自定义,cmd消息必填 | action : 'action', //用户自定义,cmd消息必填 | ||
ext :{'extmsg':'extends messages'}, //用户自扩展的消息内容(群聊用法相同) | ext :{'extmsg':'extends messages'}, //用户自扩展的消息内容(群聊用法相同) | ||
- | success: function ( id,serverMsgId ) {}//消息发送成功回调 | + | success: function ( id,serverMsgId ) {}, //消息发送成功回调 |
- | }); | + | fail: function(e){ |
- | + | console.log("Fail"); //如禁言、拉黑后发送消息会失败 | |
- | if ( /*如果是发送到群组*/ ) { | + | } |
- | msg.setGroup('groupchat'); | + | }); |
- | } else if ( /*如果是发送到聊天室*/ ) { | + | |
- | msg.body.roomType = true; | + | |
- | msg.setGroup('groupchat'); | + | |
- | } | + | |
conn.send(msg.body); | conn.send(msg.body); | ||
</code> | </code> | ||
- | |||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | ||
- | | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | ||
---- | ---- | ||
行 314: | 行 286: | ||
**·** 发送附件消息,SDK 自动分两步完成: | **·** 发送附件消息,SDK 自动分两步完成: | ||
- 上传附件到服务器,并得到服务返回的附件信息等; | - 上传附件到服务器,并得到服务返回的附件信息等; | ||
- | - 发送附件消息,消息体包含附件的基本信息、服务器路径、secret 等。 | + | - 发送附件消息,消息体包含附件的基本信息、服务器路径、secret 等。 |
- | **·** 示例代码为单聊,贴图发送至群组和聊天室时需参考**发送文本消息**修改''roomType''和''msg.setGroup('groupchat')''。 | + | |
+ | 注意:web端和小程序发送附件消息是有区别的,小程序发送附件消息需要自己将附件上传到环信服务器,下面以发送图片消息展示小程序怎样发送附件消息 | ||
单聊发送图片消息示例如下: | 单聊发送图片消息示例如下: | ||
<code javascript> | <code javascript> | ||
- | // 单聊发送图片消息 | + | // web单聊发送图片消息 |
var sendPrivateImg = function () { | var sendPrivateImg = function () { | ||
var id = conn.getUniqueId(); // 生成本地消息id | var id = conn.getUniqueId(); // 生成本地消息id | ||
行 333: | 行 306: | ||
if (file.filetype.toLowerCase() in allowType) { | if (file.filetype.toLowerCase() in allowType) { | ||
var option = { | var option = { | ||
- | apiUrl: WebIM.config.apiURL, | ||
file: file, | file: file, | ||
+ | length: '3000', // 视频文件时,单位(ms) | ||
+ | ext: { | ||
+ | file_length: file.data.size // 文件大小 | ||
+ | }, | ||
to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
- | roomType: false, | + | chatType: 'singleChat', // 设置为单聊 |
onFileUploadError: function () { // 消息上传失败 | onFileUploadError: function () { // 消息上传失败 | ||
console.log('onFileUploadError'); | console.log('onFileUploadError'); | ||
+ | }, | ||
+ | onFileUploadProgress: function (e) { // 上传进度的回调 | ||
+ | console.log(e) | ||
}, | }, | ||
onFileUploadComplete: function () { // 消息上传成功 | onFileUploadComplete: function () { // 消息上传成功 | ||
行 345: | 行 324: | ||
success: function () { // 消息发送成功 | success: function () { // 消息发送成功 | ||
console.log('Success'); | console.log('Success'); | ||
+ | }, | ||
+ | fail: function(e){ | ||
+ | console.log("Fail"); //如禁言、拉黑后发送消息会失败 | ||
}, | }, | ||
flashUpload: WebIM.flashUpload | flashUpload: WebIM.flashUpload | ||
行 352: | 行 334: | ||
} | } | ||
}; | }; | ||
+ | |||
+ | // 小程序单聊发送图片消息 | ||
+ | sendImage(){ | ||
+ | const me = this; | ||
+ | wx.chooseImage({ | ||
+ | count: 1, | ||
+ | sizeType: ["original", "compressed"], | ||
+ | sourceType: ["album"], | ||
+ | success(res){ | ||
+ | me.upLoadImage(res); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | upLoadImage(res){ | ||
+ | const me = this; | ||
+ | let tempFilePaths = res.tempFilePaths; | ||
+ | let token = WebIM.conn.context.accessToken | ||
+ | wx.getImageInfo({ | ||
+ | src: res.tempFilePaths[0], | ||
+ | success(res){ | ||
+ | let allowType = {jpg: true, gif: true, png: true, bmp: true}; | ||
+ | let str = WebIM.config.appkey.split("#"); | ||
+ | let width = res.width; | ||
+ | let height = res.height; | ||
+ | let index = res.path.lastIndexOf("."); | ||
+ | let filetype = (~index && res.path.slice(index + 1)) || ""; | ||
+ | let domain = wx.WebIM.conn.apiUrl + '/' | ||
+ | if(filetype.toLowerCase() in allowType){ | ||
+ | wx.uploadFile({ | ||
+ | url: domain + str[0] + "/" + str[1] + "/chatfiles", | ||
+ | filePath: tempFilePaths[0], | ||
+ | name: "file", | ||
+ | header: { | ||
+ | "Content-Type": "multipart/form-data", | ||
+ | Authorization: "Bearer " + token | ||
+ | }, | ||
+ | success(res){ | ||
+ | if(res.statusCode === 400){ | ||
+ | // 图片上传阿里云检验不合法 | ||
+ | let errData = JSON.parse(res.data); | ||
+ | if (errData.error === 'content improper') { | ||
+ | wx.showToast({ | ||
+ | title: '图片不合法' | ||
+ | }); | ||
+ | return | ||
+ | } | ||
+ | } | ||
+ | let data = res.data; | ||
+ | let dataObj = JSON.parse(data); | ||
+ | let id = WebIM.conn.getUniqueId(); // 生成本地消息 id | ||
+ | let msg = new WebIM.message(msgType.IMAGE, id); | ||
+ | let file = { | ||
+ | type: msgType.IMAGE, | ||
+ | size: { | ||
+ | width: width, | ||
+ | height: height | ||
+ | }, | ||
+ | url: dataObj.uri + "/" + dataObj.entities[0].uuid, | ||
+ | filetype: filetype, | ||
+ | filename: tempFilePaths[0] | ||
+ | }; | ||
+ | msg.set({ | ||
+ | apiUrl: WebIM.config.apiURL, | ||
+ | body: file, | ||
+ | from: me.data.username.myName, | ||
+ | to: me.getSendToParam(), | ||
+ | chatType: me.data.chatType, | ||
+ | success: function (argument) {}, | ||
+ | fail: function(e){ | ||
+ | console.log("Fail"); //如禁言、拉黑后发送消息会失败 | ||
+ | } | ||
+ | }); | ||
+ | WebIM.conn.send(msg.body); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | } | ||
</code> | </code> | ||
行 369: | 行 430: | ||
'zip': true, | 'zip': true, | ||
'txt': true, | 'txt': true, | ||
- | 'doc':true, | + | 'doc': true, |
'pdf': true | 'pdf': true | ||
}; | }; | ||
if (file.filetype.toLowerCase() in allowType) { | if (file.filetype.toLowerCase() in allowType) { | ||
var option = { | var option = { | ||
- | apiUrl: WebIM.config.apiURL, | ||
file: file, | file: file, | ||
to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
- | roomType: false, | + | chatType: 'singleChat', // 设置单聊 |
onFileUploadError: function () { // 消息上传失败 | onFileUploadError: function () { // 消息上传失败 | ||
console.log('onFileUploadError'); | console.log('onFileUploadError'); | ||
+ | }, | ||
+ | onFileUploadProgress: function (e) { // 上传进度的回调 | ||
+ | console.log(e) | ||
}, | }, | ||
onFileUploadComplete: function () { // 消息上传成功 | onFileUploadComplete: function () { // 消息上传成功 | ||
行 386: | 行 449: | ||
success: function () { // 消息发送成功 | success: function () { // 消息发送成功 | ||
console.log('Success'); | console.log('Success'); | ||
+ | }, | ||
+ | fail: function(e){ | ||
+ | console.log("Fail"); //如禁言、拉黑后发送消息会失败 | ||
}, | }, | ||
flashUpload: WebIM.flashUpload, | flashUpload: WebIM.flashUpload, | ||
行 411: | 行 477: | ||
if (file.filetype.toLowerCase() in allowType) { | if (file.filetype.toLowerCase() in allowType) { | ||
var option = { | var option = { | ||
- | apiUrl: WebIM.config.apiURL, | ||
file: file, | file: file, | ||
+ | length: '3', // 音频文件时长,单位(s) | ||
to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
- | roomType: false, | + | chatType: 'singleChat', // 设置单聊 |
onFileUploadError: function () { // 消息上传失败 | onFileUploadError: function () { // 消息上传失败 | ||
console.log('onFileUploadError'); | console.log('onFileUploadError'); | ||
+ | }, | ||
+ | onFileUploadProgress: function (e) { // 上传进度的回调 | ||
+ | console.log(e) | ||
}, | }, | ||
onFileUploadComplete: function () { // 消息上传成功 | onFileUploadComplete: function () { // 消息上传成功 | ||
行 423: | 行 492: | ||
success: function () { // 消息发送成功 | success: function () { // 消息发送成功 | ||
console.log('Success'); | console.log('Success'); | ||
+ | }, | ||
+ | fail: function(e){ | ||
+ | console.log("Fail"); //如禁言、拉黑后发送消息会失败 | ||
}, | }, | ||
flashUpload: WebIM.flashUpload, | flashUpload: WebIM.flashUpload, | ||
行 450: | 行 522: | ||
if (file.filetype.toLowerCase() in allowType) { | if (file.filetype.toLowerCase() in allowType) { | ||
var option = { | var option = { | ||
- | apiUrl: WebIM.config.apiURL, | ||
file: file, | file: file, | ||
to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
- | roomType: false, | + | chatType: 'singleChat', // 设置为单聊 |
onFileUploadError: function () { // 消息上传失败 | onFileUploadError: function () { // 消息上传失败 | ||
console.log('onFileUploadError'); | console.log('onFileUploadError'); | ||
+ | }, | ||
+ | onFileUploadProgress: function (e) { // 上传进度的回调 | ||
+ | console.log(e) | ||
}, | }, | ||
onFileUploadComplete: function () { // 消息上传成功 | onFileUploadComplete: function () { // 消息上传成功 | ||
行 462: | 行 536: | ||
success: function () { // 消息发送成功 | success: function () { // 消息发送成功 | ||
console.log('Success'); | console.log('Success'); | ||
+ | }, | ||
+ | fail: function(e){ | ||
+ | console.log("Fail"); // 如禁言、拉黑后发送消息会失败 | ||
}, | }, | ||
flashUpload: WebIM.flashUpload, | flashUpload: WebIM.flashUpload, | ||
行 485: | 行 562: | ||
customExts, | customExts, | ||
ext:{}, // 消息扩展 | ext:{}, // 消息扩展 | ||
- | roomType: false, | + | chatType: 'singleChat', // 设置聊天类型 单聊 群聊 聊天室 |
success: function (id, serverMsgId) {}, | success: function (id, serverMsgId) {}, | ||
fail: function(e){} | fail: function(e){} | ||
行 492: | 行 569: | ||
}; | }; | ||
</code> | </code> | ||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | ||
- | | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | ||
---- | ---- | ||
行 504: | 行 576: | ||
/** | /** | ||
* 发送撤回消息 | * 发送撤回消息 | ||
- | * @param {Object} option - | + | * @param {Object} option - |
* @param {Object} option.mid - 回撤消息id | * @param {Object} option.mid - 回撤消息id | ||
* @param {Object} option.to - 消息的接收方 | * @param {Object} option.to - 消息的接收方 | ||
* @param {Object} option.type - chat(单聊) groupchat(群组) chatroom(聊天室) | * @param {Object} option.type - chat(单聊) groupchat(群组) chatroom(聊天室) | ||
+ | * @param {Object} option.success - 撤回成功的回调 | ||
+ | * @param {Object} option.fail- 撤回失败的回调(超过两分钟) | ||
*/ | */ | ||
WebIM.conn.recallMessage(option) | WebIM.conn.recallMessage(option) | ||
行 518: | 行 592: | ||
<code javascript> | <code javascript> | ||
conn.listen({ | conn.listen({ | ||
- | onOpened: function ( message ) { //连接成功回调 | + | onOpened: function () {}, //连接成功回调 |
- | }, | + | onClosed: function () {}, //连接关闭回调 |
- | onClosed: function ( message ) {}, //连接关闭回调 | + | |
onTextMessage: function ( message ) {}, //收到文本消息 | onTextMessage: function ( message ) {}, //收到文本消息 | ||
onEmojiMessage: function ( message ) {}, //收到表情消息 | onEmojiMessage: function ( message ) {}, //收到表情消息 | ||
行 561: | 行 634: | ||
onReadMessage: function(message){}, //收到消息已读回执 | onReadMessage: function(message){}, //收到消息已读回执 | ||
onCreateGroup: function(message){}, //创建群组成功回执(需调用createGroupNew) | onCreateGroup: function(message){}, //创建群组成功回执(需调用createGroupNew) | ||
- | onMutedMessage: function(message){} //如果用户在A群组被禁言,在A群发消息会走这个回调并且消息不会传递给群其它成员 | + | onMutedMessage: function(message){}, //如果用户在A群组被禁言,在A群发消息会走这个回调并且消息不会传递给群其它成员 |
+ | onChannelMessage: function(message){} //收到整个会话已读的回执,在对方发送channel ack时会在这个回调里收到消息 | ||
}); | }); | ||
</code> | </code> | ||
- | |||
- | |||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#listen|listen]] | ||
---- | ---- | ||
行 617: | 行 686: | ||
conn.listen({ | conn.listen({ | ||
onAudioMessage: function ( message ) { | onAudioMessage: function ( message ) { | ||
- | var options = { url: message.url }; | + | // 在这里接收音频消息 |
- | + | ||
- | options.onFileDownloadComplete = function ( response ) { | + | |
- | //音频下载成功,需要将response转换成blob,使用objectURL作为audio标签的src即可播放。 | + | |
- | var objectURL = WebIM.utils.parseDownloadResponse.call(Demo.conn, response); | + | |
- | }; | + | |
- | + | ||
- | options.onFileDownloadError = function () { | + | |
- | //音频下载失败 | + | |
- | }; | + | |
- | + | ||
- | //通知服务器将音频转为mp3 | + | |
- | options.headers = { | + | |
- | 'Accept': 'audio/mp3' | + | |
- | }; | + | |
- | + | ||
- | WebIM.utils.download.call(conn, options); | + | |
} | } | ||
}) | }) | ||
+ | // 小程序播放 | ||
+ | playAudio(message){ | ||
+ | let audioCtx = wx.createInnerAudioContext(); | ||
+ | let curl = '' | ||
+ | wx.downloadFile({ | ||
+ | url: message.url, | ||
+ | header: { | ||
+ | "X-Requested-With": "XMLHttpRequest", | ||
+ | Accept: "audio/mp3", | ||
+ | Authorization: "Bearer " + this.data.msg.msg.token | ||
+ | }, | ||
+ | success(res){ | ||
+ | curl = res.tempFilePath; | ||
+ | audioCtx.src = curl; | ||
+ | audioCtx.play(); | ||
+ | }, | ||
+ | fail(e){ | ||
+ | wx.showToast({ | ||
+ | title: "下载失败", | ||
+ | duration: 1000 | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // web | ||
+ | addAudioMessage: (message, bodyType) => { | ||
+ | return (dispatch, getState) => { | ||
+ | let options = { | ||
+ | url: message.url, | ||
+ | headers: { | ||
+ | Accept: 'audio/mp3' | ||
+ | }, | ||
+ | onFileDownloadComplete: function (response) { | ||
+ | let objectUrl = WebIM.utils.parseDownloadResponse.call(WebIM.conn, response) | ||
+ | message.audioSrcUrl = message.url | ||
+ | message.url = objectUrl | ||
+ | }, | ||
+ | onFileDownloadError: function () {} | ||
+ | } | ||
+ | WebIM.utils.download.call(WebIM.conn, options) | ||
+ | } | ||
+ | } | ||
</code> | </code> | ||
**注意:** | **注意:** | ||
- | * conn.listen() 中注册不同消息接收 handler 之后,可自行解析消息体,定位聊天好友,并追加到与其聊天窗口。具体参考 http://webim.easemob.com 效果。 | ||
- | |||
* 对于图片、语音消息需要先进行下载,然后进行显示或者播放处理。 | * 对于图片、语音消息需要先进行下载,然后进行显示或者播放处理。 | ||
行 648: | 行 741: | ||
---- | ---- | ||
- | ===== 拉取历史消息 ===== | + | ===== 消息漫游 ===== |
漫游消息,''SDK增值功能''。 | 漫游消息,''SDK增值功能''。 | ||
<code javascript> | <code javascript> | ||
/** | /** | ||
- | * 获取对话历史消息 | + | * 获取对话历史消息 支持Promise返回 |
* @param {Object} options | * @param {Object} options | ||
* @param {String} options.queue - 对方用户id(如果用户id内含有大写字母请改成小写字母)/群组id/聊天室id | * @param {String} options.queue - 对方用户id(如果用户id内含有大写字母请改成小写字母)/群组id/聊天室id | ||
* @param {String} options.count - 每次拉取条数 | * @param {String} options.count - 每次拉取条数 | ||
* @param {Boolean} options.isGroup - 是否是群聊,默认为false | * @param {Boolean} options.isGroup - 是否是群聊,默认为false | ||
+ | * @param {String} options.start - (非必需)起始位置的消息id,默认从最新的一条开始 | ||
* @param {Function} options.success | * @param {Function} options.success | ||
* @param {Funciton} options.fail | * @param {Funciton} options.fail | ||
*/ | */ | ||
var options = { | var options = { | ||
- | queue: "test1", | + | queue: "test1", //需特别注意queue属性值为大小写字母混合,以及纯大写字母,会导致拉取漫游为空数组,因此注意将属性值装换为纯小写 |
isGroup: false, | isGroup: false, | ||
count: 10, | count: 10, | ||
- | success: function(){}, | + | success: function(res){ |
+ | console.log(res) //获取拉取成功的历史消息 | ||
+ | }, | ||
fail: function(){} | fail: function(){} | ||
} | } | ||
WebIM.conn.fetchHistoryMessages(options) | WebIM.conn.fetchHistoryMessages(options) | ||
</code> | </code> | ||
+ | PS:如需重置拉取历史消息接口的游标可以通过:“WebIM.conn.mr_cache = []” 方法重置。 | ||
---- | ---- | ||
行 676: | 行 772: | ||
SDK 在收到新消息时会直接转发给登录用户,接收到消息后,Demo 中会在好友或者群组的后面显示红色消息数,具体样式开发者可自行处理。 | SDK 在收到新消息时会直接转发给登录用户,接收到消息后,Demo 中会在好友或者群组的后面显示红色消息数,具体样式开发者可自行处理。 | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== 会话列表 ===== | ||
+ | ''需联系商务同事单独开通'' | ||
+ | ==== 获取会话列表 ==== | ||
+ | 当和一个用户或者在一个群中发消息后,就会自动把对方加到会话列表中,可以通过调用getSessionList去查询会话列表。建议一个页面只需要在初始时调用一次。使用该功能需要联系您的商务经理进行开通。(您可以在环信通讯云管理后台首页,扫描二维码联系您的商务经理) | ||
+ | 特别注意:登陆ID不要为大小写混用的ID,拉取会话列表大小写ID混用会出现拉取会话列表为空。 | ||
+ | <code javascript> | ||
+ | WebIM.conn.getSessionList().then((res) => { | ||
+ | console.log(res) | ||
+ | /** | ||
+ | 返回参数说明 | ||
+ | channel_infos - 所有会话 | ||
+ | channel_id - 会话id, username@easemob.com表示单聊,groupid@conference.easemob.com表示群聊 | ||
+ | meta - 最后一条消息 | ||
+ | unread_num - 当前会话的未读消息数 | ||
+ | | ||
+ | data{ | ||
+ | channel_infos:[ | ||
+ | { | ||
+ | channel_id: 'easemob-demo#chatdemoui_username@easemob.com', | ||
+ | meta: {}, | ||
+ | unread_num: 0 | ||
+ | }, | ||
+ | { | ||
+ | channel_id: 'easemob-demo#chatdemoui_93734273351681@conference.easemob.com', | ||
+ | meta: { | ||
+ | from: "easemob-demo#chatdemoui_zdtest@easemob.com/webim_1610159114836", | ||
+ | id: "827197124377577640", | ||
+ | payload: "{"bodies":[{"msg":"1","type":"txt"}],"ext":{},"from":"zdtest","to":"93734273351681"}", | ||
+ | timestamp: 1610161638919, | ||
+ | to: "easemob-demo#chatdemoui_93734273351681@conference.easemob.com" | ||
+ | }, | ||
+ | unread_num: 0 | ||
+ | } | ||
+ | ] | ||
+ | } | ||
+ | */ | ||
+ | | ||
+ | }) | ||
+ | </code> | ||
+ | |||
+ | 当需要清空会话的未读消息数时,可以查看消息回执中channel ack | ||
+ | |||
+ | |||
+ | ==== 删除会话 ==== | ||
+ | 可以通过调用 deleteSession 去删除一个会话。 | ||
+ | <code javascript> | ||
+ | WebIM.conn.deleteSession({ | ||
+ | channel: 'userID', // 会话 ID(对方的 userID 或群组 ID)。 | ||
+ | chatType: 'singleChat', // 会话类型 singleChat(单聊) groupChat(群聊)。 | ||
+ | deleteRoam: true, // 是否同时删除服务端漫游消息。 | ||
+ | }) | ||
+ | </code> | ||
---- | ---- | ||
行 682: | 行 833: | ||
* 已送达回执:在 webim.config.js 中配置 delivery 为 true ,在收到消息时会自动发送已送达回执,对方收到已送达回执的回调函数是 onDeliveredMessage | * 已送达回执:在 webim.config.js 中配置 delivery 为 true ,在收到消息时会自动发送已送达回执,对方收到已送达回执的回调函数是 onDeliveredMessage | ||
| | ||
- | * 已读回执:当认为用户已读某条(些)消息时,可以生成已读回执,再进行发送 | + | * 已读回执: |
- | + | - 当认为用户已读某条(些)消息时,可以生成已读回执,发送给对方,对方会在 onReadMessage 回调里收到已读回执 | |
- | 对方收到已送达回执的回调函数是 onReadMessage | + | - 也可以针对整个会话回复channel ack消息,表示整个会话的消息都已读。此回执消息是为了清空通过getSessionList获取会话列表中未读数的,比如调用getSessionList获取到会话列表,其中一个会话的未读消息数是5,那么可以在点击这个会话的时候回复一个channel消息,这个会话的未读数就会清零。 |
+ | |||
+ | **单聊发送已读回执** | ||
<code javascript> | <code javascript> | ||
var bodyId = message.id; // 需要发送已读回执的消息id | var bodyId = message.id; // 需要发送已读回执的消息id | ||
行 692: | 行 845: | ||
,to: message.from | ,to: message.from | ||
}); | }); | ||
- | Demo.conn.send(msg.body); | + | conn.send(msg.body); |
</code> | </code> | ||
- | 群聊''SDK增值功能'': | + | **群聊已读回执**''SDK增值功能'': |
- | * 发送群可以收已读回执的消息 | + | * 发送群可以收已读回执的消息 (需要群主或管理员权限) |
<code javascript> | <code javascript> | ||
sendGroupReadMsg = () => { | sendGroupReadMsg = () => { | ||
行 705: | 行 858: | ||
msg.set({ | msg.set({ | ||
msg: 'message content', // 消息内容 | msg: 'message content', // 消息内容 | ||
- | to: 'username', // 接收消息对象(用户id) | + | to: 'groupId' |
- | roomType: true, | + | chatType: 'groupChat', // 设置为群聊 |
success: function (id, serverMsgId) { | success: function (id, serverMsgId) { | ||
console.log('send private text Success'); | console.log('send private text Success'); | ||
行 714: | 行 867: | ||
} | } | ||
}); | }); | ||
- | msg.setGroup("groupchat"); | + | msg.body.msgConfig = { allowGroupAck: true } // 设置此消息需要已读回执 |
- | msgObj.body.msgConfig = { allowGroupAck: true } | + | |
conn.send(msg.body); | conn.send(msg.body); | ||
} | } | ||
行 724: | 行 876: | ||
sendReadMsg = () => { | sendReadMsg = () => { | ||
let msg = new WebIM.message("read", WebIM.conn.getUniqueId()); | let msg = new WebIM.message("read", WebIM.conn.getUniqueId()); | ||
- | msg.body.group = "groupchat"; | + | msg.set({ |
- | msg.body.msgConfig = { allowGroupAck: true }; | + | id: message.id, // 需要发送已读回执的消息id |
- | msg.body.ackContent = JSON.stringify({}); | + | to: message.from, // 消息的发送方 |
+ | msgConfig: { allowGroupAck: true }, | ||
+ | ackContent: JSON.stringify({}) // 回执内容 | ||
+ | }) | ||
+ | msg.setChatType('groupChat') | ||
WebIM.conn.send(msg.body); | WebIM.conn.send(msg.body); | ||
} | } | ||
行 753: | 行 909: | ||
* 查看读过消息的用户 | * 查看读过消息的用户 | ||
<code jacascript> | <code jacascript> | ||
- | WebIM.conn.getGroupMsgReadUser({ | + | WebIM.conn.getGroupMsgReadUser({ |
- | msgId, // 消息id | + | msgId, // 消息id |
- | groupId, // 群组id | + | groupId // 群组id |
- | success(data){ | + | }).then((res)=>{ |
- | resolve(data); | + | console.log(res) |
- | }, | + | }) |
- | error(err){ | + | |
- | reject(err); | + | |
- | }, | + | |
- | }); | + | |
</code> | </code> | ||
- | === API === | ||
- | 示例中使用到的 API | ||
- | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | ||
+ | **发送整个会话已读回执** | ||
+ | <code javascript> | ||
+ | var msg = new WebIM.message('channel',conn.getUniqueId()); | ||
+ | msg.set({ | ||
+ | to: 'username' | ||
+ | }); | ||
+ | |||
+ | // 如果是群聊 | ||
+ | msg.set({ | ||
+ | to: 'groupid', | ||
+ | chatType: 'groupChat' | ||
+ | }); | ||
+ | |||
+ | conn.send(msg.body); | ||
+ | </code> | ||
---- | ---- | ||