V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
anquanchukou
V2EX  ›  程序员

APICloud 融云模块使用教程三连发:教你实现即时通讯功能

  •  
  •   anquanchukou · 2015-05-20 14:29:54 +08:00 · 8135 次点击
    这是一个创建于 3468 天前的主题,其中的信息可能已经有所发展或是发生改变。
    ** [APICloud融云教程第一弹] 聊天会话的实现及UI**
    实现功能:融云会话聊天及UI,发送表情消息
    使用模块:rongCloud chatBox
    教程开始:因为融云为第三方模块,每次调试都得需要云编译,建议大家先把UI和基本代码做好。
    JS插件使用:zepto.min.js
    一、UI的制作
    二、融云的链接
    详细内容: http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=4333&highlight=%E8%9E%8D%E4%BA%91


    ** [APICloud融云教程第二弹] 会话列表及获取最新会话消息**

    在做会话列表页的时候发现了不少问题,首先我也是第一次使用apicloud和融云,下面讲的可能不是最好的办法,如果有更好的办法欢迎分享。首先说一下会话列表页实现的思路
    一、使用 getConversationList 方法来获得全部会话列表,但是这样直接获得的列表并不是我们想要的,rongCloud的会话列表出现了两种情况:
    (1)发送者等于本地用户 ;
    (2)接收者等于本地用户。
    后面实现的功能是只获得接收者为本地用户的情况。
    二、获得会话列表后将列表内容插入容器中,同时加载用户信息(主要为头像和昵称)。
    三、监听是否有最新消息写入,我这里实现的逻辑是加载完列表后再来监听,这个就根据自己的需要来就行了。
    四、如果有新消息进来,两种情况
    (1)发送者已在会话列表中存在--->更新会话内容及时间;
    (2)不存在--->写入容器。
    五、点击会话列表页进入会话窗口,这里遇到了几个问题没能很好的解决,就使用了一个比较笨的办法。
    问题:因为会话列表页在监听消息,当打开聊天页面也会在监听最新消息,中间可能会有冲突导致页面无法正常监听
    我的解决方案(这个方法可能有点笨):
    当打开聊天页面后,关闭会话列表页rongcloud的连接--------关闭聊天页面时关闭聊天页面的连接并重新打开会话列表页的连接,同时监听最新消息并更新下
    详细内容: http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=4462&highlight=%E8%9E%8D%E4%BA%91

    ** [APICloud融云教程第三弹] 完整案例开发,可以上线使用**

    期待的第三弹出来,实现的功能主要是整合前两篇讲的并做了下优化,目前已经上线,想体验的可以下载APP。这次讲的去掉了chatbox功能,只是文字消息的发送,如果是做语音和图片的自己可以去扩展。
    下载链接:
    http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=5171
    首先分析下流程:
     ![enter image description here][1]
    流程分析出来了,下面再做一下简单的说明:

    会话列表页消息的监听和获取这个地方的实现是比较容易的,但是在打开会话的时候列表页的监听会失效。所以就要在聊天页面来处理消息的监听时间。

    在会话页面制作的时候,初次打开监听都是正常的,但是当发完一条消息后发现监听失效。反复的测试初步认为是键盘的弹出导致,可能是监听输入状态跟监听消息由点冲突。

    会话页面监听数据时需要监听全局的消息,如果是当前会话的消息就写入,否则只是提示一下有新消息。

    关闭会话页面时,因为列表页的监听已经失效,所以要发送一个刷新事件来获取最新消息和一个监听事件的开启。

    详细内容: http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=5254&highlight=%E8%9E%8D%E4%BA%91


    [1]: http://htmljs.b0.upaiyun.com/uploads/1432094898183-59b2900aa03cb2182a51cdb520b535b6.png
    3 条回复    2015-05-20 22:39:20 +08:00
    iugo
        1
    iugo  
       2015-05-20 15:37:18 +08:00
    只有 WEB 技术栈可以使用 APICloud 进行 APP 开发吗?
    anquanchukou
        2
    anquanchukou  
    OP
       2015-05-20 15:38:46 +08:00
    @iugo 可以
    Sunnyyoung
        3
    Sunnyyoung  
       2015-05-20 22:39:20 +08:00
    APICloud跟融云是什么关系
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1807 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:44 · PVG 00:44 · LAX 08:44 · JFK 11:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.