APICloud即時通訊模塊使用教程三連發(fā)：教你實現(xiàn)即時通訊功能

app3c1

【APICloud即時通訊教程第一彈】聊天會話的實現(xiàn)及UI
實現(xiàn)功能：融云會話聊天及UI，發(fā)送表情消息
使用模塊：rongCloud   chatBox
教程開始：因為融云為第三方模塊，每次調試都得需要云編譯，建議大家先把UI和基本代碼做好。
JS插件使用：zepto.min.js
一、UI的制作
二、融云的鏈接
詳細內容：見附件


【APICloud即時通訊教程第二彈】會話列表及獲取最新會話消息
在做會話列表頁的時候發(fā)現(xiàn)了不少問題，首先我也是第一次使用apicloud和融云，下面講的可能不是最好的辦法，如果有更好的辦法歡迎分享。首先說一下會話列表頁實現(xiàn)的思路
一、使用 getConversationList 方法來獲得全部會話列表，但是這樣直接獲得的列表并不是我們想要的，rongCloud的會話列表出現(xiàn)了兩種情況：
    （1）發(fā)送者等于本地用戶 ；
（2）接收者等于本地用戶。
后面實現(xiàn)的功能是只獲得接收者為本地用戶的情況。
二、獲得會話列表后將列表內容插入容器中，同時加載用戶信息（主要為頭像和昵稱）。
三、監(jiān)聽是否有最新消息寫入，我這里實現(xiàn)的邏輯是加載完列表后再來監(jiān)聽，這個就根據(jù)自己的需要來就行了。
四、如果有新消息進來，兩種情況
（1）發(fā)送者已在會話列表中存在--->更新會話內容及時間；
（2）不存在--->寫入容器。
五、點擊會話列表頁進入會話窗口，這里遇到了幾個問題沒能很好的解決，就使用了一個比較笨的辦法。
問題：因為會話列表頁在監(jiān)聽消息，當打開聊天頁面也會在監(jiān)聽最新消息，中間可能會有沖突導致頁面無法正常監(jiān)聽
我的解決方案（這個方法可能有點笨）：
當打開聊天頁面后，關閉會話列表頁rongcloud的連接--------關閉聊天頁面時關閉聊天頁面的連接并重新打開會話列表頁的連接，同時監(jiān)聽最新消息并更新下
詳細內容：見附件

【APICloud即時通訊教程第三彈】完整案例開發(fā)，可以上線使用
期待的第三彈出來，實現(xiàn)的功能主要是整合前兩篇講的并做了下優(yōu)化，目前已經上線，想體驗的可以下載APP。這次講的去掉了chatbox功能，只是文字消息的發(fā)送，如果是做語音和圖片的自己可以去擴展。
詳細內容：見附件
首先分析下流程：
 
流程分析出來了，下面再做一下簡單的說明
會話列表頁消息的監(jiān)聽和獲取這個地方的實現(xiàn)是比較容易的，但是在打開會話的時候列表頁的監(jiān)聽會失效。所以就要在聊天頁面來處理消息的監(jiān)聽時間。
在會話頁面制作的時候，初次打開監(jiān)聽都是正常的，但是當發(fā)完一條消息后發(fā)現(xiàn)監(jiān)聽失效。反復的測試初步認為是鍵盤的彈出導致，可能是監(jiān)聽輸入狀態(tài)跟監(jiān)聽消息由點沖突。
會話頁面監(jiān)聽數(shù)據(jù)時需要監(jiān)聽全局的消息，如果是當前會話的消息就寫入，否則只是提示一下有新消息。
關閉會話頁面時，因為列表頁的監(jiān)聽已經失效，所以要發(fā)送一個刷新事件來獲取最新消息和一個監(jiān)聽事件的開啟。
詳細內容：見附件
APICloud平臺融云模塊使用教程三連發(fā).zip (15.31 KB, 下載次數(shù): 42)

2015-05-20 14:03 上傳

點擊文件名下載附件