H5集成環信webIM即時通訊

最近在做一個小型項目，需要有聊天室直播聊天的功能。經過和網易雲信，融雲和環信的三家對比以後，選擇了性價比比較高的環信來實現即時聊天，發送文字和表情的功能。下面和大家分享一下，我是如何繼承的。

1、註冊環信，獲得appkey

註冊賬號之後，登錄進入即時通信雲管理後臺，並在我的應用下創建一個自己的應用，這樣就可得到應用的appkey了

2、引用對應的SDK

在環信的官網上找到，對應的SDK下載到本地。在即時聊天的web頁面中分別引入如下三個js

<script src="../js/webim.config.js"> </script>
<script src="../js/strophe-1.2.8.min.js"> </script>
<script src="http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.js"></script>

​

降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羣發消息會走這個回調並且消息不會傳遞給羣其它成員
});

環信WEBIM集成完畢，如需demo（demo是付費的,請尊重別人的勞動成果）請加微信：