融云Web IM 开发聊天初识

惜

最近 接到任务 开发融云的 WebIM 聊天。遇到的一些问题和注意的事项。

首先下载 融云demo 并且用VS2010 打开。想到了 最近项目中要用VUE来开前端，就主要熟悉了 VUE vue-router 的DEMO。

看文档 看代码过程略过.........................



尝试 引入 开发环境中的appKey 和 用户 token。需要修改的第一个问题就是：怎么建立一个会话 文档说 只要发送了单聊消息 ，该用户自动进入会话列表。

好吧 这一步简单  先找 2 个以前注册的用户。一个做登录的用户 一个做准备聊天的用户 模拟一个用户加入会话列表。

[JavaScript] 纯文本查看 复制代码

'use strict';
(function(RongIM) {
  var components = RongIM.components;
//  var Conversation = RongIM.Conversation;
//  var im = RongIM.im;

  var conversationList = {
    name: 'conversation-list',
    template: `
      <div class="rong-conversation-box">
          <div class="rong-conversation-list">
              <div class="rong-conversation" v-for="conversation in conversationList" @click="show(conversation)">
                  <div class="rong-conversation-user">
                      <div class="rong-conversation-avatar rong-avatar" :style="{'background-image': 'url(' + conversation._target.portrait + ')'}"></div>
                  </div>
                  <div class="rong-conversation-title">{{conversation._target.name}}</div>
                  <div class="rong-conversation-message">
                      <span class="rong-conversation-sendername">{{conversation._sender.name}}:</span>
                      <em class="rong-conversation-content">{{conversation.latestMessage._content}}</em>
                  </div>
                  <div class="rong-conversation-senttime">{{conversation._sentTime}}</div>
              </div>
          </div>
      </div>
        `,
    data: function() {
      return {
        conversationList: []
      };
    },
    mounted: function(){
        mounted(this);
    },
    created: function() {
      getConversationList(this,gets);  //在这里 我加入回调函数 模拟一条数据到会话列表
    },
    methods: {
      show: function(conversation){
        var conversationType = conversation.conversationType;
        var targetId = conversation.targetId;

        this.$router.push({
            name: 'conversation',
            params: {
              conversationType: conversationType,
              targetId: targetId
           }
        });
      }
    }
  };

     //这是我加入的代码
    //创建一个模拟用户数据
    var createConversation = function(userId) {
        function Conversation(){

            function _target(name,portrait) {
                this.name = name;
                this.portrait = portrait;
            }

            function _sender(name) {
                this.name = name;
            }

            function latestMessage(_content) {
                this._content = _content;
            }

            this._sentTime = "";
            this._target = new _target("张三","http://tx.haiqq.com/uploads/allimg/150325/12211H320-5.jpg");
            this._sender = new _sender("李四");
            this.conversationType = 1;
            this.targetId = "7878787";
            this.latestMessage = new latestMessage("准备和张三聊天");
        }
        var newOjb = new Conversation();
        return newOjb;
    }

  function mounted(ctx){
    RongIM.Conversation.watch(function(){
      getConversationList(ctx);
    });
  }
  //这是我加入的参数 callback
  function getConversationList(ctx,callback) {
    RongIM.Conversation.get(function(error, conversationList1) {
      if (error) {
        console.error('Conversation.get Error: %s', error);
        return;
      }
      ctx.conversationList = conversationList1;
      //这是我加入的代码
      if (typeof callback === "function") {
         callback(ctx);
      }

    });
  }

    //这是我加入的代码
    function gets(ctx) {
        //ctx 是VUE 对象 conversationList 是左边会话列表的数据 在这里加入进去 
        ctx.conversationList.push(createConversation());
    }

    components.conversationList = conversationList;
})(RongIM, {Vue: Vue});

可以看到 我模拟的一个用户数据已经 在了。OK 现在就是 我要发送数据给他 ............  这时候 遇到一个问题，发送消息是成功，但是就是获取不到历史数据。

然后 各种折腾 各种调试。终于 知道了

文档: http://www.rongcloud.cn/docs/web.html#conversation （请注意一定要开启 单群聊消息云端存储功能 收费详情）

就是 这个原因 造成的 ，开发环境的 单群聊消息云端存储功能 没有开启 。天呐  为什么 绝逼是 前人 ..................... 好吧，反正 没人告诉我 开发环境中的

这个没开启 哎 怨自己看到了 却没去 后台 再 关注下。开启后 发送聊天信息 和 获取历史信息就正常了。

站长苏飞

我只是路过打酱油的。

liu

激动人心，无法言表！

竹林风

我只是路过打酱油的。

Amy

强烈支持楼主ing……

范范

强烈支持楼主ing……