H5集成环信webIM即时通讯

最近在做一个小型项目，需要有聊天室直播聊天的功能。经过和网易云信，融云和环信的三家对比以后，选择了性价比比较高的环信来实现即时聊天，发送文字和表情的功能。下面和大家分享一下，我是如何继承的。

1、注册环信，获得appkey

注册账号之后，登录进入即时通信云管理后台，并在我的应用下创建一个自己的应用，这样就可得到应用的appkey了

2、引用对应的SDK

在环信的官网上找到，对应的SDK下载到本地。在即时聊天的web页面中分别引入如下三个js

​

降webim.config.js中的appkey，修改为第一步中申请获得的appkey

3、配置环信

3.1、在webim.config.js中实现连接，具体代码如下

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、登录方法如下user 和 pwd写入对应账号和面膜

            //用户名密码登录环信
			var options = {
				apiUrl: WebIM.config.apiURL,
				user: 'user',
				pwd: 'password',
				appKey: WebIM.config.appkey
			};
			console.log(options.user)

3.3、监听回调

conn.listen({
    onOpened: function ( message ) {},      //连接成功回调
    onClosed: function ( message ) {},         //连接关闭回调
    onTextMessage: function ( message ) {//收到文本消息
       
    },
    onEmojiMessage: function ( message ) {//收到表情消息
  
    },
    onPictureMessage: function ( message ) {//收到图片消息
       
    },
    onCmdMessage: function ( message ) {},     //收到命令消息
    onAudioMessage: function ( message ) {},   //收到音频消息
    onLocationMessage: function ( message ) {},//收到位置消息
    onFileMessage: function ( message ) {//收到文件消息
      
    },
    onVideoMessage: function (message) {
        };
        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群发消息会走这个回调并且消息不会传递给群其它成员
});