环信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) {

$("<img/>").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 = $('<li>').attr({

"id" : contact.name,

"class" : "offline",

"className" : "offline"

}).click(function() {

chooseContactDivClick(this);

});

$('<img>').attr({

"src" : "img/head/contact_normal.png"

}).appendTo(lielem);

$('<span>').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);

}

}

}

};