java融雲web端實現聊天

在寫這篇文章之前想說幾句，之前在網上搜了看了很多博客，發現並沒有什麼用，主要是看了很多人寫的邏輯都沒有

簡直是浪費時間，也不知道他們到底在寫什麼，沒辦法，公司要求要用融雲來開發聊天，只有自己慢慢去研究開發文檔了

還有一點就是作爲新手看開發文檔根本看不懂，融雲平臺文檔描述得我只想說太噁心了。研究了很久，決定寫下這篇文章

希望能幫到大家，有什麼錯的也希望大家指點一下

 

代碼比較多，我只是說一下思路：如果需要代碼的可以去我空間下載，裏面包含整個聊天頁面和聊天代碼

 

我們先來看看我自己做的效果吧

這個頁面是聊天會話頁面

點擊會話進去後

當然也有表情這些了

任意選擇一個發送

對方就可以接受到消息

好了，基本功能就是這樣，下面來開始講解吧。

1.先自己去融雲平臺註冊登錄融雲，獲取appkey

2.下面就開始代碼了，因爲我做的是java後臺，比如app端和我們聊天，或者電腦對電腦聊天：這裏先說一下思路

如果對方和我聊天，他首先要得到我的ID（id是唯一的）才能發消息給我，我回對方消息也要得到對方id，其實ID就是

我們數據庫中存放用戶的主鍵ID。所有我們還有在後臺服務寫一個獲取token的方法

 A:先導入榮雲的jar包或者依賴，我這裏是maven項目，所有直接依賴

        <!--融雲  -->
        <dependency>
             <groupId>cn.rongcloud.im</groupId>
            <artifactId>server-sdk-java</artifactId>
            <version>3.0.2</version>
        </dependency>

B:在後臺寫用戶註冊獲取token的方法 appKey ，appSecret 不能寫錯了，這個是你註冊上面的

   

/**
     * 此處替換成您的appKey
     * */
    private static final String appKey = "p5tvi9dsph3i4";
    /**
     * 此處替換成您的appSecret
     * */
    private static final String appSecret = "XZURH7ezOdx";
    /**
     * 自定義api地址 可有可無
     * */
    private static final String api = "http://api.cn.ronghub.com";

    //測試用戶註冊
    @SuppressWarnings("unchecked")
    @RequestMapping(value = "/admin/testGetToken",method = { RequestMethod.GET,RequestMethod.POST })
    @ResponseBody
    public WebResult testGetToken(HttpServletRequest request,HttpSession session,
            @RequestParam(value = "userid", defaultValue = "") String userid,//APP用戶ID  也就是你登錄是你的ID或者對方用戶id
            @RequestParam(value = "username", defaultValue = "") String username,//APP用戶姓名 也就是你登錄是你的姓名或者對 方用戶姓名
            @RequestParam(value = "portrait", defaultValue = "") String portrait //APP用戶頭像  你的頭像，或者對方的頭像，沒有就隨便傳就行了
            )
            throws Exception {
        String managerid= session.getAttribute("managerid").toString();
        WebResult webResult=null;
        TblManagerInfo managerInfo=null;//這個是我自己存放用戶的表
        Map<String, Object> map=WebUtil.getHashMap();//得到map集合
        try {
            RongCloud rongCloud = RongCloud.getInstance(appKey, appSecret);
            //自定義 api 地址方式
            // RongCloud rongCloud = RongCloud.getInstance(appKey, appSecret,api);
            User User = rongCloud.user;

            /**
             * API 文檔: http://www.rongcloud.cn/docs/server_sdk_api/user/user.html#register
             *
             * 註冊用戶，生成用戶在融雲的唯一身份標識 Token
             */

         //得到用戶實體,生成token  注意：如果是對方和你聊天他獲取根據自己的基本信息獲取token之後還要返回你

       自己的id給他，才能發消息給你的。如果是你先找對方聊天那麼就返回對方的ID給你，這裏的邏輯自己去處理了
            managerInfo=(TblManagerInfo) baseService.findById(TblManagerInfo.class, Long.valueOf(managerid));
            if(StringUtils.isEmpty(portrait))portrait="1.jpg";//如果頭像爲空，則設置爲默認的頭像
            UserModel user = new UserModel()
                    .setId(managerid)
                    .setName(managerInfo.getLinkman())
                    .setPortrait(portrait);
            TokenResult result = User.register(user);
            System.out.println(result.toString());
             map.put("token", result.getToken());//返回的token
             map.put("sellerid", 1);//返回的你自己的id 或對方的ID
              return WebResult.success("請求成功", map);
        } catch (Exception e) {
            e.printStackTrace();
            webResult=WebResult.error("服務正忙", null);
        }
        return webResult;
    }

