融雲web即時通信

前言：由於我是業餘的前端，因此在作融雲web通訊的時候遇到了不少問題，可能站在前端的角度，我解決的辦法不是很完美，因此我但願若是有人看到了多給我一些提點 謝謝！

我不是標題黨，我今天要說的就是基於融雲的web開發簡單的文字通訊。  要了解必定php js java 頁面之間的參數傳遞我是在php環境完成的 註冊是在java 這種java和php之間的轉換也是很簡單的

若是要作到兩個界面之間互發消息還能查詢歷史消息，就必須開通公有云專業版後，開啓單羣聊消息雲存儲。若是是本身娛樂我以爲不必去開通，由於實在是太貴了（我作的時候用的是公司給的帳號）。這個先跳過進入正題

 

1、註冊融雲的帳號 (註冊帳號放在後臺會比前端安全，若是放在前端註冊，一些懂程序的會盜取你的appKey和appSecret)　

/**
 * 註冊rongCloud帳號
 * @param agent
 * string userModel.id  惟一標識，最大長度 30 個字符，建議使用 英文字母、數字 混排
 * string userModel.name  名稱，最大長度 60 個字符
 * string userModel.portrait  合法的頭像地址，最大長度 800 個字符
 * @return
 * "code": 200,
 * "userId": 
 * "token": 
 */
@PostMapping("/registerUser")
public void registerUser(Agent agent){
    try {
        PrintWriter out = response.getWriter();
        //給jedis賦值
        JedisTest.initJedis();
        if(JedisTest.jedis.get(agent.getAgentId().toString()) != null) {
            System.out.println("----------從緩存獲取用戶token信息"+agent.getAgentId());
            String userInfo = JedisTest.jedis.get(agent.getAgentId().toString());
            out.write(userInfo);
            JedisTest.closeJedis();
            return;
        }
　　　　　//appKey, appSecret本身註冊融雲後的帳號
        RongCloud rongCloud = RongCloud.getInstance(appKey, appSecret);
        User User = rongCloud.user;
        UserModel user = new UserModel()
                .setId(agent.getAgentId().toString())
                .setName(agent.getAgentName())
                .setPortrait(agent.getAgentAvatar());
        TokenResult result = User.register(user);
        System.out.println("getToken:  " + result.toString());
        //存入到redis緩存
        System.out.println("----------存放用戶信息");
        //setex設置緩存時間
        JedisTest.jedis.setex(agent.getAgentId().toString(),72000,result.toString());
        JedisTest.closeJedis();

        out.write(result.toString());
    }catch (Exception e){
        System.out.println("註冊rongCloud帳號出錯" + e.getMessage());
    }
}

 

直接複製會有jedis報錯，個人jediis代碼就不貼出來了，由於個人jedis服務器搭建在linux系統一兩句在這也說不清  你能夠直接用本身的方式存放就好,緩存能夠避免一直獲取token

這是rongcloud mavenjar

<!--rongcloud通訊jar包-->
<dependency>
   <groupId>cn.rongcloud.im</groupId>
   <artifactId>server-sdk-java</artifactId>
   <version>3.0.1</version>
</dependency>

2、對融雲方法的封裝 （如下代碼是我本身封裝的js文件）

　　
function RongCloud(){

}

