藉助融雲SDK搭建客服聊天系統(web端)
阿新 • • 發佈:2019-02-14
因為博主是做後端的,這裡介紹更偏向於後端
- 介紹融雲web端SDK
- 介紹融雲Server端API
- 客戶端融雲SDK整合
- 客服端融雲SDK整合
- 本地伺服器端API編寫
融雲web端API介紹
初始化SDK
AppKey:融雲後臺建立應用的唯一標識
RongIMLib.RongIMClient.init("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.DOMAIN_INCORRECT: console.log('域名不正確'); break; case RongIMLib.ConnectionStatus.NETWORK_UNAVAILABLE: console.log('網路不可用'); break; } }}); // 訊息監聽器 RongIMClient.setOnReceiveMessageListener({ // 接收到的訊息 onReceived: function (message) { // 判斷訊息型別 switch(message.messageType){ case RongIMClient.MessageType.TextMessage: // message.content.content => 訊息內容 break; case RongIMClient.MessageType.VoiceMessage: // 對聲音進行預載入 // message.content.content 格式為 AMR 格式的 base64 碼 break; case RongIMClient.MessageType.ImageMessage: // message.content.content => 圖片縮圖 base64。 // message.content.imageUri => 原圖 URL。 break; case RongIMClient.MessageType.DiscussionNotificationMessage: // message.content.extension => 討論組中的人員。 break; case RongIMClient.MessageType.LocationMessage: // message.content.latiude => 緯度。 // message.content.longitude => 經度。 // message.content.content => 位置圖片 base64。 break; case RongIMClient.MessageType.RichContentMessage: // message.content.content => 文字訊息內容。 // message.content.imageUri => 圖片 base64。 // message.content.url => 原圖 URL。 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... } } });
頁面聊天框訊息構成:聊天框訊息構成應該由融雲歷史訊息記錄(RongIMLib.RongIMClient.getInstance().getHistoryMessages),加上訊息監聽器(RongIMClient.setOnReceiveMessageListener),然後再加上傳送訊息時(RongIMClient.getInstance().sendMessage),將自己傳送的訊息也新增到聊天框
連線伺服器
連線融雲必須在執行 RongIMLib.RongIMClient.init(appkey); 之後,並且所有除監聽以外的方法都必須在 connect成功之後 再呼叫。
重點:除監聽以外所有的介面都必須在連線成功以後呼叫,傳送訊息介面也要在連線成功後呼叫,
var token = "mKmyKqTSf7aNDinwAFMnz7NXKILeV3X0+CCRBOxmtOApmvQjMathViWrePIfq0GuTu9jELQqsckv4AhfjCAKgQ=="; RongIMClient.connect(token, { onSuccess: function(userId) { console.log("Connect successfully." + userId); }, 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(errorCode); } });
token可以通過本地伺服器請求融雲伺服器獲取token,然後本地伺服器將token返回給客戶端
訊息介面
傳送文字訊息
var msg = new RongIMLib.TextMessage({content:"hello RongCloud!",extra:"附加資訊"});
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);
}
}
);
獲取單群聊歷史訊息
var conversationType = RongIMLib.ConversationType.PRIVATE; //單聊,其他會話選擇相應的訊息型別即可。
var targetId = "xxx"; // 想獲取自己和誰的歷史訊息,targetId 賦值為對方的 Id。
var timestrap = null; // 預設傳 null,若從頭開始獲取歷史訊息,請賦值為 0 ,timestrap = 0;
var count = 20; // 每次獲取的歷史訊息條數,範圍 0-20 條,可以多次獲取。
RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType, targetId, timestrap, count, {
onSuccess: function(list, hasMsg) {
// list => Message 陣列。
// hasMsg => 是否還有歷史訊息可以獲取。
},
onError: function(error) {
console.log("GetHistoryMessages,errorcode:" + error);
}
});