3.現在開始前端的代碼吧，先引入融雲js,不然什麼效果都沒有

    <!--引入表情js  -->
    <script src="http://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
    <!-- 引入融雲js -->
    <script src="http://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>

A:一開始加載頁面時就要去獲取token，才能鏈接上融雲，得到token之後我們再去初始化融雲鏈接融雲

  

B:看一下init()初始化方法，綠色的部分是直接複製就可以用的，和開發文檔上面的一樣，主要是鏈接融雲，和隨時有對方給你發消息的監聽，監聽到消息之後你直接把監聽到的消息顯示在頁面上就行了

  /初始化連接融雲
function init(token){
    RongIMLib.RongIMClient.init('p5tvi9dsph3i4');// p5tvi9dsph3i4是你自己註冊在融雲的appkey,上面已經介紹過了
    // 連接狀態監聽器
    RongIMClient.setConnectionStatusListener({
        onChanged: function (status) {
            // status 標識當前連接狀態
            switch (status) {
                case RongIMLib.ConnectionStatus.CONNECTED:
                    console.log('鏈接成功');
                    break;
                case RongIMLib.ConnectionStatus.CONNECTING:
                    console.log('正在鏈接');
                    break;
                case RongIMLib.ConnectionStatus.DISCONNECTED:
                    console.log('斷開連接');
                    break;
                case RongIMLib.ConnectionStatus.KICKED_OFFLINE_BY_OTHER_CLIENT:
                    console.log('其他設備登錄');
                    break;
                case RongIMLib.ConnectionStatus.DOMAIN_INCORRECT:
                    console.log('域名不正確');
                    break;
                case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE:
                    console.log('網絡不可用');
                    break;
            }
        }
    });
    RongIMClient.connect(token, {
        onSuccess: function(userId) {
            console.log('Connect successfully. ' + userId);
            getConversationList();//連接成功之後我們要去獲取會話列表，也就是獲取所有會話聊天的消息，此方法在下面有
        },
        onTokenIncorrect: function() {
            console.log('token 無效');
        },
        onError: function(errorCode){
            var info = '';
            switch (errorCode) {
                case RongIMLib.ErrorCode.TIMEOUT:
                    info = '超時';
                    break;
                case RongIMLib.ConnectionState.UNACCEPTABLE_PAROTOCOL_VERSION:
                    info = '不可接受的協議版本';
                    break;
                case RongIMLib.ConnectionState.IDENTIFIER_REJECTED:
                    info = 'appkey不正確';
                    break;
                case RongIMLib.ConnectionState.SERVER_UNAVAILABLE:
                    info = '服務器不可用';
                    break;
            }
            console.log(info);
        }
    });

    //消息監聽器
    RongIMClient.setOnReceiveMessageListener({
        // 接收到的消息
        onReceived: function (message) {
            // 判斷消息類型
            switch(message.messageType){
                case RongIMClient.MessageType.TextMessage:
                     massagecount++;
                     massagecontent=message.content.content;
                     massagetargetId=message.targetId;
                     //$("#"+massagetargetId).html("");
                    // message.content.content => 文字內容
                    console.log("消息監聽:"+JSON.stringify(message));
                    console.log("消息監聽:"+message.content.content);
                    break;
                case RongIMClient.MessageType.VoiceMessage:
                    // message.content.content => 格式爲 AMR 的音頻 base64
                     console.log("消息監聽:"+message.content.content);
                    break;
                case RongIMClient.MessageType.ImageMessage:
                     console.log("消息監聽:"+message.content.content);
                    // message.content.content => 圖片縮略圖 base64
                    // message.content.imageUri => 原圖 URL
                    break;
                case RongIMClient.MessageType.LocationMessage:
                     console.log("消息監聽:"+message.content.content);
                    // message.content.latiude => 緯度
                    // message.content.longitude => 經度
                    // message.content.content => 位置圖片 base64
                    break;
                case RongIMClient.MessageType.RichContentMessage:
                     console.log("消息監聽:"+message.content.content);
                    // message.content.content => 文本消息內容
                    // message.content.imageUri => 圖片 base64
                    // message.content.url => 原圖 URL
                    break;
                case RongIMClient.MessageType.InformationNotificationMessage:
                     console.log("消息監聽1:");
                    // do something
                    break;
                case RongIMClient.MessageType.ContactNotificationMessage:
                     console.log("消息監聽2:");
                    // do something
                    break;
                case RongIMClient.MessageType.ProfileNotificationMessage:
                     console.log("消息監聽3:");
                    // do something
                    break;
                case RongIMClient.MessageType.CommandNotificationMessage:
                     console.log("消息監聽4:");
                    // do something
                    break;
                case RongIMClient.MessageType.CommandMessage:
                     console.log("消息監聽5:");
                    // do something
                    break;
                case RongIMClient.MessageType.UnknownMessage:
                     console.log("消息監聽6:");
                    // do something
                    break;
                default:
                     console.log("消息監聽7:");
                    // do something
            }
        }
    });
    
    // 表情初始化
    RongIMLib.RongIMEmoji.init();
    var list = RongIMLib.RongIMEmoji.list;
    initBiaoqing(list);
    
}

