融云集成一个聊天室页面(vue版本)

  首先，说一下使用情况。因为需求，需要做一个聊天室页面，因为不是专门的点对点聊天，是类似直播，但是是文字直播平台的那种。现在一般的课堂，可能会需要这种。分为2个端，一个是讲师端，一个是用户端。讲师端可能是单独的APP。用户端的页面可能是内嵌到专门的APP，或者是微信公众平台。我这次做的就是一个用户端。讲师端由原生来写，因为需要H5页面能兼容微信还有在手机端都能用。

  然后，说明一下，用了vue的UI框架是vux（下次可能就不会用这个了，其中Scroller竟然不维护了！），用的webpack打包。

  一切就绪，画页面，就是类似直播平台。用vux快速画好。

先确认需求，1.需要老师能撤回，然后客户端同时将数据从数组删除。2.能播放语音。3.讲师区是下拉加载更多，观众区是上拉加载更多。4.因为ios的输入法有联想词一栏，所以为了能正常输入文字，最后决定使用一个弹框，弹框里面有textarea进行输入文字。5.讲师发的图片。需要客户端能点开，变成大图。（简易版本，暂时无双指放大和双击放大）。6.讲师可以禁言。而客户端需要相应的改样式，禁止输入。差不多就是这些需求。

开始准备：

1.去融云官网注册账号。其实对我们前端来说，只是需要一个appkey。

2.拿到appkey，就相当于拿到大门钥匙。这个时候可以开始写js文件进行连接了。po上一张文件的内容。

主要是在views里面的index.vue写的文件。因为页面只有一个，所以我的路由写在了main.js（别说我没写路由，哈哈哈哈）。

好了，接下来我们要先进行连接。那么我写在utils.js就是从官网上扣下来的js文件，顺便封装一下，为了能在index.vue中取值，这边添加了一个回调函数。

export default {
  init(params, callbacks, modules) {
    var appKey = params.appKey;
    var token = params.token;
    // var navi = params.navi || "";

    modules = modules || {};
    var RongIMLib = modules.RongIMLib || window.RongIMLib;
    var RongIMClient = RongIMLib.RongIMClient;
    // var protobuf = modules.protobuf || null;

    var config = {};

    var dataProvider = null;
    var imClient = params.imClient;
    if (imClient) {
      dataProvider = new RongIMLib.VCDataProvider(imClient);
    }
    RongIMLib.RongIMClient.init(appKey, dataProvider, config);
    //语音播放初始化
    RongIMLib.RongIMVoice.init();

    var instance = RongIMClient.getInstance();

    // 连接状态监听器
    RongIMClient.setConnectionStatusListener({
      onChanged: function(status) {
        // console.log(status);
        switch (status) {
          case RongIMLib.ConnectionStatus["CONNECTED"]:
          case 0:
            console.log("连接成功");
            callbacks.getInstance && callbacks.getInstance(instance);
            break;

          case RongIMLib.ConnectionStatus["CONNECTING"]:
          case 1:
            console.log("连接中");
            break;

          case RongIMLib.ConnectionStatus["DISCONNECTED"]:
          case 2:
            console.log("当前用户主动断开链接");
            break;

          case RongIMLib.ConnectionStatus["NETWORK_UNAVAILABLE"]:
          case 3:
            console.log("网络不可用");
            break;

          case RongIMLib.ConnectionStatus["CONNECTION_CLOSED"]:
          case 4:
            console.log("未知原因，连接关闭");
            break;

          case RongIMLib.ConnectionStatus["KICKED_OFFLINE_BY_OTHER_CLIENT"]:
          case 6:
            alert("用户账户在其他设备登录，本机会被踢掉线");
            break;

          case RongIMLib.ConnectionStatus["DOMAIN_INCORRECT"]:
          case 12:
            console.log("当前运行域名错误，请检查安全域名配置");
            break;
        }
      }
    });

    //开始链接
    RongIMClient.connect(
      token,
      {
        onSuccess: function(userId) {
          callbacks.getCurrentUser &&
            callbacks.getCurrentUser({
              userId: userId
            });
          console.log("链接成功，用户id：" + userId);
        },
        onTokenIncorrect: function() {
          console.log("token无效");
        },
        onError: function(errorCode) {
          console.log(errorCode);
        }
      },
      params.userId
    );
    /*
        文档：http://www.rongcloud.cn/docs/web.html#3、设置消息监听器

        注意事项：
            1：为了看到接收效果，需要另外一个用户向本用户发消息
            2：判断会话唯一性 ：conversationType + targetId
            3：显示消息在页面前，需要判断是否属于当前会话，避免消息错乱。
            4：消息体属性说明可参考：http://rongcloud.cn/docs/api/js/index.html
        */