RongCloud.prototype = {
    constructor: RongCloud,
    /**
     * 初始化融雲服務,並啓動消息監聽
     * @param appkey app的惟一標識
     */
    initRong: function (appkey) {
        RongIMClient.init(appkey); //appkey
        // 設置鏈接監聽狀態 （ status 標識當前鏈接狀態）
        // 鏈接狀態監聽器
        RongIMClient.setConnectionStatusListener({
            onChanged: function (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.NETWORK_UNAVAILABLE:
                        console.log('網絡不可用');
                        break;
                }
            }
        });
        this.monitor();
    },

    /**
     * 用戶用token鏈接融雲服務器
     * @param token 用戶的聊天token
     */
    connectSession: function (callback,token) {
        // 鏈接融雲服務器。
        RongIMClient.connect(token, {
            onSuccess: function (userId) {
                console.log("Login successfully." + userId);
                callback  && callback(true, userId);
            },
            onTokenIncorrect: function () {
                console.log('token無效' + userId);
                callback  && callback(false, userId);
            },
            onError: function (errorCode) {
                var info = '';
                switch (errorCode) {
                    case RongIMLib.ErrorCode.TIMEOUT:
                        info = '超時';
                        break;
                    case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                        info = '未知錯誤';
                        break;
                    case RongIMLib.ErrorCode.UNACCEPTABLE_PaROTOCOL_VERSION:
                        info = '不可接受的協議版本';
                        break;
                    case RongIMLib.ErrorCode.IDENTIFIER_REJECTED:
                        info = 'appkey不正確';
                        break;
                    case RongIMLib.ErrorCode.SERVER_UNAVAILABLE:
                        info = '服務器不可用';
                        break;
                }
                console.log(errorCode);
            }
        });
    },

    /**
     * 消息監聽
     */
    monitor:function (){
        // 消息監聽器
        RongIMClient.setOnReceiveMessageListener({
            // 接收到的消息
            onReceived: function (message) {
                // 判斷消息類型
                switch (message.messageType) {
                    case RongIMClient.MessageType.TextMessage:
                        // 發送的消息內容將會被打印
                        console.log("message.content.content------" + JSON.stringify(message.content.content));
                        console.log('收到發送的消息');
                        if(typeof writeInContent != 'undefined'){ //在聊天頁面才寫入數據
                            writeInContent(1,message.content.content,message.senderUserId,'');//給接收者寫入最新數據
                        }
                        break;
                    case RongIMClient.MessageType.VoiceMessage:
                        // 對聲音進行預加載
                        // message.content.content 格式爲 AMR 格式的 base64 碼
                        RongIMLib.RongIMVoice.preLoaded(message.content.content);
                        break;
                    case RongIMClient.MessageType.ImageMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.DiscussionNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.LocationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.RichContentMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.DiscussionNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.InformationNotificationMessage:
                        // do something...
                        console.log('收到小灰條信息')
                        break;
                    case RongIMClient.MessageType.ContactNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.ProfileNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.CommandNotificationMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.CommandMessage:
                        // do something...
                        break;
                    case RongIMClient.MessageType.UnknownMessage:
                        // do something...
                        break;
                    case RongIMClient.RegisterMessage.PersonMessage:
                        // do something...
                        break;
                    default:
                    // 自定義消息
                    // do something...

                }
            }
        });
    },

    /**
     * 獲取會話列表
     * @param callback 消息回調參數
     * @return boolean 是否成功的狀態碼
     * @return list 會話列表集合
     */
    getSessionList: function (callback) {
        RongIMClient.getInstance().getConversationList({
            onSuccess: function(list) {
                console.log("會話列表--"+ JSON.stringify(list))
                callback  && callback(true, list);
            },
            onError: function(error) {
                // do something...r
                result = "獲取會話列表失敗！"
                callback  && callback(false, result);
            }
        },null);
    },

    /**
     * 獲取指定的會話
     * @param callback 消息回調參數
     * @return boolean 是否成功的狀態碼
     * @return list 會話列表集合
     */
    getSessionListBytargetId: function(callback, targetId) {
        var conversationType = RongIMLib.ConversationType.PRIVATE;
        RongIMLib.RongIMClient.getInstance().getUnreadCount(conversationType,targetId,{
            onSuccess:function(count){
                // count => 指定會話的總未讀數。
                callback  && callback(true, count);
            },
            onError:function(){
                result = "獲取會話列表失敗！"
                callback  && callback(false, result);
            }
        });
    },

    /**
     * 清空和莫我的的未讀消息數
     * @param callback 消息回調參數
     * @param targetId 要清楚和誰的會話消息數
     */
    cleanMessageCount: function (targetId) {
        var conversationType = RongIMLib.ConversationType.PRIVATE;
        RongIMClient.getInstance().clearUnreadCount(conversationType,targetId,{
            onSuccess:function(){
                console.log("清除未讀消息數成功！");
            },
            onError:function(error){
                console.log("清除未讀消息數錯誤！"+ error);
            }
        });
    },

    /**
     * 獲取本身和莫我的的聊天記錄
     * @param callback 消息回調參數
     * @param conversationType 私聊,其餘會話選擇相應的消息類型便可。
     * @param targetId 想獲取本身和誰的歷史消息，targetId 賦值爲對方的 Id。
     * @param timestrap  默認傳 null，若從頭開始獲取歷史消息，請賦值爲 0 ,timestrap = 0;
     * @param count 每次獲取的歷史消息條數，範圍 0-20 條，能夠屢次獲取。
     * @return list 聊天數據集合
     * @return hasMag 是否還有歷史記錄 有位true
     */
    getHistoryById: function (callback,conversationType,targetId,timestrap,count) {
        RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
            onSuccess: function(list, hasMsg) {
                // list => Message 數組。
                // hasMsg => 是否還有歷史消息能夠獲取。
                // console.log("targetId------" + targetId);
                // console.log("GetHistoryMessages:list" + JSON.stringify(list));
                callback && callback(hasMsg, list);
            },
            onError: function(error) {
                console.log("獲取歷史" , error);
                callback && callback(false, error);
            }
        });
    },

    sendMessage :function(targetId,content,extra) {
        var msg = new RongIMLib.TextMessage({content:content,extra:extra});
        var conversationtype = RongIMLib.ConversationType.PRIVATE; // 單聊,其餘會話選擇相應的消息類型便可。
        var targetId = targetId; // 目標 Id
        RongIMClient.getInstance().sendMessage(conversationtype, targetId, msg, {
                onSuccess: function (message) {
                    //message 爲發送的消息對象而且包含服務器返回的消息惟一Id和發送消息時間戳
                    console.log("Send successfully");
                },
                onError: function (errorCode,message) {
                    var info = '';
                    switch (errorCode) {
                        case RongIMLib.ErrorCode.TIMEOUT:
                            info = '超時';
                            break;
                        case RongIMLib.ErrorCode.UNKNOWN_ERROR:
                            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;
                        default :
                            info = x;
                            break;
                    }
                    console.log('發送失敗:' + info);
                }
            }
        );
    }
}

 