C:上面連接成功後開始獲取會話 ：注意，紅色的是我自己頁面的html，和文檔無關，其它都是開發文檔上面的

//獲取會話列表  
function  getConversationList(){
    $(".chatBox-list").html("");
    RongIMClient.getInstance().getConversationList({
        onSuccess: function(list) {
            // list => 會話列表集合
            //console.log("回話列表："+JSON.stringify(list));
            var i=1;
            var name="持之以恆";
            var icon="../massage/img/icon01.png";
            var unreadMessageCountTotal=0;//總會話未讀消息數量
            $.each(list,function(index,item){
                i++;
                //name=item.latestMessage.content.user.name;//對方暱稱
                //icon=item.latestMessage.content.user.icon;//對方頭像
                //console.log(item.unreadMessageCount);//未讀消息數"'+item.targetId+'"

           //這裏就開始循環添加會話去頁面顯示了
                $(".chatBox-list").append('<div id="'+i+'" class=\"chat-list-people\" onclick="getHistoryMessages(\''+item.targetId+'\',\''+i+'\',\''+name+'\',\''+icon+'\');" >'
                +'<div><img src=\"'+icon+'\"/></div>'
                +'<div class=\"chat-name\">'
                +' <div style=\"margin-top: 4%;font-weight:bold;"\>'+name+'</div>'
                +' <div style=\"text-overflow:ellipsis;white-space:nowrap;overflow:hidden;\" class=\"'+item.targetId+'\" >'+RongIMLib.RongIMEmoji.symbolToHTML(item.latestMessage.content.content)+'</div>'
                +'</div>'
                //+'<div class=\"message-num\">'+item.unreadMessageCount+'</div>'
                +'<div class=\"clear-massage\" ><img onclick="removeConversation(\''+item.targetId+'\');" src=\"../images/刪除圖標.jpg\" class=\"clear-img\" style=\" vertical-align:middle;\"/></div>'
                +'</div>');
                if(item.unreadMessageCount!=0){
                    $(".chat-name").after('<div class=\"message-num\">'+item.unreadMessageCount+'</div>');
                }else{
                    $(".chat-name").after('<div class=\"message-num\">0</div>');
                }
                unreadMessageCountTotal+=item.unreadMessageCount;
            })
            
            $(".chat-message-num").html(unreadMessageCountTotal);//設置總未讀消息提示
            
        },
        onError: function(error) {
            // do something
        }
    }, null);
}

