差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 后一修订版 两侧同时换到之后的修订记录 | ||
|
im:web:basics:message [2019/12/04 08:14] lizg [消息] |
im:web:basics:message [2020/09/25 07:08] allenwang |
||
|---|---|---|---|
| 行 11: | 行 11: | ||
| * 处理消息 | * 处理消息 | ||
| - | * 拉取历史消息 | + | * 消息漫游 |
| * 新消息提醒 | * 新消息提醒 | ||
| 行 20: | 行 20: | ||
| ===== 构造消息 ===== | ===== 构造消息 ===== | ||
| <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> | ||
| - | **注意：** 发送ext 扩展消息，可以没有这个字段，但是如果有，值不能是“ext:null”这种形式，否则出错 | + | **注意：** 发送ext 扩展消息，可以没有这个字段，但是如果有，值不能是"ext:null"这种形式，否则出错 |
| ===== 发送消息 ===== | ===== 发送消息 ===== | ||
| 行 40: | 行 40: | ||
| | | ||
| * 附件消息 | * 附件消息 | ||
| + | |||
| + | * 自定义消息 | ||
| 多样化的消息类型，覆盖多种场景下的消息需求。 | 多样化的消息类型，覆盖多种场景下的消息需求。 | ||
| - | ==== 发送文本消息（单聊） ==== | + | ==== 发送文本消息（单聊、扩展） ==== |
| 单聊发送文本消息示例如下： | 单聊发送文本消息示例如下： | ||
| 行 48: | 行 50: | ||
| <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, | ||
| + | key2: { | ||
| + | key3: value2 | ||
| + | } | ||
| + | }, //扩展消息 | ||
| success: function (id, serverMsgId) { | success: function (id, serverMsgId) { | ||
| console.log('send private text Success'); | console.log('send private text Success'); | ||
| 行 71: | 行 78: | ||
| <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 () { | ||
| 行 87: | 行 94: | ||
| }; | }; | ||
| msg.set(option); | msg.set(option); | ||
| - | msg.setGroup('groupchat'); // 群聊类型 | ||
| conn.send(msg.body); | conn.send(msg.body); | ||
| }; | }; | ||
| 行 96: | 行 102: | ||
| <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 () { | ||
| 行 112: | 行 118: | ||
| }; | }; | ||
| 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')''。 | + | |
| 单聊发送表情消息的代码示例如下： | 单聊发送表情消息的代码示例如下： | ||
| 行 156: | 行 149: | ||
| 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'); | ||
| 行 167: | 行 160: | ||
| }; | }; | ||
| </code> | </code> | ||
| - | **注意：**%%当为 WebIM 添加了 Emoji 属性后，若发送的消息含 WebIM.Emoji 里特定的字符串，connection 就会自动将这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为 {type:'emoji(或者txt)',data:''}%% | + | **注意：**%%当为 WebIM 添加了 Emoji 属性后，若发送的消息含 WebIM.Emoji 里特定的字符串，connection 就会自动将这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为 {type:'emoji(或者txt)',data:'msg(或者src)'}%% |
| 当 type='emoji' 时，data 表示**表情图像的路径**； | 当 type='emoji' 时，data 表示**表情图像的路径**； | ||
| 行 173: | 行 166: | ||
| 当 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')''。 | + | |
| 单聊发送贴图消息的代码示例如下： | 单聊发送贴图消息的代码示例如下： | ||
| 行 203: | 行 187: | ||
| 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'); | ||
| 行 220: | 行 204: | ||
| }); | }); | ||
| </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发送图片消息的代码示例如下： | ||
| 行 237: | 行 215: | ||
| var sendPrivateUrlImg = function () { | var sendPrivateUrlImg = function () { | ||
| var id = conn.getUniqueId(); // 生成本地消息id | var id = conn.getUniqueId(); // 生成本地消息id | ||
| - | var msg = new WebIM.default.message('img', id); // 创建图片消息 | + | var msg = new WebIM.message('img', id); // 创建图片消息 |
| var option = { | var option = { | ||
| body: { | body: { | ||
| 行 256: | 行 234: | ||
| } | } | ||
| </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]] | ||
| ---- | ---- | ||
| 行 271: | 行 243: | ||
| 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 ) {}//消息发送成功回调 | ||
| - | }); | + | }); |
| - | + | ||
| - | 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]] | ||
| ---- | ---- | ||
| 行 307: | 行 265: | ||
| **·** 发送附件消息，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 | ||
| 行 328: | 行 287: | ||
| apiUrl: WebIM.config.apiURL, | 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'); | ||
| 行 345: | 行 308: | ||
| } | } | ||
| }; | }; | ||
| + | |||
| + | // 小程序单聊发送图片消息 | ||
| + | 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) {} | ||
| + | }); | ||
| + | WebIM.conn.send(msg.body); | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| </code> | </code> | ||
| 行 370: | 行 409: | ||
| file: file, | file: file, | ||
| to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
| - | roomType: false, | + | chatType: 'singleChat', // 设置单聊 |
| onFileUploadError: function () { // 消息上传失败 | onFileUploadError: function () { // 消息上传失败 | ||
| console.log('onFileUploadError'); | console.log('onFileUploadError'); | ||
| 行 380: | 行 419: | ||
| console.log('Success'); | console.log('Success'); | ||
| }, | }, | ||
| - | flashUpload: WebIM.flashUpload | + | flashUpload: WebIM.flashUpload, |
| + | ext: {file_length: file.data.size} | ||
| }; | }; | ||
| msg.set(option); | msg.set(option); | ||
| 行 405: | 行 445: | ||
| apiUrl: WebIM.config.apiURL, | 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'); | ||
| 行 416: | 行 457: | ||
| console.log('Success'); | console.log('Success'); | ||
| }, | }, | ||
| - | flashUpload: WebIM.flashUpload | + | flashUpload: WebIM.flashUpload, |
| + | ext: {file_length: file.data.size} | ||
| }; | }; | ||
| msg.set(option); | msg.set(option); | ||
| 行 444: | 行 486: | ||
| file: file, | file: file, | ||
| to: 'username', // 接收消息对象 | to: 'username', // 接收消息对象 | ||
| - | roomType: false, | + | chatType: singleChat, // 设置为单聊 |
| onFileUploadError: function () { // 消息上传失败 | onFileUploadError: function () { // 消息上传失败 | ||
| console.log('onFileUploadError'); | console.log('onFileUploadError'); | ||
| 行 454: | 行 496: | ||
| console.log('Success'); | console.log('Success'); | ||
| }, | }, | ||
| - | flashUpload: WebIM.flashUpload | + | flashUpload: WebIM.flashUpload, |
| + | ext: {file_length: file.data.size} | ||
| }; | }; | ||
| msg.set(option); | msg.set(option); | ||
| 行 462: | 行 505: | ||
| </code> | </code> | ||
| - | === API === | + | ==== 发送自定义消息 ==== |
| - | 示例中使用到的 API | + | 单聊发送自定义消息示例如下： |
| - | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#getUniqueId|getUniqueId]] | + | <code javascript> |
| - | + | var sendCustomMsg = function () { | |
| - | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | + | var id = conn.getUniqueId(); // 生成本地消息id |
| + | var msg = new WebIM.message('custom', id); // 创建自定义消息 | ||
| + | var customEvent = "customEvent"; // 创建自定义事件 | ||
| + | var customExts = {}; // 消息内容，key/value 需要 string 类型 | ||
| + | msg.set({ | ||
| + | to: 'username', // 接收消息对象（用户id） | ||
| + | customEvent, | ||
| + | customExts, | ||
| + | ext:{}, // 消息扩展 | ||
| + | roomType: false, | ||
| + | success: function (id, serverMsgId) {}, | ||
| + | fail: function(e){} | ||
| + | }); | ||
| + | conn.send(msg.body); | ||
| + | }; | ||
| + | </code> | ||
| ---- | ---- | ||
| 行 482: | 行 540: | ||
| </code> | </code> | ||
| ---- | ---- | ||
| + | |||
| + | |||
| ===== 接收消息 ===== | ===== 接收消息 ===== | ||
| 查看回调函数，接收各类消息的回调函数代码如下： | 查看回调函数，接收各类消息的回调函数代码如下： | ||
| 行 496: | 行 556: | ||
| onLocationMessage: function ( message ) {},//收到位置消息 | onLocationMessage: function ( message ) {},//收到位置消息 | ||
| onFileMessage: function ( message ) {}, //收到文件消息 | onFileMessage: function ( message ) {}, //收到文件消息 | ||
| + | onCustomMessage: function ( message ) {}, //收到自定义消息 | ||
| onVideoMessage: function (message) { | onVideoMessage: function (message) { | ||
| var node = document.getElementById('privateVideo'); | var node = document.getElementById('privateVideo'); | ||
| 行 523: | 行 584: | ||
| console.log(list); | console.log(list); | ||
| }, | }, | ||
| - | recallMessage: function( message ){}, //收到消息撤回回执 | + | onRecallMessage: function( message ){}, //收到消息撤回回执 |
| onReceivedMessage: function(message){}, //收到消息送达服务器回执 | onReceivedMessage: function(message){}, //收到消息送达服务器回执 | ||
| onDeliveredMessage: function(message){}, //收到消息送达客户端回执 | onDeliveredMessage: function(message){}, //收到消息送达客户端回执 | ||
| 行 531: | 行 592: | ||
| }); | }); | ||
| </code> | </code> | ||
| - | |||
| - | |||
| - | === API === | ||
| - | 示例中使用到的 API | ||
| - | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#listen|listen]] | ||
| ---- | ---- | ||
| 行 561: | 行 617: | ||
| </code> | </code> | ||
| - | **注意：**当为 WebIM 添加了 Emoji 属性后，若发送的消息含 WebIM.Emoji 里特定的字符串，connection 就会自动将这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为 **{type:'emoji(或者txt)',data:''}** | + | **注意：**当为 WebIM 添加了 Emoji 属性后，若发送的消息含 WebIM.Emoji 里特定的字符串，connection 就会自动将这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为 **{type:'emoji(或者txt)',data:type}** |
| 当 type='emoji' 时，data 表示**表情图像的路径**； | 当 type='emoji' 时，data 表示**表情图像的路径**； | ||
| 行 584: | 行 640: | ||
| 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 效果。 | ||
| - | |||
| * 对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。 | * 对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。 | ||
| 行 615: | 行 695: | ||
| ---- | ---- | ||
| - | ===== 拉取历史消息 ===== | + | ===== 消息漫游 ===== |
| - | 漫游消息，SDK增值功能。 | + | 漫游消息，''SDK增值功能''。 |
| <code javascript> | <code javascript> | ||
| /** | /** | ||
| 行 646: | 行 726: | ||
| ---- | ---- | ||
| ===== 消息回执 ===== | ===== 消息回执 ===== | ||
| + | 单聊： | ||
| * 已送达回执：在 webim.config.js 中配置 delivery 为 true ，在收到消息时会自动发送已送达回执，对方收到已送达回执的回调函数是 onDeliveredMessage | * 已送达回执：在 webim.config.js 中配置 delivery 为 true ，在收到消息时会自动发送已送达回执，对方收到已送达回执的回调函数是 onDeliveredMessage | ||
| | | ||
| * 已读回执：当认为用户已读某条（些）消息时，可以生成已读回执，再进行发送 | * 已读回执：当认为用户已读某条（些）消息时，可以生成已读回执，再进行发送 | ||
| | | ||
| - | * 对方收到已送达回执的回调函数是 onReadMessage | + | 对方收到已送达回执的回调函数是 onReadMessage |
| <code javascript> | <code javascript> | ||
| var bodyId = message.id; // 需要发送已读回执的消息id | var bodyId = message.id; // 需要发送已读回执的消息id | ||
| 行 659: | 行 739: | ||
| ,to: message.from | ,to: message.from | ||
| }); | }); | ||
| - | Demo.conn.send(msg.body); | + | conn.send(msg.body); |
| </code> | </code> | ||
| - | === API === | + | |
| - | 示例中使用到的 API | + | 群聊''SDK增值功能''： |
| - | * [[http://webim-h5.easemob.com/jsdoc/out/connection.html#send|send]] | + | |
| + | * 发送群可以收已读回执的消息 | ||
| + | <code javascript> | ||
| + | sendGroupReadMsg = () => { | ||
| + | let id = conn.getUniqueId(); // 生成本地消息id | ||
| + | let msg = new WebIM.message('txt', id); // 创建文本消息 | ||
| + | msg.set({ | ||
| + | msg: 'message content', // 消息内容 | ||
| + | to: 'username', // 接收消息对象（用户id） | ||
| + | chatType: 'groupChat', // 设置为群聊 | ||
| + | success: function (id, serverMsgId) { | ||
| + | console.log('send private text Success'); | ||
| + | }, | ||
| + | fail: function(e){ | ||
| + | console.log("Send private text error"); | ||
| + | } | ||
| + | }); | ||
| + | msgObj.body.msgConfig = { allowGroupAck: true } | ||
| + | conn.send(msg.body); | ||
| + | } | ||
| + | </code> | ||
| + | * 收到需要回执的消息后发送回执 | ||
| + | |||
| + | <code javascript> | ||
| + | sendReadMsg = () => { | ||
| + | let msg = new WebIM.message("read", WebIM.conn.getUniqueId()); | ||
| + | msg.body.chatType = "groupChat"; | ||
| + | msg.body.msgConfig = { allowGroupAck: true }; | ||
| + | msg.body.ackContent = JSON.stringify({}); | ||
| + | WebIM.conn.send(msg.body); | ||
| + | } | ||
| + | </code> | ||
| + | * 监听收到群组消息回执：分两种情况 1、正常在线时可以在 onReadMessage 函数里监听到回执，2、离线时收到群组消息回执，登录后会在onStatisticMessage函数里监听到回执 | ||
| + | |||
| + | <code javascript> | ||
| + | // 在线时可以在onReadMessage里监听 | ||
| + | onReadMessage: (message) => { | ||
| + | const { mid } = message; | ||
| + | const msg = { | ||
| + | id: mid | ||
| + | }; | ||
| + | if(message.groupReadCount){ | ||
| + | // 消息阅读数 | ||
| + | msg.groupReadCount = message.groupReadCount[message.mid]; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // 离线时收到回执，登录后会在这里监听到 | ||
| + | onStatisticMessage: (message) => { | ||
| + | let statisticMsg = message.location && JSON.parse(message.location); | ||
| + | let groupAck = statisticMsg.group_ack || []; | ||
| + | } | ||
| + | </code> | ||
| + | * 查看读过消息的用户 | ||
| + | <code jacascript> | ||
| + | WebIM.conn.getGroupMsgReadUser({ | ||
| + | msgId, // 消息id | ||
| + | groupId // 群组id | ||
| + | }).then((res)=>{ | ||
| + | console.log(res) | ||
| + | }) | ||
| + | </code> | ||
| ---- | ---- | ||