环信webIM即时通讯学习笔记
最近在做一个小型的聊天工具，需要使用环信来实现即时通讯，可发送文字，表情，图片，以及文件
参考环信开发文档
1、注册环信即时通信云获得appkey
（1）注册账号之后，登录进入即时通信云管理后台，并在我的应用下创建一个自己的应用，这样就可得到应用的appkey了
2、引用本地文件
（1）下载web sdk并解压后，将 /sdk/dist/strophe-1.2.8.min.js、/sdk/dist/websdk-1.4.11.js、/demo/javascript/dist/webim.config.js 拷贝到系统相应的目录下。
（2）新建 html 文件并 严格按照如下顺序 引入相关 js 脚本。
（3）更改webim.config.js里的appkey，改为自己的appkey
3、使用环信
3.1连接
/*头部连接*/
var conn = new WebIM.connection({
isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
url: WebIM.config.xmppURL,
heartBeatWait: WebIM.config.heartBeatWait,
autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
autoReconnectInterval: WebIM.config.autoReconnectInterval,
apiUrl: WebIM.config.apiURL,
isAutoLogin: true
});3.2注册
//注册用户
var options = {
username: userid,
password: password,
nickname: nickname,
appKey: WebIM.config.appkey,
success: function () {//注册成功之后回调函数
},
error: function () {},
apiUrl: WebIM.config.apiURL
};
conn.registerUser(options);3.3登录
/*登录*/
var options = {
apiUrl: WebIM.config.apiURL,
user: user,
pwd: password,
appKey: WebIM.config.appkey
};
conn.open(options);3.4监听回调
conn.listen({
onOpened: function ( message ) {}, //连接成功回调
onClosed: function ( message ) {}, //连接关闭回调
onTextMessage: function ( message ) {//收到文本消息
console.log(message);
console.log('收到'+message.from+'发送的消息：'+message.data);
detailMessage(message.data,message.from,'text',message.id,'');
showMessage();
},
onEmojiMessage: function ( message ) {//收到表情消息
console.log('收到'+message.from+'发送的Emoji'+':'+message.data);
//缓存数据
for(var i=0;i';}
}
string = string.replace('undefined','');
console.log(string);
detailMessage(string,message.from,'text',message.id,'');
showMessage();
},
onPictureMessage: function ( message ) {//收到图片消息
console.log(message);
console.log('收到'+message.from+'发送的图片'+':'+message.url);
detailMessage(message.url,message.from,'picture',message.id,'');
showMessage();
},
onCmdMessage: function ( message ) {}, //收到命令消息
onAudioMessage: function ( message ) {}, //收到音频消息
onLocationMessage: function ( message ) {},//收到位置消息
onFileMessage: function ( message ) {//收到文件消息
console.log(message);
console.log('收到'+message.from+'发送的文件'+':'+message.url);
detailMessage(message.url,message.from,'file',message.id,message.filename);
showMessage();
},
onVideoMessage: function (message) {
var node = document.getElementById('privateVideo');
var option = {
url: message.url,
headers: {
'Accept': 'audio/mp4'
},
onFileDownloadComplete: function (response) {
var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
node.src = objectURL;
},
onFileDownloadError: function () {
console.log('File down load error.')
}
};
WebIM.utils.download.call(conn, option);
}, //收到视频消息
onPresence: function ( message ) {}, //处理“广播”或“发布-订阅”消息，如联系人订阅请求、处理群组、聊天室被踢解散等消息
onRoster: function ( message ) {}, //处理好友申请
onInviteMessage: function ( message ) {}, //处理群组邀请
onOnline: function () {}, //本机网络连接成功
onOffline: function () {}, //本机网络掉线
onError: function ( message ) {}, //失败回调
onBlacklistUpdate: function (list) { //黑名单变动
// 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
console.log(list);
},
onReceivedMessage: function(message){}, //收到消息送达客户端回执
onDeliveredMessage: function(message){}, //收到消息送达服务器回执
onReadMessage: function(message){}, //收到消息已读回执
onCreateGroup: function(message){}, //创建群组成功回执（需调用createGroupNew）
onMutedMessage: function(message){} //如果用户在A群组被禁言，在A群发消息会走这个回调并且消息不会传递给群其它成员
}); 3.5发送文字消息（表情消息和文字消息一样）
/* 发送文字消息，这里的所有消息都是发送到群组的，send_to是群组id,群组是在环信管理后台建的，没有在前端自己创建 */
function sendPrivateText() {
var msg_content = $("#input_msg").val();//获取文本内容
if (msg_content.length==0) return;
console.log('发送至'+send_to);
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('txt', id); // 创建文本消息
msg.set({
msg: msg_content, // 消息内容
to: send_to, // 接收消息对象（用户id）
roomType: false,
chatType: 'groupchat',
success: function (id, serverMsgId) {
console.log('send private text Success');
$("#input_msg").val('');
var emojiMessage = WebIM.utils.parseEmoji(msg_content);
//缓存发送数据
console.log('msg_content:'+emojiMessage);
detailMessage(emojiMessage,"me",'text',msg.id,'');
showMessage();
},
fail:function(){
console.log("文字发送失败！");
}
});
msg.setGroup('groupchat');
conn.send(msg.body);
}3.6发送图片消息
/* 发送图片消息 */
function sendPrivateImg() {
$("#image").change(function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('img', id); // 创建图片消息
var input = document.getElementById('image'); // 选择图片的input id必填
var file = WebIM.utils.getFileUrl(input); // 将图片转化为二进制文件
var allowType = {'jpg': true,'gif': true,'png': true,'bmp': true};
var img_url;
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: send_to, // 接收消息对象
roomType: false,
chatType: 'groupchat',
onFileUploadError: function () { // 消息上传失败
console.log('图片发送失败！');
},
onFileUploadComplete: function (aa) { // 消息上传成功
console.log('onFileUploadComplete');
img_url = aa.uri+"/"+aa.entities[0].uuid;
},
success: function () { // 消息发送成功
console.log('Success');
//缓存发送数据
console.log(img_url);
detailMessage(img_url,"me",'picture',file.id,'');
showMessage();
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
msg.setGroup('groupchat');
conn.send(msg.body);
}
});
}3.7发送文件消息
/* 发送文件消息 */
function sendPrivateFile() {
("#file").change(function () {
var id = conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('file', id); // 创建文件消息
var input = document.getElementById('file'); // 选择文件的input id必填
var file = WebIM.utils.getFileUrl(input); // 将文件转化为二进制文件
var allowType = {'jpg': true,'gif': true,'png': true,'bmp': true,'zip': true,'txt': true,'doc': true,'pdf': true};
var file_url;
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
to: send_to, // 接收消息对象
roomType: false,
chatType: 'groupchat',
onFileUploadError: function () { // 消息上传失败
console.log('文件发送失败！');
},
onFileUploadComplete: function (aa) { // 消息上传成功
console.log('onFileUploadComplete');
file_url = aa.uri+"/"+aa.entities[0].uuid;
},
success: function () { // 消息发送成功
console.log('Success');
//缓存发送数据
detailMessage(file_url,"me",'file',file.id,file.filename);
showMessage();
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
msg.setGroup('groupchat');
conn.send(msg.body);
}
});
}3.8缓存数据以及调用artTemplate模板显示
/* 缓存消息处理 */
function detailMessage(data,from,type,id,filename){
var localContent = new Array();
if (localStorage[group]) {
localContent = JSON.parse(localStorage[group]);
}
localContent[localContent.length] = {
'time':getNowFormatDate(),
'data':data,//数据
'from':from,//谁发的
'type':type,//文本类型 text,file,picture
'id':id,//消息id
'filename':filename//文件名字
};
localStorage[group] = JSON.stringify(localContent);//存储本地；
}
/* 显示发送和接收的消息消息 */
function showMessage(){
//console.log('message:'+localContent);
var localContent = JSON.parse(localStorage[group]);
var obj = localContent[localContent.length-1];
//获取对应模板
showBox(obj);//调用模板
tobottom();
}
//模板
function showBox(obj){
//绑定模板
if (obj['from']=='me') {
var html = '';
if (obj.type=='text') {
html = template("my_text",{time:obj.time,msg_content:obj.data});
$(".chat_msg").append(imgShow(html));
}else if (obj.type=='picture') {
html = template("my_img",{time:obj.time,imgUrl:obj.data});
$(".chat_msg").append(html);
}else if (obj.type=='file') {
html = template("my_file",{time:obj.time,filename:obj.filename,fileUrl:obj.data});
$(".chat_msg").append(html);
}
}else{
if (obj.type=='text') {
html = template("other_text",{name:obj.from,time:obj.time,msg_content:obj.data});
$(".chat_msg").append(imgShow(html));
}else if (obj.type=='picture') {
html = template("other_img",{name:obj.from,time:obj.time,imgUrl:obj.data});
$(".chat_msg").append(html);
}else if (obj.type=='file') {
html = template("other_file",{name:obj.from,time:obj.time,filename:obj.filename,fileUrl:obj.data});
$(".chat_msg").append(html);
}
}
}3.9针对环信表情解释
可以使用 WebIM.utils.parseEmoji()工具类来解释，但是解释得到的是一条含有img标签的字符串，就是浏览器会将img标签看做是字符串而不会将其解释为img图片标签，因此需要将字符串转换为DOM对象，使得浏览器能将其解释为一张表情图片，代码如下：
/*匹配所有表情图片的img标签*/
function imgShow(obj){
var emojiShow = obj.replace(new RegExp("<","gm"),"<");
emojiShow = emojiShow.replace(new RegExp(">","gm"),">");
emojiShow = emojiShow.replace(new RegExp(""","gm"),"'");
return emojiShow;
}另外还需要将表情图片添加图片资源里去，再添加图片资源信息进去，如下：
WebIM.Emoji = {
path: 'images/faces/',
map: {
'[):]': 'ee_1.png',
'[:D]': 'ee_2.png',
'[;)]': 'ee_3.png',
'[:-o]': 'ee_4.png',
'[:p]': 'ee_5.png',
'[(H)]': 'ee_6.png',
'[:@]': 'ee_7.png',
'[:s]': 'ee_8.png',
'[:$]': 'ee_9.png',
'[:(]': 'ee_10.png',
'[:\'(]': 'ee_11.png',
'[:|]': 'ee_12.png',
'[(a)]': 'ee_13.png',
'[8o|]': 'ee_14.png',
'[8-|]': 'ee_15.png',
'[+o(]': 'ee_16.png',
'[