// 清除未讀消息成功  上面說清除未讀消息的方法
function clearUnreadCount(targetId){
    var conversationType = RongIMLib.ConversationType.PRIVATE;//二人聊天 PRIVATE
    var targetId = targetId;
    RongIMClient.getInstance().clearUnreadCount(conversationType, targetId, {
        onSuccess: function(){
            // 清除未讀消息成功
            console.log("清除成功");
        },
        onError: function(error){
            // error => 清除未讀消息數錯誤碼
            console.log("清除失敗:"+error);
        }
    });
}

 

4.得到會話之後。肯定有消息提示了，下一步就是我們點擊會話進入聊天頁面 targetId是對方的id

  A：這是要獲取兩個人的聊天記錄 getHistoryMessages(targetId,id,name,icon),改方法是上面循環會話是已經添加好的，點擊會  話就執行這個方法得到兩個人的聊天記錄，點擊進入之後要把未讀消息數量清空爲0

   

//單擊回話列表獲取二人歷史消息targetId
var reflushHistoryMessagesId=1000;
function getHistoryMessages(targetId,id,name,icon){
    $("#chatBox-content-demo").html("");
    var conversationType = RongIMLib.ConversationType.PRIVATE; //PRIVATE 單聊, CUSTOMER_SERVICE客戶會話 其他會話選擇相應的消息類型即可
    var targetId = targetId; // 想獲取自己和誰的歷史消息，targetId 賦值爲對方的 Id
    var timestrap = 0; // 默認傳 null，若從頭開始獲取歷史消息，請賦值爲 0, timestrap = 0;  開始獲取只能從 0開始，不然每次點擊返回會話頁面再到聊天頁面都是循環獲取歷史消息
    var count = 20; // 每次獲取的歷史消息條數，範圍 0-20 條，可以多次獲取
    RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
        // list => Message 數組。
        // hasMsg => 是否還有歷史消息可以獲取。
        onSuccess: function(list, hasMsg) {
            //console.log(JSON.stringify(list));
            var html="";
            //判斷是否有歷史消息獲取
            if(hasMsg){
                html+='<div class="reflushHistoryMessages" id="'+reflushHistoryMessagesId+'" style="text-align: center;" onclick="reflushHistoryMessages(\''+targetId+'\',\''+id+'\',\''+name+'\',\''+icon+'\',\''+reflushHistoryMessagesId+'\');" ><a>查看歷史消息</a></div>';
            }if(!hasMsg){
                //去掉查看歷史消息div
                $(".reflushHistoryMessages").remove();
                html+='<div class="reflushHistoryMessages" style="text-align: center;" >暫無歷史消息</div>';
            }
            var clearfloatid=-1000;
            $.each(list,function(index,item){
                clearfloatid++;
                //拼接內容
                //用戶消息
                //messageDirection 1 爲發送的消息、2 爲接收的消息。
                //RongIMLib.RongIMEmoji.symbolToHTML如果是表情消息就顯示錶情
                if(item.messageDirection=="2"){
                    html+='<div class=\"clearfloat\" >'
                           +' <div class="author-name">'
                           +'     <small class="chat-date">'+transformTime(item.sentTime)+'</small>'
                           +' </div>'
                           +'<div class="left">'
                           +'    <div class="chat-avatars"><img src=\"'+icon+'\" alt="頭像"/></div>'
                           +'     <div class="chat-message">'
                           +'        '+RongIMLib.RongIMEmoji.symbolToHTML(item.content.content)+' '
                           +'    </div>'
                           +' </div>'
                           +'</div>';
                }//自己發的消息
                else if (item.messageDirection=="1"){
                html+='<div class="clearfloat" id="'+clearfloatid+'" onmousedown="chehui('+index+',\''+clearfloatid+'\',\''+item.messageUId+'\');">'
                       +' <div class="author-name">'
                       +'     <small class="chat-date">'+transformTime(item.sentTime)+'</small>'
                       +' </div>'
                       +'<div class="right">'
                       +'    <div class="chat-message">'+RongIMLib.RongIMEmoji.symbolToHTML(item.content.content)+'</div>'
                       +'     <div class="chat-avatars"><img src="../massage/img/icon02.png" alt="頭像"/></div>'
                       +' </div>'
                       +'</div>';
                }
                
            });
            //顯示兩個聊天頁面
            $("#chatBox-content-demo").append(html);
            html="";
            //設置接收人sendtargetId
            $("#sendtargetId").val(targetId);
              var n = $("#"+id).index();
          
                $(".chatBox-head-one").toggle();
                $(".chatBox-head-two").toggle();
                $(".chatBox-list").fadeToggle();
                $(".chatBox-kuang").fadeToggle();
    
                //傳名字
                $(".ChatInfoName").text(name);
    
                //傳頭像
                $(".ChatInfoHead>img").attr("src", icon);
    
                //聊天框默認最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
              //清除未讀消息
            clearUnreadCount(targetId);
        },
        onError: function(error) {
            console.log('GetHistoryMessages, errorcode:' + error);
        }
    });

}

