vue 对接融云webIM（基于element-ui)

简单介绍下，我直接在vue引入jquery,我写的还不足，代码比较冗余，但是可以正常使用，欢迎大家提出意见

一、首先我是查找融云的是否有关于vue代码，但是官网提供是Web IM SDK 相关，以下是连接

https://www.rongcloud.cn/docs/open_source.html

二、我要在element-ui框架使用，在index.html引入，

其次也要在线上做下处理，在static文件的config文件的init.js文件中引入

三、我是把融云的sdk下载自己本地的文件中（层级是在src下面的static中）

三、在接入融云的页面

四、需要在im.js文件进行代码修改，首先获取到登录的appKey，token等这些值（在我前面代码行代码复制出来了，接着我们要进行获取会话列表的数据）

1.因为项目需求，只用到一个对多，不同用户联系同个客服

2.点击连接融云。要去请求获取会话列表，要像后端请求用户信息，

 var infoList = [];
  var listRequest = function(e) { //返回值
    infoList = e;
  }
  //获取会话列表
  var getConversationList = function(callback) {
    RongIMClient.getInstance().getConversationList({
      onSuccess: function(list) {
        var listArr = [];
        for (var x = 0; x < list.length; x++) {
          if (!isNaN(list[x].targetId)) {
            listArr.push(list[x].targetId)
          }
        }
        console.log(listArr)
        global.RongIM.AppData.getUserInfos(listArr, listRequest)
        setTimeout(function() {
          //用户信息处理 http://support.rongcloud.cn/kb/NjQ5
          var _list = [];
          for (var i = 0; i < list.length; i++) {
            if (infoList.length > 0) {
              for (var j = 0; j < infoList.length; j++) {
                console.log(list[i].targetId,infoList[j].rongyunId)
                if (list[i].targetId == infoList[j].rongyunId) {
                  list[i].senderUserName = infoList[j].nickname;
                  list[i].senderPortraitUri = infoList[j].avatar;
                  list[j].draft = infoList[j].nickname;
                }
              }
            }
            if (list[i].conversationType == RongIMLib.ConversationType.PRIVATE) {
              _list.push(list[i]);
            }
          }
          var temp = _list[0];
          for (var i = 0; i < _list.length; i++) {
            for (var j = i + 1; j < _list.length; j++) {
              if (_list[i].sentTime < _list[j].sentTime) {
                var temp = _list[i];
                _list[i] = _list[j];
                _list[j] = temp;
              }
            }
          }
          callback && callback(_list);
        }, 1000)
      },
      onError: function(error) {
        // do something...
      }
    }, null);
  }

3.并对user-group.js进行修改

/*
CMD规范: https://github.com/seajs/seajs/issues/242
AMD规范: https://github.com/amdjs/amdjs-api/wiki/AMD
requirejs: http://requirejs.org/docs/whyamd.html
*/

/*
集成用户和群组数据的代码参考
主要为了演示思路，具体有些实现还需要自行处理
功能：
1：根据 userId 获取用户信息 （用户的 id、name、portrait）
2：根据 groupId 获取群组信息（群组的 id、name、portrait、memberIds）
*/

//namespace 请使用时具体定义
;
(function(global, factory, namespace) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  } else {
    global.RongIM = global.RongIM || {};
    global.RongIM.AppData = factory();
  }
})(window, function() {

  var userInfos = [];
  /*
  获取用户信息接口，建议支持批量获取，如不支持，只能通过循环请求处理，后面会有示例
  上行：ids = ["userId1","userId2",………………,"userIdN"].join(",");
  返回：userInfos
  */
  /*
  获取群组信息接口，建议支持批量获取，如不支持，只能通过循环请求处理，后面会有示例
  上行：ids = ["groupId1",………………,"groupIdN"].join(",");
  返回 groupInfos
  */
  var getCookie = function(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
      return unescape(arr[2]);
    else {
      return null;
    }
  }
  //请求方法，只给出成功返回的情况，异常请自行处理
  var request = function(url, pramas, callback) {
    /*
    请自行实现请求，或者传入 jQuery 等 lib 的 request 方法
    请注意处理可能存在的跨域问题
    */
    $.ajax({
      headers: {
        Accept: "application/json; charset=utf-8",
        token: getCookie("token")
      },
      url: url,
      type: 'get',
      dataType: 'json',
      success: function(res) {
        if(res.code==200){
          callback(res.data);
        }
      }
    })
  }

  // //创建本地缓存对象，缓存用户数据，目前放在内存，具体使用时可以根据需要处理为 localStorage 或 cookie 等
  // window.userInfoCache = window.userInfoCache || {};

  //获取用户信息方法的实现
  var getUserInfos = function(ids,callback) {
    //考虑到具体的应用场景，设计为 object，也可以根据业务特点设计成 array 等其他的数据格式
    var userInfos = [];

    var remoteUserIds = [];
    for (var i = 0, len = ids.length; i < len; i++) {
      var userId = ids[i];
      // if (userInfoCache[userId]) {
        //如果本地命中，直接放入结果等待一起返回
      //   userInfos[userId] = userInfoCache[userId];

      //   // 如果需要立即返回，这种方法会不断执行回调，逐个返回，如下面，此处以及request里的返回均可如此处理
      //   callback({userid:userInfoCache[userId]});
      // } else {
        //如果本地没有命中，过滤出 id，下一步从服务器请求
        remoteUserIds.push(userId);
      // }
    }

    //不支持批量请求，逐个返回用户数据
    var backNumbers = 0;
    for (var i = 0, len = remoteUserIds.length; i < len; i++) {
      var remoteUserId = remoteUserIds[i];
      var url = "https://cloud.shienkejiapp.com/shien-server/message/info?rongyunId=" + remoteUserId + "&t=" + (new Date()).valueOf()
      request(url, remoteUserId, function(remoteUserInfo) {
        var userId = remoteUserInfo.rongyunId;

        //放入本地缓存
        // userInfoCache[userId] = remoteUserInfo;

        //放入查询结果
        userInfos.push(remoteUserInfo);

        //计数 +1
        backNumbers += 1;

        //根据 backNumbers 与 remoteUserIds 的长度判断是否全部请求完毕
        if (backNumbers == len) {
          callback(userInfos)
        }
      });
    }
  };

  //返回需要对外暴露的方法
  return {
    getUserInfos: getUserInfos
  }
});

备注：会话列表出现历史消息，需要开通单群聊云储存服务

其次文件上传需要后端配合跨域问题（http://upload.qiniu.com/）