做为小白接融云 IM SDK 新路体验~

时间 2021-04-19

标签 html ios web app ide 布局测试 code cdn 栏目 HTML 繁體版

原文原文链接

做为小白接融云 IM SDK 新路体验~

前提说明

应项目需求，实现即时通信功能，业务场景相对单一，仅有单聊场景。选用的是融云的 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>

根据文档一步一步操做，都很顺利。体感不错。

额。。。请忽略我没有写 UI，只有个输入框和发消息按钮。此处也想给融云提个小建议，要是有 UI 组件或者含 UI 的 SDK那就更完美了。

遇到的坑

因为看文档时没有注意到获取历史消息须要先开通服务。致使本身消息发送成功再去获取历史消息有问题，本身研究获取历史消息的方法研究了半天。

融云官网：https://www.rongcloud.cn/