做爲小白接融雲 IM SDK 新路體驗~

時間 2021-04-19

標籤 html ios web app ide 佈局測試 code cdn 欄目 HTML 简体版

原文原文鏈接

前提說明

應項目需求，實現即時通信功能，業務場景相對單一，僅有單聊場景。選用的是融雲的 IM SDK。html

做爲小白的初期心路歷程

因爲本人以前沒有了解過即時通信初期瞭解仍是費了很多時間的。藍瘦~ios

話很少說，請看操做

第一步：註冊web

首先要在融雲的開發者後臺註冊拿到相應的信息。app

因爲初期瞭解，本身註冊了一個開發者帳號，沒有用公司的，本身搞了個 appkey 和測試的 token，想着先弄個出樣子。帳號的註冊參考的文檔的快速集成中的 前提條件。參考地址： https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/premise/ios.htmlide

後續這個服務端會給咱們提供鏈接用的 token。這裏先不作過多介紹。佈局

第二步：看文檔測試

因爲以前對即時通信業務的盲區，其實最開始公司給出的一對一聊天室有些無從下手的。接下來是漫無目的的逛文檔。文檔目錄仍是很對我口味的，我的感受還不錯，在不經意間發現了個切換文檔佈局的小功能我的比較喜歡。若是場景不清楚就用場景的文檔，清楚了能夠切換成平臺的，很方便很清晰。~(｡≧3≦)ﾉ⌒☆ui

我主要是經過看單聊的文檔還有切換成平臺模式的 web 端文檔實現的集成。code

附上文檔地址：https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.htmlcdn

第三步：先弄個簡單的示例

示例我參考了快速集成。SDK 使用的是 web 3.x 的 SDK

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdn.ronghub.com/RongIMLib-3.0.5-dev.js"></script>
</head>

<body>
<input id='messageValue' type="text/">
<button onclick="sendMessage()">發送</button>
<button onclick="getMessageList()">獲取歷史消息</button>

</body>
<script>
var appkey = 'XXX';
var token = 'XXXX';
var im;
var conversationList = [];

function init() {
im = RongIMLib.init({ appkey: appkey });
im.watch({
conversation: function (event) {
var updatedConversationList = event.updatedConversationList;
console.log('更新會話彙總:', updatedConversationList);
console.log('最新會話列表:', im.Conversation.merge({
conversationList,
updatedConversationList
}));
},
message: function (event) {
var message = event.message;
console.log('收到新消息:', message);
},
status: function (event) {
var status = event.status;
console.log('鏈接狀態碼:', status);
}
});
}
function connect() {
var user = { token: token };
im.connect(user).then(function (user) {
console.log('連接成功, 連接用戶 id 爲: ', user.id);
}).catch(function (error) {
console.log('連接失敗: ', error.code, error.msg);
});
}
function sendMessage() {
var inputText = document.getElementById('messageValue').value;

var conversation = im.Conversation.get({
targetId: 'user1',
type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
conversation.send({
messageType: RongIMLib.MESSAGE_TYPE.TEXT,
content: {
content: inputText
}
}).then(function (message) {
console.log('發送文字消息成功', message);
});
}
function getMessageList() {
var conversation = im.Conversation.get({
targetId: 'user1',
type: RongIMLib.CONVERSATION_TYPE.PRIVATE
});
var option = {
timestrap: +new Date(),
count: 20
};
conversation.getMessages(option).then(function (result) {
var list = result.list;
var hasMore = result.hasMore;
console.log('獲取歷史消息成功', list, hasMore);
});
}

init();
connect();
</script>

</html>