代碼太多不過要解釋的只有一個地方：
　　在消息監聽的那個方法中我作了一個if判斷若是當前在聊天頁面，那麼我就把收到的消息寫入到聊天頁面。


其實走到這一步就得靠本身的邏輯去完成了
要聊天首先得要有兩個頁面 會話頁面 和 消息頁面由於是web端的因此每一個頁面都得調用初始化融雲服務和登陸融雲 （具體實現方法「參照」三四）三四隻能參照

1.用註冊的帳號去發送消息給另外一個帳號產生一個會話（至關於qq的加好友） 發送消息的是註冊融雲的id（是本身手動輸入的註冊融雲的那個值）

3、會話頁面(這個我是在php的環境下完成的)

 

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>會話</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<head>
<style>
    *{
        padding: 0px;
        margin: 0px;
        outline: 0;
        list-style:none;
        box-sizing: border-box;
        -moz-box-sizing: border-box; /* Firefox */
        -webkit-box-sizing: border-box; /* Safari */
    }
    #main{
        width: 100%;
        height: 100%;
    }
    .sessionData{
        width: 100%;
        height: 70px;
        border-bottom: 1px #999999 solid;
    }
    .imgDiv{
        float:left; width: 50px;
        height: 50px;
        margin-left:30px;
        margin-top:10px;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border:solid 2px #FFFFFF;
    }
    .nameAndMessage{
        float:left;
        width: 50%;
        height: 50px;
        margin-left:10px;
        margin-top:10px;
        font-size: 12px
    }
    .agentName{
        margin: 0;
        padding: 0;
        height: 25px;
        width: 50%;
        line-height: 28px;
        overflow:hidden
    }
    .message{
        margin: 0;
        padding: 0;
        height: 25px;
        width: 50%;
        line-height: 22px;
        overflow:hidden
    }
    .date{
        float:right;
        margin: 0;
        margin-left: 20px;
        padding: 0;
        height: 70px;
        width: 50px;
        line-height: 70px;
        font-size: 12px
    }
    .count{
        float:right;
        margin-top: 25px;
        margin-right: 20px;
        height: 20px;
        width: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        background: red;
        color: #FFFFFF;
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
    }
    /*加載數據時隱藏源代碼*/
    [v-cloak] {
        display: none;
    }
    a {
        text-decoration:none;
        out-line: none;
        color: #000000;
    }
