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