使用web方式開發cordova(ionic)應用即時聊天(im)功能(2)

把前置工做作完以後就能夠正式進入開發環節了

界面編寫

界面你們就自由發揮了，各有各的風格你們自由發揮唄，因爲本人ui水平大概初中生的水平，因此是在網絡上找ui資源，而後切出來的，感受也還能夠。若是你們也是用ionic開發，也不想麻煩的話，能夠用下這個資源，是ionic出的幾個模版，代碼也有了，能夠拿來直接使用。

保存歷史記錄

融雲 Web SDK 最新提供 getHistoryMessages，來幫助開發者獲取歷史消息紀錄。 使用此方法前提是 APP 必須開啓歷史消息雲存儲，如 APP 沒有開啓消息漫遊則執行 onError 方法。

能夠看到，若是不開通曆史消息雲存儲的話，是須要收費的。不過這裏若是不須要在不一樣的設備上也要瀏覽歷史記錄的話是能夠用h5的本地存儲作到的，很幸運的是，我這個項目就不須要，若是須要的話，就須要服務端配合了，由於融雲有提供服務端獲取歷史消息的接口，不過融雲那邊一小時同步一次。這裏我用的是angular-local-storage，他有個挺不錯的功能就是能夠把對象和localStorage裏的項綁定起來，這個在咱們的項目裏十分方便。

設置消息監聽

根據這個文檔來設置消息監聽，而後根據message.messageType，來判斷不一樣的消息類型來進行不一樣的操做。這裏分爲兩步

1. 將接收到的消息保存起來

2. 通知相應的頁面接受到消息，用向下廣播($rootScope.$broadcast)的方式

例如:

// 檢查發送該消息的討論組是否已經在會話列表中
angular.forEach(recentContact, function (val, key) {

    if (val.id === message.targetId) {

        // 標記爲從對方接受
        message.from = 'friend';

        isInlist = true;

        // 是否在當前打開的討論組中
        if (selectedContactor && message.targetId === selectedContactor.id && $state.current.name === 'im') {

            // 廣播接受到當前討論組的消息
            $rootScope.$broadcast('currentContactGetTheMessage', message);

        // 不是的話未讀數量+1
        } else {

            val.unreadMessageCount = val.unreadMessageCount ? val.unreadMessageCount + 1 : 1;
        }

        val.recentMessage.push(message);

        recentContact.splice(key, 1);

        recentContact.unshift(val);

        saveToStore(recentContact);
    }
});