</style>
</head>
<body>
<div id="main">
    <div id="sessionMain">
        <div class="sessionData" v-for="(item, index) in items" v-cloak>
            <div class="imgDiv">
                <img :src="userInfo[index].headImgUrl" width="50px" height="50px"/>
            </div>
            <a :href="'<?php echo base_url()?>mobile/wx_chat/messagePage?targetId='+item.targetId+'&count='+item.unreadMessageCount">
                <div class="nameAndMessage">
                    <div class="agentName">
                        {{ userInfo[index].nickName }}
                    </div>
                    <div class="message">
                        {{ item.latestMessage.content.content }}
                    </div>
                </div>
            </a>
            <div v-if="item.unreadMessageCount === 0">
                <div class="date">
                    {{ dataStr[index] }}
                </div>
            </div>
            <div v-else>
                <div class="count">
                    {{ item.unreadMessageCount }}
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

<script type="text/javascript" src="/js/chat/dataUtil.js" ></script>
<script type="text/javascript" src="/js/chat/rongCloud.js" ></script>
<script type="text/javascript" src="/js/chat/rongConfig.js" ></script>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script src="https://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>
<script type="text/javascript">
    //定義緩存對象
    window.onload = initRong();
    var rongCloud = new RongCloud();
    var dateGS = new DateGS();
    //定義緩存對象
    var userCache = {};

    /**
     * 初始化融雲服務,並啓動消息監聽
     */
    function initRong(){
        var rongCloud = new RongCloud();
        var rongConfig = new RongConfig();
        rongCloud.initRong(rongConfig.getAppkey());
        //用戶登陸rong
        loginRong();
    }

    /**
     * 登陸融雲
     */
    function loginRong() {
        var rongCloud = new RongCloud();
        //獲取用戶token
        var token = "<?php echo  $imToken ?>";
        rongCloud.connectSession(function(status,userId){
            if(status) {
                //把本身的token和userId存放到緩存
                $.data(userCache, 'token', token);
                $.data(userCache, 'userId', userId);
                //獲取會話
                getSessionList();
            }else {
                alert("登陸失敗！");
            }

        },token);
    }

    /**
     * 獲取會話列表
     */
    function getSessionList() {
        if(localStorage.getItem("closeId") != null) {
            closeMessageCount();
        }
        rongCloud.getSessionList(function (status, list) {
            if(status) {
                var targetIds = '';
                for(var i in list){
                    targetIds += list[i].targetId+",";
                }
                targetIds = targetIds.substr(0,targetIds.length-1);
                //先用加姓名頭像 25 24 用戶的
                //targetIds = "oHNCGjmOMyk87ACKZrZ_A1CEiagA,oHNCGjrgAym1xXiAWsPJfXPChTk4";
                // 獲取用戶信息
                $.ajax({
                    type: "get",
                    url: "/api/mobile/agentService/getUserInfoByOpenId",
                    dataType: "text",
                    data: {openIds:targetIds},
                    success: function(ret, err) {
                        var dataStr = [];
                        for(var i in list) {
                            dataStr.push(dateGS.getLocalTime(list[i].sentTime));
                        }
                        //用戶信息
                        ret = $.parseJSON(ret);
                        console.log(JSON.stringify(ret))
                        if(ret.resultCode == 1) {
                            //vue渲染數據到頁面
                            var sessionMain = new Vue({
                                el: '#sessionMain',
                                data: {
                                    token: $.data(userCache, 'token'),
                                    items: list, //融雲放回的數據
                                    dataStr: dataStr, //格式化後的消息發送時間
                                    userInfo: ret.extend, //用戶的集合
                                },
                            })
                        } else {
                            alert("獲取用戶信息失敗！");
                        }
                    },
                    error:function(){
                        $('#content_empty').show();
                    }
                });
            }
        });
    }


    /**
     * 清空消息數 要清空必須得
     * 在這個頁面獲取一下歷史消息才能永久成功
     */
    function closeMessageCount() {
        //緩存有數據就是有清空的數據
        if(localStorage.getItem("closeId") != null) {
            rongCloud.getHistoryById(function (hasMag, list) {
                //清空數據
                rongCloud.cleanMessageCount(localStorage.getItem("closeId"));
                localStorage.removeItem("closeId");
            },RongIMLib.ConversationType.PRIVATE,localStorage.getItem("closeId"), null, 20);
        }
    }
