1. 程式人生 > >融雲聊天系統的應用

融雲聊天系統的應用

因為產品需求,需要有聊天功能,客服功能。用的是融雲的,他把什麼方法都整合好了,用起來很方便。並且是免費的。但是第一次接觸,並不是那麼順利,並且在網上搜不到相關核心資料,只能硬著頭皮看文件,實在沒辦法就去融雲提交工單。深知做前端第一次接觸融雲不不易,所以我在這梳理一下融雲的相關方法。方便和我一樣找不著頭緒的前端使用。 
1.聊天室的樣式(包括訊息的氣泡)是你自己定義的。融雲不提供樣式的選擇。這樣的好處是,方便使用者建立屬於自己的聊天樣式。這麼解釋是因為我一開始以為樣式不用自己寫。 
進入正題: 
1.引入融雲相關JS文件,這個不難理解。我建議一定要引最新版本。

        <scriptsrc="http://res.websdk.rongcloud.cn/RongIMClient.emo  ji-0.9.2.min.js">
</script>

2.在初次載入融雲中我們所要做的事情:

        RongIMClient.init(APPKEY)//這是初始化,需要填引數就是你的APPKEY。這個不難理解。

3.獲取融雲的token,這個就不貼程式碼了,官方文件說的很清楚。 
4.現在有了融雲的token,就該連結融雲的伺服器了。

        RongIMClient.connect(token,
         {
              onSuccess: function(userId) {

              console.log("Login successfully." + userId);
        },
        onTokenIncorrect: function() {
          console.log('token無效');
        },
        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);
            }
      });

5.設定訊息監聽器

// 設定連線監聽狀態 ( 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;
            }
    }});

 // 訊息監聽器
 RongIMClient.setOnReceiveMessageListener({
    // 接收到的訊息
    onReceived: function (message) {
        // 判斷訊息型別
        switch(message.messageType){
            case RongIMClient.MessageType.TextMessage:
                   console.log(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...
                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;
            default:
                // 自定義訊息
                // do something...
        }
    }
});

6.這樣我們跟融雲連結的差不多了。接下來我們就可以開始做傳送訊息。前提是你的聊天室的樣式已將寫好。

// 定義訊息型別,文字訊息使用 RongIMLib.TextMessage
 var msg = new RongIMLib.TextMessage({content:"hello",extra:"附加資訊"});
 //或者使用RongIMLib.TextMessage.obtain 方法.具體使用請參見文件
 //var msg = RongIMLib.TextMessage.obtain("hello");
 var conversationtype = RongIMLib.ConversationType.PRIVATE; // 私聊
 var targetId = "xxx"; // 目標 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);
                }
            }
        );

這裡需要注意的是,你的聊天型別;是私聊,群組要定義清楚 
還有自定義訊息:比如在群組聊天中,誰點了一個贊,我要在聊天室中顯示:XXX點了一個贊。這時候就用到了自定義訊息。

RongIMClient.registerMessageType('messageType','objectName','messageTag','message|[]')
自定義訊息註冊位置: RongIMClient.init("appkey") 之後的第一行位置註冊即可。

7.我說一個我遇到的Bug:在前端點贊,視訊的點贊數量要+1,原生規定要傳一個“fav”(這個fav是自定義的),並且型別是:TextMessage。將之放到extra中,但是我一開始放不進去。後來在控制檯列印,他有一個方法:setSxtra()方法。最後就把”fav”給放進去了。

 var fav=RongIMClient.TextMessage.obtain("1");
        console.log(fav);
        fav.setExtra('fav');
        console.log(fav.getExtra());

8.言歸正傳,這時候你已經把訊息傳送,推送給了融雲,這時候再去融雲訊息監測方法那找你推送的訊息,並且把它顯示在你寫好的聊天框中,就OK了。 
9.想要獲取歷史聊天記錄怎麼辦?不怕,有方法:

//getHistoryMessages
 RongIMClient.getInstance().getHistoryMessages(RongIMLib.ConversationType.PRIVATE, 'targetId', null, 20, {
          onSuccess: function(list, hasMsg) {
            // hasMsg為boolean值,如果為true則表示還有剩餘歷史訊息可拉取,為false的話表示沒有剩餘歷史訊息可供拉取。
               // list 為拉取到的歷史訊息列表
          },
          onError: function(error) {
              // APP未開啟訊息漫遊或處理異常
                   // throw new ERROR ......
          }
        });