消息
发送消息
发送文本消息（单聊）
单聊发送文本消息示例如下。
// 单聊发送文本消息
var sendPrivateText = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('txt', id); // 创建文本消息
msg.set({
msg: 'message content', // 消息内容
to: 'username', // 接收消息对象（用户id）
roomType: false,
success: function (id, serverMsgId) {
console.log('send private text Success');
},
fail: function(e){
console.log("Send private text error");
}
});
msg.body.chatType = 'singleChat';
conn.send(msg.body);
};
发送文本消息（群组）
// 群组发送文本消息
var sendGroupText = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('txt', id); // 创建文本消息
var option = {
msg: 'message content', // 消息内容
to: 'group id', // 接收消息对象(群组id)
roomType: false,
chatType: 'chatRoom',
success: function () {
console.log('send room text success');
},
fail: function () {
console.log('failed');
}
};
msg.set(option);
msg.setGroup('groupchat');
conn.send(msg.body);
};
发送文本消息（聊天室）
// 聊天室发送文本消息
var sendRoomText = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('txt', id); // 创建文本消息
var option = {
msg: 'message content', // 消息内容
to: 'chatroom id', // 接收消息对象(聊天室id)
roomType: true,
chatType: 'chatRoom',
success: function () {
console.log('send room text success');
},
fail: function () {
console.log('failed');
}
};
msg.set(option);
msg.setGroup('groupchat');
conn.send(msg.body);
};
发送表情消息
发送表情同发送文本消息。需要在对方客户端将表情文本进行解析成图片，见处理消息。
发送贴图消息
Web IM SDK本身不支持截图，使用下述代码可以实现用户粘贴图片至输入框后发送。示例代码为单聊，贴图发送至群组和聊天室时需参考“发送文本消息”修改roomType和chatType参数。
// 单聊贴图发送
document.addEventListener('paste', function (e) {
if (e.clipboardData && e.clipboardData.types) {
if (e.clipboardData.items.length > 0) {
if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
var blob = e.clipboardData.items[0].getAsFile();
var url = window.URL.createObjectURL(blob);
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('img', id); // 创建图片消息
msg.set({
apiUrl: WebIM.config.apiURL,
file: {data: blob, url: url},
to: 'username', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function (error) {
console.log('Error');
},
onFileUploadComplete: function (data) {
console.log('Complete');
},
success: function (id) {
console.log('Success');
}
});
conn.send(msg.body);
}
}
}
});
发送命令消息
var id = conn.getUniqueId(); //生成本地消息id
var msg = new WebIM.message('cmd', id); //创建命令消息
msg.set({
msg: 'msg',
to: 'username', //接收消息对象
action : 'action' //用户自定义，cmd消息必填
ext :{'extmsg':'extends messages'} //用户自扩展的消息内容（群聊用法相同）
success: function ( id，serverMsgId ) {}//消息发送成功回调
});
if ( /*如果是发送到群组*/ ) {
msg.setGroup('groupchat');
} else if ( /*如果是发送到聊天室*/ ) {
msg.body.roomType = true;
msg.setGroup('groupchat');
}
conn.send(msg.body);
发送附件消息
发送附件消息，SDK自动分两步完成：
- 上传附件到服务器，并得到服务返回的附件信息等；
- 发送附件消息，消息体包含附件的基本信息、服务器路径、secret 等。
单聊发送图片/文件/音频/视频消息示例如下（关于在群组和聊天室发送这类消息，请参考“发送文本消息”修改roomType和chatType）：
// 单聊发送图片消息
var sendPrivateImg = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('img', id); // 创建图片消息
var input = document.getElementById('image'); // 选择图片的input
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件
var allowType = {
'jpg': true,
'gif': true,
'png': true,
'bmp': true
};
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: 'username', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function () { // 消息上传失败
console.log('onFileUploadError');
},
onFileUploadComplete: function () { // 消息上传成功
console.log('onFileUploadComplete');
},
success: function () { // 消息发送成功
console.log('Success');
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
conn.send(msg.body);
}
};
// 单聊发送文件消息
var sendPrivateFile = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('file', id); // 创建文件消息
var input = document.getElementById('file'); // 选择文件的input
var file = WebIM.utils.getFileUrl(input); // 将文件转化为二进制文件
var allowType = {
'jpg': true,
'gif': true,
'png': true,
'bmp': true,
'zip': true,
'txt': true,
'doc'：true,
'pdf': true
};
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: 'username', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function () { // 消息上传失败
console.log('onFileUploadError');
},
onFileUploadComplete: function () { // 消息上传成功
console.log('onFileUploadComplete');
},
success: function () { // 消息发送成功
console.log('Success');
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
conn.send(msg.body);
}
};
// 单聊发送音频消息
var sendPrivateAudio = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('audio', id); // 创建音频消息
var input = document.getElementById('audio'); // 选择音频的input
var file = WebIM.utils.getFileUrl(input); // 将音频转化为二进制文件
var allowType = {
'mp3': true,
'amr': true,
'wmv': true
};
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: 'username', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function () { // 消息上传失败
console.log('onFileUploadError');
},
onFileUploadComplete: function () { // 消息上传成功
console.log('onFileUploadComplete');
},
success: function () { // 消息发送成功
console.log('Success');
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
conn.send(msg.body);
}
};
// 单聊发送视频消息
var sendPrivateVideo = function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('video', id); // 创建视频消息
var input = document.getElementById('video'); // 选择视频的input
var file = WebIM.utils.getFileUrl(input); // 将视频转化为二进制文件
var allowType = {
'mp4': true,
'wmv': true,
'avi': true,
'rmvb':true,
'mkv':true
};
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: 'username', // 接收消息对象
roomType: false,
chatType: 'singleChat',
onFileUploadError: function () { // 消息上传失败
console.log('onFileUploadError');
},
onFileUploadComplete: function () { // 消息上传成功
console.log('onFileUploadComplete');
},
success: function () { // 消息发送成功
console.log('Success');
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
conn.send(msg.body);
}
};
接收消息
见添加回调函数。
处理消息
conn.listen() 中注册不同消息接收 handler 之后，可自行解析消息体，定位聊天好友，并追加到与其聊天窗口。具体参考 http://webim.easemob.com 效果。
注：对于图片、语音消息需要先进行下载，然后进行显示或者播放处理。
收到表情消息的处理示例：
conn.listen({
onEmojiMessage: function (message) {
// 当为WebIM添加了Emoji属性后，若发送的消息含WebIM.Emoji里特定的字符串，connection就会自动将
// 这些字符串和其它文字按顺序组合成一个数组，每一个数组元素的结构为{type: 'emoji(或者txt)', data:''}
// 当type='emoji'时，data表示表情图像的路径，当type='txt'时，data表示文本消息
console.log('Emoji');
var data = message.data;
for(var i = 0 , l = data.length ; i < l ; i++){
console.log(data[i]);
}
}, //收到表情消息
});
收到图片消息的处理示例：
conn.listen({
onPictureMessage: function (message) {
console.log("Location of Picture is ", message.url);
}, //收到图片消息
});
收到音频消息的处理示例：
conn.listen({
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);
}
})
历史消息
SDK暂不具有缓存历史消息功能，Demo 中聊天窗口只能显示，当前登录后会话实时在聊天信息，不能查看历史消息，可以对登录后的聊天信息进行清除操作。
新消息提示
SDK在收到新消息时会直接转发给登录用户，接收到消息后，Demo 中会在好友或者群组的后面显示红色消息数，具体样式开发者可自行处理。
消息回执
1、已送达回执： 在webim.config.js中配置delivery为true，在收到消息时会自动发送已送达回执，对方收到已送达回执的回调函数是onDeliveredMessage 2、已读回执： 当认为用户已读某条（些）消息时，可以生成已读回执，再进行发送
var bodyId = message.id; // 需要发送已读回执的消息id
var msg = new WebIM.message('read', msgId);
msg.set({
id: bodyId
,to: message.from
});
Demo.conn.send(msg.body);
对方收到已送达回执的回调函数是onReadMessage
上一页：Web SDK基础功能
下一页：好友管理