React-Native with LeanCloud 构建实时聊天软件

React-Native with LeanCloud 构建的实时聊天软件

本次hackpku中使用了rn框架写的安卓app..

总结一下，坑多，水深。

↑感谢女票画的logo，虽然once拼成了ocne

首先，环境问题；
webstrom编写
安装nodejs react …….bulabula 一堆东西
就按照官网来了，。
之后。。。。

APP_ID = 'XjLmjhJiS1IaNmp******************z';
    APP_KEY = 'oYtHfuVtp2MFk***********';
    AV = require('leancloud-storage');
    Realtime = require('leancloud-realtime').Realtime;
    TextMessage = require('leancloud-realtime').TextMessage;

    AV.init({
        appId: APP_ID,
        appKey: APP_KEY,
        region: 'cn', // 美国节点为 "us"
    });

    realtime = new Realtime({
        appId: 'XjLmjhJiS1IaNmp******************z',
        appKey: 'oYtHfuVtp2MFkJw6I*******',
        region: 'cn', // 美国节点为 "us"
    });

连接服务器。
因为rn中各种函数一起调用会出现异步错误，，（坑死人）
所以就，，每一步写一个函数，，
分部执行，，，，，，，，，，，
绝望。。
首先建立用户/登陆

realtime.createIMClient(a).then(function(tom) {
        userr=tom;//这里顺手拿到user变量
        return tom.createConversation({
            members: ['1'],
            name: a,
        });
    }).then(()=>{
        thatF();
    });

拿到user变量之后在另外一个函数里面建立conversation（加好友 ）
本次写的是一个基于face++的聊天系统，
所以所有的用户ID全部使用face++ api处理出的faceID。

export function acon(a,b,u,nc,getcon) {
    ctot++;//记录好友总数
    userr.createConversation({
        url:u,//头像url
        nickName:nc,//昵称
        dd:b,//好友faceID
        lastMessage:' ',//最近一条消息
        isIn:'true',//最后一条消息来自谁
        members: [a,b],//会话成员
        name: a+"##"+b,//会话ID
    }).then(function(conversation) {
        getcon(conversation);
        var ss={
            name:'Hello!~',//默认打招呼
            from:a,
            to:b
        };
        var ja=JSON.stringify(ss);
        return conversation.send(new TextMessage(ja));
    }).then(function(message) {
    }).catch(console.error);
}

之后需要处理，在点击好友是切换到与当前好友的对话

export function set_con(a,b,that) {
    var query=userr.getQuery();
    query.equalTo('name', a+'##'+b);//按会话ID检索。
    query.find().then(function (data) {
        data.forEach(function (tod) {
            conv=tod;//拿到conversation
            get_jl(conv,that);
        })
    }, function (error) {
    });
}

给好友发送一条消息

export function asend(test) {
    conv.send(new TextMessage(test));
    conv.lastMessage=test;
    conv.isIn=false;
}

监听有没有好友发送过来消息；

export function gett(a,that)
{

    realtime.createIMClient(a).then(function(jerry) {
        jerry.on('message', function(message, conversation) {
            // alert('Message received: ' + message.text);
            // alert("before:" + that.state.messages.length);
            conversation.isIn=true;

            var maa=JSON.parse(message.text);
            conversation.lastMessage=maa.name;
            // alert(maa.name);
            //obj = str.parseJSON()
            // alert(maa[1]);
            that.setState(

                (previousState) => ({
                    messages:GiftedChat.append(previousState.messages,
                        {
                            _id: tot++,
                            text: maa.name,
                            createdAt: new Date(),
                            user: {
                                _id: maa.from,
                                name: maa.from,
                            },
                        }
                    ),
                })
            );
            // alert("after:" + that.state.messages.length);
        });
    }).catch(console.error);
    // alert("yes");
}

拿到与此人之间的聊天记录

export function get_jl(conn,that) {

    var messageIterator = conn.createMessagesIterator({ limit: 10 });
    messageIterator.next().then(function(result) {
        for(i=0;ivar mab=JSON.parse(result.value[i]._lctext);
            that.setState(
                (previousState) => ({
                    messages:GiftedChat.append(previousState.messages,
                        {
                            _id: tot++,
                            text: mab.name,
                            createdAt: new Date(),
                            user: {
                                _id: mab.from,
                                name: mab.from,
                            },
                        }
                    ),
                })
            );
        }

    }).catch(console.error.bind(console));
// 第二次调用 next 方法，获得第 11 ~ 20 条消息，还有更多消息，done 为 false
    messageIterator.next().then(function(result) {
        // result: {
        //   value: [message11, ..., message20],
        //   done: false,
        // }
        console.log(result.value);
    }).catch(console.error.bind(console));
// 第二次调用 next 方法，获得第 21 条消息，没有更多消息，done 为 true
    messageIterator.next().then(function(result) {
        // No more messages
        // result: { value: [message21], done: true }
        console.log(result.value);
    }).catch(console.error.bind(console));
}

，，差不多了。
纪念北大划水三天。。