写点什么

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

发布于: 2021 年 03 月 16 日

前提说明


应项目需求,实现即时通讯功能,业务场景相对单一,仅有单聊场景。选用的是融云的 IM SDK。


作为小白的初期心路历程


由于本人之前没有了解过即时通讯初期了解还是费了不少时间的。蓝瘦~


话不多说,请看操作


第一步:注册


首先要在融云的开发者后台注册拿到相应的信息。


由于初期了解,自己注册了一个开发者账号,没有用公司的,自己搞了个 appkey 和测试的 token,想着先弄个出样子。账号的注册参考的文档的快速集成中的 前提条件。参考地址:https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/premise/ios.html


后续这个服务端会给我们提供连接用的 token。这里先不做过多介绍。


第二步:看文档


由于之前对即时通讯业务的盲区,其实最开始公司给出的一对一聊天室有些无从下手的。接下来是漫无目的的逛文档。文档目录还是很对我口味的,个人感觉还不错,在不经意间发现了个切换文档布局的小功能个人比较喜欢。如果场景不清楚就用场景的文档,清楚了可以切换成平台的,很方便很清晰。~(。≧3≦)ノ⌒☆


我主要是通过看单聊的文档还有切换成平台模式的 web 端文档实现的集成。


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


第三步:先弄个简单的示例


示例我参考了快速集成。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/


用户头像

还未添加个人签名 2021.01.26 加入

还未添加个人简介

评论

发布
暂无评论
作为小白接融云 IM SDK 新路体验~