博客

简单介绍下，我直接在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中）

三、在接入融云的页面

<style lang="scss">
@import "im.scss";
</style>
<template>
  <div style="height:1200px;">
    <div id="rcs-app"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      token: '',
      appkey: '',
    }
  },
  activated() {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('message/login'),
        method: 'post',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 200) {
          RCS.init({
            appKey: data.data.appKey,
            token: data.data.token,
            avatar: data.data.avatar,
            username: data.data.username,
            userId:data.data.userId,
            target: document.getElementById('rcs-app'),
            showConversitionList: true,
            templates: {
              button: ['<div class="rongcloud-consult rongcloud-im-consult">',
                '   <button onclick="RCS.showCommon()"><span class="rongcloud-im-icon">联系客服</span></button>',
                '</div>',
                '<div class="customer-service" style="display: none;"></div>'
              ].join('') //"templates/button.html",
              // chat: "templates/chat.html",
              // closebefore: 'templates/closebefore.html',
              // conversation: 'templates/conversation.html',
              // endconversation: 'templates/endconversation.html',
              // evaluate: 'templates/evaluate.html',
              // imageView: 'templates/imageView.html',
              // leaveword: 'templates/leaveword.html',
              // main: 'templates/main.html',
              // message: 'templates/message.html',
              // messageTemplate: 'templates/messageTemplate.html',
              // userInfo: 'templates/userInfo.html', 
            },
          });
        }else{
          this.$message.error(data.msg)
        }
      })

    },
  },

}

</script>

四、需要在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/


）