环信webIM即时通讯学习笔记

来源：互联网发布：网络推广威客编辑：程序博客网时间：2024/05/20 05:05

最近在做一个小型的聊天工具，需要使用环信来实现即时通讯，可发送文字，表情，图片，以及文件

参考环信开发文档

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 脚本。

<script type='text/javascript' src='webim.config.js'></script><script type='text/javascript' src='strophe-1.2.8.min.js'></script><script type='text/javascript' src='websdk-1.4.11.js'></script>

（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<message.data.length;i++){            var img = message.data[i];            var string;            if (img.type=='txt') {string = string+img.data;}            else{string = string+'<img class="emoji" '+'src="'+img.data +'">';}        }        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',            '[<o)]': 'ee_17.png',            '[|-)]': 'ee_18.png',            '[*-)]': 'ee_19.png',            '[:-#]': 'ee_20.png',            '[:-*]': 'ee_21.png',            '[^o)]': 'ee_22.png',            '[8-)]': 'ee_23.png',            '[(|)]': 'ee_24.png',            '[(u)]': 'ee_25.png',            '[(S)]': 'ee_26.png',            '[(*)]': 'ee_27.png',            '[(#)]': 'ee_28.png',            '[(R)]': 'ee_29.png',            '[({)]': 'ee_30.png',            '[(})]': 'ee_31.png',            '[(k)]': 'ee_32.png',            '[(F)]': 'ee_33.png',            '[(W)]': 'ee_34.png',            '[(D)]': 'ee_35.png'        }    };

另外若需要建选择表情的面板，则自己写样式，将图片放到面板上。

阅读全文

0 0