</script>

 

解釋一下吧會話頁面是經過php控制器跳轉的,沒有任何的參數。  
appkey我也是封裝到js裏面的由於一些隱私問題我不能把這個js提供出來，你若是註冊了融雲那麼就直接把appkey替換就行
在頁面中我用一個ajax去註冊融雲用戶獲得返回的token再登陸融雲,而後再查詢會話列表，有些圖像用戶名稱的我是查詢的表數據，因此這一步是不能複製粘貼的

4、消息頁面 (這個我是在php的環境下完成的)

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <!-- 移動設備支持 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
</head>

<style>
    /**重置標籤默認樣式*/
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: '微軟雅黑'
    }
    #container {
        width: 100%;
        height: 100%;
        background: #eee;
        position: relative;
    }
    .header {
        width: 100%;
        height: 50px;
        color: #fff;
        background: #999999;
        line-height: 50px;
        font-size: 20px;
        position: fixed;
        padding: 0 100px 0px 0px;
        top: 0px;
    }
    .footer {
        width: 100%;
        height: 50px;
        background: #999999;
        position: fixed;
        bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .footer input {
        width: 75%;
        height: 45px;
        outline: none;
        font-size: 20px;
        text-indent: 10px;
        position: absolute;
        border-radius: 6px;
        left:3%;
    }
    .footer span {
        display: inline-block;
        width: 15%;
        height: 48px;
        background: #ccc;
        font-weight: 900;
        line-height: 45px;
        cursor: pointer;
        text-align: center;
        position: absolute;
        right: 3%;
        border-radius: 6px;
    }

    .content {
        font-size: 20px;
        width: 100%;
        overflow: auto;
        margin-top:50px;
        margin-bottom: 70px;
    }
    .content li {
        margin-top: 10px;
        width: 100%;
        display: block;
        clear: both;
        overflow: hidden;
    }
    .content li span{
        background: #7cfc00;
        padding: 10px;
        border-radius: 10px;
        margin: 6px 10px 0 10px;
        max-width: 310px;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px #ccc;
    }
    .imgleft {
        float: left;
        margin-left: 5px;
    }
    .imgright {
        float: right;
        margin-right: 5px;
    }
    .spanleft{
        float: left;
        background: #fff;
    }
    .spanright {
        float: right;
        background: #7cfc00;
    }
    /*加載數據時隱藏源代碼*/
    [v-cloak] {
        display: none;
    }
</style>
<html>
<body>
    <div id="container">
        <div class="header">
            <span onclick="jump()" style="float:left;width: 12%"><img src="/image/left.png" style="height: 50px;"/></span>
            <div id="targetId" style="float:left;text-align: center;line-height: 50px;width: 76%;" v-cloak>{{ targetName }}</div>
            <div style="float:left;width: 12%;height: 50px;"></div>
        </div>
        <ul class="content">
            <li style=""></li>
        </ul>
        <div class="footer">
            <input id="text" type="text" placeholder="說點什麼吧...">
            <span id="btn">發送</span>
        </div>
    </div>
</body>

</html>

<script type="text/javascript" src="/js/chat/dataUtil.js" ></script>
<script type="text/javascript" src="/js/chat/rongCloud.js" ></script>
<script type="text/javascript" src="/js/chat/rongConfig.js" ></script>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/vue.min.js"></script>
<script src="https://cdn.ronghub.com/RongIMLib-2.2.5.min.js"></script>
<script type="text/javascript">
    window.onload = initRong();
    var rongCloud = new RongCloud();
    //初始化融雲服務,並啓動消息監聽
    function initRong(){
        var rongCloud = new RongCloud();
        var rongConfig = new RongConfig();
        rongCloud.initRong(rongConfig.getAppkey());
        //用戶登陸rong
        loginRong();
        getUserInfo();
        //初始化頁面
        pageInit();
        //把要清空的對象id存放到緩存
        localStorage.setItem("closeId","<?php echo $targetId ?>");
    }

    /**
     * 把用戶頭像姓名存放到緩存
     */
    function getUserInfo() {
        //獲取對方的id和本身的id
        var targetIdAndSendId = localStorage.getItem("userId") + "," + "<?php echo  $targetId?>";
        //先用加姓名頭像 25 24 用戶的  25 是本身的id 24使目標id
        //var targetIdAndSendId = "oHNCGjmOMyk87ACKZrZ_A1CEiagA,oHNCGjrgAym1xXiAWsPJfXPChTk4";
        // 獲取用戶信息
        $.ajax({
            type: "get",
            url: "/api/mobile/agentService/getUserInfoByOpenId",
            dataType: "text",
            data: {openIds:targetIdAndSendId},
            success: function(ret, err) {
                //用戶信息
                ret = $.parseJSON(ret);
                if(ret.resultCode == 1) {
                    //vue渲染數據到頁面
                    var header = new Vue({
                        el: '.header',
                        data: {
                            targetName: ret.extend[1].nickName,
                        },
                    })
                    //把用戶頭像存放到緩存
                    localStorage.setItem("userImgUrl", ret.extend[0].headImgUrl);
                    localStorage.setItem("targetImgUrl",ret.extend[1].headImgUrl);

                } else {
                    alert("獲取用戶頭像失敗！");
                }
            },
            error:function(){
                $('#content_empty').show();
            }
        });
    }

    /**
     * 登陸時獲取歷史消息
     */
    function loginRong() {
        //獲取用戶token
        var token = "<?php echo $token ?>";
        var rongCloud = new RongCloud();
        rongCloud.connectSession(function(status,userId){
            if(status) {
                //把本身的token和userId存放到緩存
                localStorage.setItem("token", token);
                localStorage.setItem("userId",userId);
                //初始化時獲取用戶歷史消息3-10條
                var targetIdPar = "<?php echo $targetId ?>";
                var countPar = "<?php echo $count ?>";
                getHistory(targetIdPar,parseInt(countPar),0);
            }else {
                alert("登陸失敗！");
            }

        },token);
    }

    /**
     * 初始化融雲 和 頁面數據渲染
     */
    //定義本身的頭像地址 和 別人的頭像存放
    function pageInit(){
        var userInfo = {};
        var btn = document.getElementById('btn');
        var text = document.getElementById('text');
        var content = document.getElementsByTagName('ul')[0];

        //必定要設置高度才能把數據實時的放在最下面 高度爲屏幕分辨率的高減去上下div的高度 上50px 下70px
        //還要減去減去初始化3條信息的高度150 網頁才能兼容  ix下面會多出一部分不兼容
        content.style.height=window.screen.height-120+"px";
        btn.onclick = function(){
            if(text.value.replace(/\s+/g,"") == '') {
                alert("不能發送空白消息");
                text.value = '';
                return;
            }else {
                writeInContent(0,text.value,"<?php echo $targetId?>",'');
                // 內容過多時,將滾動條放置到最底端
                content.scrollTop = content.scrollHeight;
                //sendGroupChat(text.value);
                sendMessage("<?php echo  $targetId?>", text.value);
                text.value = '';
            }
        }
    }

    /**
     * 寫入數據到content
     * writeFormat 寫入在左仍是右 0右 1左
     * contentText 寫入內容
     * list 爲空表示是單條插入到最底部，爲集合表示多條插入到最頂部
     */
    function writeInContent(num,contentText,closeId,list) {
        var content = document.getElementsByTagName('ul')[0];
        var str = '';
        for(var i in list) {
            //若是發送人時本身那麼就顯示到右邊
            if (list[i].senderUserId == localStorage.getItem("userId")) {
                str += '<li><img class="imgright" src="'+localStorage.getItem('userImgUrl')+'" width="50px" height="50px"><span class="spanright">'+list[i].content.content+'</span></li>';
            } else {
                str += '<li><img class="imgleft" src="'+localStorage.getItem('targetImgUrl')+'" width="50px" height="50px"><span class="spanleft">'+list[i].content.content+'</span></li>';
            }
        }
        if(list == '') {
            if(num==0){
                str = '<li><img class="imgright" src="'+localStorage.getItem("userImgUrl")+'" width="50px" height="50px"><span class="spanright">'+contentText+'</span></li>';
            }else {
                str = '<li><img class="imgleft" src="'+localStorage.getItem("targetImgUrl")+'" width="50px" height="50px"><span class="spanleft">'+contentText+'</span></li>';
            }
            content.innerHTML += str;
        }else {
            $(content).prepend(str);
        }
    }

    //var xfjApiUrl = '<?php echo WX_XFJ_API_URL ?>';
    function sendMessage(targetId,contentText) {
        rongCloud.sendMessage(targetId,contentText,"");

        /*//發送消息
        var agentId = localStorage.getItem("userId");
        agentId = agentId+"";
        targetId = targetId+"";
        $.ajax({
            type: "post"
            ,url:xfjApiUrl+"/mobile/wx_chat/publishMessage"
            //,url:"http://192.168.10.181:9091/api/mobile/chatService/publishMessage"
            ,data: {fromUserId:agentId,toUserId:targetId,content:contentText}
            ,datatype:'text'
            ,success:function(data){
                //發送成功後...
            }

            ,timeout:20000
        })*/
    }



    /**
     * 獲取和莫我的的聊天記錄 並調用寫入數據到congten得方法
     * @param targetIdPar 和誰的記錄
     * @param countPar 查詢幾條
     * @param mode 方式 1 爲點擊加載更多 0爲初始化查詢
     * @return hasMag 真表示還有數據
     */
    function getHistory(targetIdPar,countPar,mode){
        if (mode == 1) { //點擊獲取歷史消息的時候刪除一下加載更多這幾個字
            $(".jzgd").empty();
        }
        var rongCloud = new RongCloud();
        var conversationType = RongIMLib.ConversationType.PRIVATE; //私聊,其餘會話選擇相應的消息類型便可。
        var targetId= targetIdPar+""; // 想獲取本身和誰的歷史消息，targetId 賦值爲對方的 Id。 字符串類型
        var timestrap = null; // 默認傳 null，若從頭開始獲取歷史消息，請賦值爲 0 ,timestrap = 0; int
        var count = parseInt(countPar); // 每次獲取的歷史消息條數，範圍 0-20 條，能夠屢次獲取。 int性
        if(1 >= count){ //小於等於1報錯 仿qq0的時候查3條
            count = 3;
        }
        if(count >= 20) { //超過二十報錯 那麼就不讓他超過20條
            count = 20;
        }

        rongCloud.getHistoryById(function (hasMag, list) {
            writeInContent('','',"<?php echo $targetId ?>",list);
            if(parseInt(countPar) != 4 ) { //第一次獲取的歷史消息數和傳過來的未讀消息數相同是hasMag仍是爲true

            }
                if(hasMag){
                var rowsDisplayed = 10; //查詢歷史消息每次多加載十條數據
                //加載更多 //onclick=\"getHistory("+targetIdPar+","+null+","+20+")\"
                targetIdPar = "'"+targetIdPar+"'";
                var jzgd = "<li class='jzgd' onclick=\"getHistory("+targetIdPar+","+rowsDisplayed+","+1+")\" style='text-align: center;font-size: 16px;color:#4EA9E9'>查看更多消息</li>";
                $(".content").prepend(jzgd);
            }

        },conversationType,targetId, timestrap, count);
    }

    /**
     * 清空消息數 要清空必須得
     * 在這個頁面獲取一下歷史消息才能永久成功
     */
    function closeMessageCount(closeId) {
        var rongCloud = new RongCloud();
        rongCloud.getHistoryById(function (hasMag, list) {
            //清空數據
            rongCloud.cleanMessageCount(localStorage.getItem("closeId"));
        },RongIMLib.ConversationType.PRIVATE,localStorage.getItem("closeId"), null, 20);
    }

    /**
     * 跳轉到會話頁面
     */
    function jump(){
        window.location.href = "/mobile/wx_chat/conversationPage";
    }
</script>

 

解釋一下

1.封裝的融雲js文件中有個地方依賴這個頁面（就是以前提到的監聽消息的那段） 若是監聽到有消息那麼就調用這個頁面的寫入方法----writeInContent
2.?targetId=971b90fa-bcce-48bb-864c-79c784889e1d&count=0 經過控制器跳轉的時候要傳兩個參數一 targetId：你要查詢你和誰的聊天  count：第一次你要查詢幾條消息

會話頁面和聊天頁面只能做爲參照

複製無效！

但願能幫到你，或者你能幫到我！