5.進入聊天頁面之後，肯定就是發消息給對方了

//發送二人聊天消息 textContent：消息內容 targetId：對方ID
function sendmassage(textContent,targetId){
    var msg = new RongIMLib.TextMessage({ content: textContent, extra: '附加信息' });
    var conversationType = RongIMLib.ConversationType.PRIVATE; // 單聊 PRIVATE CUSTOMER_SERVICE客戶會話, 其他會話選擇相應的消息類型即可
    var targetId = targetId; // 目標 Id
    console.log("targetId--"+targetId+"  textContent"+textContent);
    var index=0;
    var clearfloatid=1;
    RongIMClient.getInstance().sendMessage(conversationType, targetId, msg, {
        onSuccess: function (message) {
            // message 爲發送的消息對象並且包含服務器返回的消息唯一 Id 和發送消息時間戳
            console.log('targetId:'+targetId+'--發送成功!');
            //成功後追加消息在列表框
            $(".chatBox-content-demo").append("<div class=\"clearfloat\" onmousedown='chehui("+index+",\""+clearfloatid+"\",\""+targetId+"\");' >" +
                    "<div class=\"author-name\"><small class=\"chat-date\">"+transformTime(new Date())+"</small> </div> " +
                    "<div class=\"right\"> <div class=\"chat-message\"> " +RongIMLib.RongIMEmoji.symbolToHTML(textContent) + " </div> " +
                    "<div class=\"chat-avatars\"><img src=\"../massageimg/icon01.png\" alt=\"頭像\" /></div> </div> </div>");
                //發送後清空輸入框
                $(".div-textarea").html("");
                //聊天框默認最底部
                $(document).ready(function () {
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                });
        },
        onError: function (errorCode, message) {
            var info = '';
            switch (errorCode) {
                case RongIMLib.ErrorCode.TIMEOUT:
                    info = '超時';
                    break;
                case RongIMLib.ErrorCode.UNKNOWN:
                    info = '未知錯誤';
                    break;
                case RongIMLib.ErrorCode.REJECTED_BY_BLACKLIST:
                    info = '在黑名單中，無法向對方發送消息';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_DISCUSSION:
                    info = '不在討論組中';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_GROUP:
                    info = '不在羣組中';
                    break;
                case RongIMLib.ErrorCode.NOT_IN_CHATROOM:
                    info = '不在聊天室中';
                    break;
            }
            console.log('發送失敗: ' + info + errorCode);
            alert('發送失敗: ' + info + errorCode);
        }
    });
}

6.發送成功之後。對方會監聽到消息，也就是我們開始鏈接融雲，上面說的監聽消息，監聽到之後直接處理消息就行了