环信web集成
1. 注册返回页面调用环信注册接口，将该帐号同步到环信。
$(document).ready(function(){
var username ="${userId}";
var password ="${password}";
var hash = hex_md5(password);//调用加密算法，采用MD5加密
var nickname = "${userName}";
var options = {
username : username,
password : hash,
nickname : nickname,
appKey : 'eyoudu#eyoudutest',
success : function(result) {
/*alert("注册成功!");*/
},
error : function(e) {
/*alert(e.error);*/
}
};
Easemob.im.Helper.registerUser(options);
});
注意：
(1).用户名遵循环信验证规则à* 1-32位长度字符(字母或数字)！
(2).密码需再次加密。
2. 私信页面环信集成处理
a) .初始方法
var conn1 = null;
var curUserId = null;
$(document).ready(function(){
conn1 = new Easemob.im.Connection();
//初始化连接,这里面的方法需要定义
conn1.init({
//当连接成功时的回调方法
onOpened : function() {
conn1.setPresence();
handleOpen(conn1);
},
//当连接关闭时的回调方法
onClosed : function() {
handleClosed();
},
//收到文本消息时的回调方法
onTextMessage : function(message) {
handleTextMessage(message);
},
//收到表情消息时的回调方法
onEmotionMessage : function(message) {
handleEmotion(message);
},
//收到图片消息时的回调方法
onPictureMessage : function(message) {
handlePictureMessage(message);
},
//收到音频消息的回调方法
onAudioMessage : function(message) {
handleAudioMessage(message);
},
onLocationMessage : function(message) {
handleLocationMessage(message);
},
//收到联系人订阅请求的回调方法
onPresence : function(message) {
handlePresence(message);
},
//收到联系人信息的回调方法
onRoster : function(message) {
handleRoster(message);
},
//异常时的回调方法
onError : function(message) {
handleError(message);
}
});
b) .登录环信
//自动登录
var currentName = $("#currentName").val();
var password = $("#currentpass").val();
var hash = hex_md5(password);
loginIm(currentName,hash);
//登录方法
function loginIm(username,password){
conn1.open({
user : username,
pwd : password,
//连接时提供appkey
appKey : 'eyoudu#eyoudutest'
});
}
//登录的回调方法，回调方法中可以获取到当前帐号的所有信息，个人信息，好友信息，群信息，好友出席信息等，私信中需要回调，不需要加载其他信息
var handleOpen = function(conn1) {
//从连接中获取到当前的登录人注册帐号名
curUserId = conn1.context.userId;
conn1.getRoster({
success: function (roster) {
}
});
};
c) .监听建立
(1).收到消息监听：
var handleTextMessage = function(message) {
var from = message.from;//消息的发送者
var mestype = message.type;//消息发送的类型是群组消息还是个人消息
var messageContent = message.data;//文本消息体
//TODO 根据消息体的to值去定位那个群组的聊天记录
var room = message.to;
if (mestype == 'groupchat') {
// appendMsg(message.from, message.to, messageContent, mestype);
//群组消息
alert(message.from+"给你发送了消息："+messageContent)
} else {
showHisSendLetter(message.from,message.to,messageContent);
}
};
注意：其他监听私信中暂且没用到，写在文档的末尾。包括收到表情，收到图片，收到音频，收到订阅等消息的监听处理。
d) .消息发送调用方法
var sendMessage =function(conn1,username,content){
var options = {
to : username,
msg : content,
type : "chat" //这个type类型为chat代表私聊，groupchat代表群聊消息
};
conn1.sendTextMessage(options);
};
e) .环信异常处理：
//连接中断时的处理，主要是对页面进行处理
var handleClosed = function() {
curUserId = null;
};
//异常情况下的处理方法
var handleError = function(e) {
if (curUserId == null) {
alert(e.msg + ",请重新登录");
} else {
var msg = e.msg;
if (e.type ==
EASEMOB_IM_conn1CTION_SERVER_CLOSE_ERROR) {
if (msg == "") {
alert("由于网络原因发送失败，请您重新发送!");
} else {
alert("由于网络原因发送失败，请您重新发送!");
}
} else {
alert(msg);
}
}
};
其他监听消息处理方式：
1. 收到表情：
var handleEmotion = function(message) {
var from = message.from;
var room = message.to;
var mestype = message.type;//消息发送的类型是群组消息还是个人消息
if (mestype == 'groupchat') {
appendMsg(message.from, message.to, message, mestype);
} else {
appendMsg(from, from, message);
}
};
2. 收到图片：
var handlePictureMessage = function(message) {
var filename = message.filename;//文件名称，带文件扩展名
var from = message.from;//文件的发送者
var mestype = message.type;//消息发送的类型是群组消息还是个人消息
var contactDivId = from;
if (mestype == 'groupchat') {
contactDivId = groupFlagMark + message.to;
}
var options = message;
// 图片消息下载成功后的处理逻辑
options.onFileDownloadComplete = function(response, xhr) {
var objectURL = window.URL.createObjectURL(response);
img = document.createElement("img");
img.onload = function(e) {
img.onload = null;
window.URL.revokeObjectURL(img.src);
};
img.onerror = function() {
img.onerror = null;
if (typeof FileReader == 'undefined') {
img.alter = "当前浏览器不支持blob方式";
return;
}
img.onerror = function() {
img.alter = "当前浏览器不支持blob方式";
};
var reader = new FileReader();
reader.onload = function(event) {
img.src = this.result;
};
reader.readAsDataURL(response);
}
img.src = objectURL;
var pic_real_width = options.width;
if (pic_real_width == 0) {
$("").attr("src", objectURL).load(function() {
pic_real_width = this.width;
if (pic_real_width > maxWidth) {
img.width = maxWidth;
} else {
img.width = pic_real_width;
}
appendMsg(from, contactDivId, {
data : [ {
type : 'pic',
filename : filename,
data : img
} ]
});
});
} else {
if (pic_real_width > maxWidth) {
img.width = maxWidth;
} else {
img.width = pic_real_width;
}
appendMsg(from, contactDivId, {
data : [ {
type : 'pic',
filename : filename,
data : img
} ]
});
}
};
options.onFileDownloadError = function(e) {
appendMsg(from, contactDivId, e.msg + ",下载图片" + filename + "失败");
};
//easemobwebim-sdk包装的下载文件对象的统一处理方法。
Easemob.im.Helper.download(options);
};
3. 收到音频消息：
var handleAudioMessage = function(message) {
var filename = message.filename;
var filetype = message.filetype;
var from = message.from;
var mestype = message.type;//消息发送的类型是群组消息还是个人消息
var contactDivId = from;
if (mestype == 'groupchat') {
contactDivId = groupFlagMark + message.to;
}
var options = message;
options.onFileDownloadComplete = function(response, xhr) {
var objectURL = window.URL.createObjectURL(response);
var audio = document.createElement("audio");
if (("src" in audio) && ("controls" in audio)) {
audio.onload = function() {
audio.onload = null;
window.URL.revokeObjectURL(audio.src);
};
audio.onerror = function() {
audio.onerror = null;
appendMsg(from, contactDivId, "当前浏览器不支持播放此音频:" + filename);
};
audio.controls = "controls";
audio.src = objectURL;
appendMsg(from, contactDivId, {
data : [ {
type : 'audio',
filename : filename,
data : audio
} ]
});
//audio.play();
return;
}
};
options.onFileDownloadError = function(e) {
appendMsg(from, contactDivId, e.msg + ",下载音频" + filename + "失败");
};
options.headers = {
"Accept" : "audio/mp3"
};
Easemob.im.Helper.download(options);
};
4. 收到联系人的订阅消息：
var handlePresence = function(e) {
//（发送者希望订阅接收者的出席信息），即别人申请加你为好友
if (e.type == 'subscribe') {
if (e.status) {
if (e.status.indexOf('resp:true') > -1) {
agreeAddFriend(e.from);
return;
}
}
var subscribeMessage = e.from + "请求加你为好友。\n验证消息：" + e.status;
showNewNotice(subscribeMessage);
$('#confirm-block-footer-confirmButton').click(function() {
//同意好友请求
agreeAddFriend(e.from);//e.from用户名
//反向添加对方好友
conn.subscribe({
to : e.from,
message : "[resp:true]"
});
$('#confirm-block-div-modal').modal('hide');
});
$('#confirm-block-footer-cancelButton').click(function() {
rejectAddFriend(e.from);//拒绝加为好友
$('#confirm-block-div-modal').modal('hide');
});
return;
}
//(发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
if (e.type == 'subscribed') {
toRoster.push({
name : e.from,
jid : e.fromJid,
subscription : "to"
});
return;
}
//（发送者取消订阅另一个实体的出席信息）,即删除现有好友
if (e.type == 'unsubscribe') {
//单向删除自己的好友信息，具体使用时请结合具体业务进行处理
delFriend(e.from);
return;
}
//（订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
if (e.type == 'unsubscribed') {
delFriend(e.from);
return;
}
};
5. 联系人出席消息：
var handleRoster = function(rosterMsg) {
for (var i = 0; i < rosterMsg.length; i++) {
var contact = rosterMsg[i];
if (contact.ask && contact.ask == 'subscribe') {
continue;
}
if (contact.subscription == 'to') {
toRoster.push({
name : contact.name,
jid : contact.jid,
subscription : "to"
});
}
//app端删除好友后web端要同时判断状态from做删除对方的操作
if (contact.subscription == 'from') {
toRoster.push({
name : contact.name,
jid : contact.jid,
subscription : "from"
});
}
if (contact.subscription == 'both') {
var isexist = contains(bothRoster, contact);
if (!isexist) {
var lielem = $('
"id" : contact.name,
"class" : "offline",
"className" : "offline"
}).click(function() {
chooseContactDivClick(this);
});
$('').attr({
"src" : "img/head/contact_normal.png"
}).appendTo(lielem);
$('').html(contact.name).appendTo(lielem);
$('#contactlistUL').append(lielem);
bothRoster.push(contact);
}
}
if (contact.subscription == 'remove') {
var isexist = contains(bothRoster, contact);
if (isexist) {
removeFriendDomElement(contact.name);
}
}
}
};